Facebookをサイトに埋め込むための「ページプラグイン」をレスポンシブ対応（横幅可変）する方法のまとめです。

Facebookのページプラグインを埋込むこと自体はとても簡単ですが、埋込みコードそのままでサイトをレスポンシブにすると横幅が収まらなかったり狭すぎたりとうまくいきません。
私の場合は、PC版の方が埋込みの最大サイズである幅500pxだったため、スマホの画面に収まりませんでした。調べてみたところ、とても簡単にレスポンシブ対応できることがわかりましたので備忘も兼ねてメモしておきます。

1.まずはプラグインを生成

Facebook for Developers（開発者向けFacebook）のページプラグイン生成ページでデザインに合わせた幅や高さなどを設定します。

その際、「plugin containerの幅に合わせる」のチェックボックスに必ずチェックを入れます。

2.コードを取得

設定ができたら、プレビューの下にある「コードを取得」をクリックします。
生成されたコードがモーダル画面に表示されますので、ステップ2のコードをHTMLファイルに配置します。

ステップ3のコードは以下のようになります。以下のコードの内「data-adapt-container-width=”true”」の部分がレスポンシブ対応にするためのコードです。特にこのコードを触る必要はありませんので、そのままプラグインを表示させたい場所（HTML）にコピー＆ペーストしてください。

3.HTMLとCSSの調整

以上でOK！だとありがたいのですが、ここから少しHTMLとCSSの調整をする必要があります。

HTML

生成されたステップ3のコードをdiv要素などで囲んでください。class名は任意のものでOKです。

CSS

例えば、スマホは画面幅に合わせて、PCはページプラグインの最大幅500pxで表示させる場合は、以下のように指定します。
スマホの表示領域が500pxを越えても、ページプラグインの仕様上500pxまでしか広がりませんので注意してください。なのでスマホ用の「max-width: 500px」は不要かもしれませんが、念のため。

注意点

180px〜500pxの幅制限以外にも、ページプラグインを利用する上で留意しておきたい点がいくつかあります。

レスポンシブとはいえ…

レスポンシブ対応する方法として説明してきましたが、「plugin containerの幅に合わせる」オプションは、いわゆるレスポンシブといわれてイメージするようにブラウザの幅に応じて随時幅を調整してくれるわけではありません。
公式の説明にも「プラグインのwidthはページの読み込み時に決定されます」とあり、スマホの画面を回転させた場合（landscape）やPCでブラウザの幅を狭くしていった際に追従してくれるわけではありません。

高さは？

「plugin containerの幅に合わせる」という項目名が表していますが、合わせてくれるのは「幅」のみです。高さはコード生成の際に入力した値となります。PCとスマホで高さを変えたい、というのはCSSだけでは難しいようです。

まとめ

現時点では自前でJavaScriptを用意しないと幅が変わった場合（スマホで画面を回転させた場合など）の対応ができませんが、デフォルトで幅を再取得して調整をしてくれるなど、もう少しフレキシブルになってくれることに期待したいところです。