【Facebook】ページプラグインの横幅レスポンシブ可変のコツと間違い

hyH6Nmb6psb5rWJM

Facebookのページプラグイン設定ページが、いつの間にか日本語で充実していた。

デフォルトでは、ページの読み込み時に、親コンテナーのwidth (最小180px/最大500px)に合わせてプラグインの幅が設定されます。

[プラグインコンテナの幅に合わせる]の選択を解除すると、可変幅をオフにできます。その場合、親コンテナの幅に関係なく、プラグインは指定した幅で表示されます。

プラグインのwidthはページの読み込み時に決定されます。

ということなので、横幅と高さは空白にして、[プラグインコンテナの幅に合わせる]をチェックする。

fb-plugin-01

 

要点とコード

code

  • max-width: px; で横幅の固定値を指定し、同時にwidth: auto; も指定すれば、勝手にレスポンシブしてくれる
  • Facebookコードをボックスでネストして、CSSを指定する

 

間違った対策

bug

Web制作系ブログで、

ページプラグイン設定ページでwidthとheightを指定しても大丈夫。
Facebookコードをボックスでネストして、width に !important をつければOK。

といった記事を度々見かけるが、これは間違い。
実際やってみると、横幅は可変してくれない。

ページプラグイン設定ページで、幅と高さを空白にし、「plugin containerの幅に合わせる」をチェックすることが重要。

    • このエントリーをはてなブックマークに追加