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の埋め込み
- https://publish.twitter.com/にて
- 下部の埋め込みたいタイプを選択
- twitterのURLを入力
- コードをコピー、自サイトの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 早くバグ修正してくれ!
コメント