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

facebook

ハイ! リサです。

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

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

過去記事 STINGER5のタブレット縦表示を横表示と同じレイアウトに変更

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

スポンサーリンク
スポンサーリンク

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

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

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

FacebookのPage Pluginページへ移動

Page-Plugin リンクFacebook Page Pluginページ

項目の設定

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

Page-Plugin-code

Get Codeボタンを押してコード取得

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

code

サイドバーウィジェットに「テキスト」を設置

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

wijet

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

タブレット表示の横幅対策

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

 <meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes"> 

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 !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする