wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

Facebookページプラグインの幅が最大500ピクセルって

以前はレスポンシブ対応だったんですけど、どんなに頑張っても最大500ピクセルまでしか幅広げられないみたいですね。

ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

既定幅は340ピクセル。

レスポンシブWebデザインでFacebookページのプラグインをどうやってうまく配置させるかという問題ですが、「plugin containerの幅に合わせる」にチェックしといて(data-adapt-container-width="true")、とりあえず幅を500ピクセルにしとくのがいいですね。data-width="500" です。

f:id:wanichan:20170424104902p:plain

それでコードを取得すれば、最大500ピクセルになり、それより幅が狭ければそれに準じて調整されます。サイドバーの要素は最小幅180ピクセルを確保したらOKですわ。

しかし、このままだと画面縦向きで1カラムになった場合の体裁が悪くなっちゃいます。

この場合は、そのプラグインを<div>で囲んで、

<div style="margin:auto;text-align:center">
ここにプラグインのコードを貼り付ける
</div>

そうすれば、センタリングします。まあ、margin:auto だけでもいいと思うんですけど念のため。

f:id:wanichan:20170424105003p:plain

Facebookのプラグインはコロコロ仕様変更されるので、導入方法を書く場合はサイトの記事としてではなく、ブログ記事で取り扱ったほうがよさそうです。

てか、アプリもどんどんバージョンアップしていくので、なんか改訂するのがしんどくなっています。ひと昔前はそんなに頻繁に機能追加とかされなかったのにぃ。