Facebookをホームページに貼る コード取得

2018/11/2 もう11月なんですね。超忙しいw

Facebookをウェブサイトに貼りたい」との事でしたので、
では、ログインしてiframeコードを取得するお願いしたところ、
別のプラグインコードが送られてきました。あらら・・・

別のソースを改変して、外部から書き直せるかと考えたが、もしかして外部取得できるんじゃなかったか?とおぼろげな記憶・・・
はい! Facebookコードは、Facebook developersから取得できましたw
余計なお手数をお掛けし、ごめんなさい。

Facebookをレスポンシブに

ところで、iframeってiPhoneでハミ出ますよね、ハックも完璧じゃないようだし、
何よりFacebookがレスポンシブじゃないので上手くいかない。

ベターな対策としては、Facebookのプラグインも面倒なのですが・・・
data-width="500"
data-adapt-container-width="true"
が必須で、
親要素を{ width: 100%; max-width: 500px;}

・ただし、MAXでも500pxです。
・ファーストレンダリングで判断しているでしょうから、手動で幅を可変しても変わりません・・・
ウインドウリサイズ用スクリプトを利用する方法もあるんですね。すごいなぁ


twitterの埋め込み

  1. https://publish.twitter.com/にて
  2. 下部の埋め込みたいタイプを選択
  3. twitterのURLを入力
  4. コードをコピー、自サイトのHTMLにペーストします。

レスポンシブは、height="500" width="100%"のようです。
<a class="twitter-timeline" href="https://twitter.com/〜アカウント〜?ref_src=twsrc%5Etfw" height="500" width="100%">Tweets by 〜アカウント〜</a>


それと iPhoneのレンダリングで、
画像回り込みimg{float:left;}で、次の1行目のテキストがnowrapになってしまい、横幅がガバガバになってしまうんですが(1行目をbr改行しないといけません・・・)
Apple iOs 早くバグ修正してくれ!


コメント

コメントを書く
お名前:

メール:

Web URL:

コメント: [必須入力]

認証コード: [入力必須] ※ 画像の文字を半角で入力してください。
認証 : 一二三

 ※ 承認されたコメントのみ表示されます。