Facebookのページプラグインをレスポンシブ対応させる方法

マーケティング

facebookイメージ

「LikeBox」から名称が変更した「ページプラグイン」。

「plugin containerの幅に合わせる」にチェックを入れることで、親要素の幅に合わせてきれいに収まってくれるのですが、じつはリロードしないと幅が変更しません。つまり、いわゆるレスポンシブではないのです。

PC、スマホ、別々で閲覧するには問題ないのですが、クライアントの要望によっては、どうしてもレスポンシブにしたいということもあるかと思います。そこで今回はレスポンシブ対応させる方法をご紹介します。

こちらのサイトを参考にさせていただきました。

参考サイト:Facebookのページプラグインをレスポンシブに対応する

埋め込みコードの取得

まずは「facebook for developers」ページから埋め込みコードを取得します。

「facebook for developers」ページはこちら

developersページ

表示方法など必要事項を記入して「コードを取得」ボタンをクリックするとモーダルでコードが表示されます。

ページプラグインコード

JavaScript SDKは通常のようにbody開始タグ直下に記述します。

ステップ3のhtmlへの埋め込みコードは、後ほど記述するjsで書き出すため、下記のように書き換えます。※”で囲っているのはjsに書き込むからです。幅と高さをウィンドウ幅が変更されたタイミングで書き換えるので、幅をw、高さをh、と変数にしておきます。

htmlには、ページプラグインを表示する箇所に、下記タグを記述してください。

CSSを記述する

下記のCSSを追加してください。

※ページプラグインは500px以上は広がらないため、最大500pxに設定しています。

Javascriptを記述する

上記で書き換えたコードを下記コードで書き出します。

こちらのサイトを参考にさせていただきました。

参考サイト:Facebookのページプラグインをレスポンシブに対応する

会場探しに困ったら…スペースコンシェルジュ eichiiiエイチ

最新記事