ブログ（STINGER5）にFacebookページプラグイン（Page Plugin）を設置。タブレット表示の際、プラグイン読み込みで横幅の長さが変わって画面がチラつくときの対策。

ハイ！　リサです。

このブログに、やっとfacebookページプラグインを設置しました。
何カ所か迷うこともあったので、書き留めておきます。

一番の問題はタブレット（Android6.0のNexus9）でブログを見たときです。
このブログはタブレットの縦横表示もPCと同じレイアウトで表示出来るようにViewportが設定してあります。

そのため、ブログの横幅がfacebookページプラグインの読み込みタイミングで変わって、見にくくて困りました。

Facebookページプラグインのコードを作る

※上記の図はロイターの元記事にリンクします。

Facebookページプラグインをサイドバーに設置するために、まず埋めこみコードを取得します。コードの作成はFacebookのPage Pluginページで作ります。

Facebookページのアドレスと表示形式のチェックボックスを希望の形になるように設定します。

Get Codeボタンを押せば2つのコードを取得できます。

上記で得られた2つのコードをあわせてサイドバーウィジェットに設置します。

これで、Facebookプラグインを設置できました。

「oh yeah Steve !」ブログはタブレットではPCと同じレイアウトで表示するようにVewportを指定しています。

 &lt;meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes"&gt;

FacebookのPage Pluginの領域は横幅がフリーになっているので、読み込み時にサイドバーの幅を超えてしまいます。
そのためブログ全体の横幅の長さが変化します。
それが原因でタブレット（Android6.0のNexus9）でみるとブログの横幅が変わってチラチラする現象が起こります。

とても見にくいので以下のCSSコードを設置して、横幅のオーバーフローした部分を隠してしまいます。

@media screen and ( min-width: 781px ) {
 /* facebookの領域を300固定 */
 .fb-page {
 width: 300px;
 overflow: hidden;
 }
}

これで、画面横幅の変化によるチラつきはなくなります。

と思ったのですが…

一時問題は解消したかに見えたのですが、テンプレートを修正したりしていたら、問題が再発しました。
どうしても、ちらつきが嫌な場合は、スマホでのレスポンシブ対応を犠牲にして、コード取得時に「Width」の項目に幅300を入れるしかなさそうです。

Facebookページプラグイン自体のレスポンシブ対応がいまいちですね。

きちんと対応出来なかったのが残念です。

分かった方がいらしたらカキコお願いします。

申し訳ないですが、このへんで。

See you !