更新SNSWebコーディングFacebookをサイトに埋め込むための「ページプラグイン」をレスポンシブ対応(横幅可変)する方法のまとめです。Facebookのページプラグインを埋込むこと自体はとても簡単ですが、埋込みコードそのままでサイトをレスポンシブにすると横幅が収まらなかったり狭すぎたりとうまくいきません。私の場合は、PC版の方が埋込みの最大サイズである幅500pxだったため、スマホの画面に収まりませんでした。調べてみたところ、とても簡単にレスポンシブ対応できることがわかりましたので備忘も兼ねてメモしておきます。Developers(開発者向けFacebook)のページプラグイン生成ページでデザインに合わせた幅や高さなどを設定します。containerの幅に合わせる」のチェックボックスに必ずチェックを入れます。設定ができたら、プレビューの下にある「コードを取得」をクリックします。生成されたコードがモーダル画面に表示されますので、ステップ2のコードをHTMLファイルに配置します。ステップ3のコードは以下のようになります。以下のコードの内「data-adapt-container-width=”true”」の部分がレスポンシブ対応にするためのコードです。このコードを触る必要はありませんので、そのままプラグインを表示させたい場所(HTML)にコピー&ペーストしてください。以上でOK!だとありがたいのですが、ここから少しHTMLとCSSの調整をする必要があります。HTML生成されたステップ3のコードをdiv要素などで囲んでください。class名は任意のものでOKです。--></div>CSS例えば、スマホは画面幅に合わせて、PCはページプラグインの最大幅500pxで表示させる場合は、以下のように指定します。スマホの表示領域が500pxを越えても、ページプラグインの仕様上500pxまでしか広がりませんので注意してください。500px」は不要かもしれませんが、念のため。500px;}}注意点180px〜500pxの幅制限以外にも、ページプラグインを利用する上で留意しておきたい点がいくつかあります。containerの幅に合わせる」オプションは、いわゆるレスポンシブといわれてイメージするようにブラウザの幅に応じて随時幅を調整してくれるわけではありません。公式の説明にも「プラグインのwidthはページの読み込み時に決定されます」とあり、スマホの画面を回転させた場合(landscape)やPCでブラウザの幅を狭くしていった際に追従してくれるわけではありません。containerの幅に合わせる」という項目名が表していますが、合わせてくれるのは「幅」のみです。高さはコード生成の際に入力した値となります。PCとスマホで高さを変えたい、というのはCSSだけでは難しいようです。まとめ現時点では自前でJavaScriptを用意しないと幅が変わった場合(スマホで画面を回転させた場合など)の対応ができませんが、デフォルトで幅を再取得して調整をしてくれるなど、もう少しフレキシブルになってくれることに期待したいところです。designが運営しています。JavaScriptに関するメモ、デザインの過程で思ったことなどを書き留めています。