facebookのページプラグインをレスポンシブで埋め込む方法

Web制作

facebookのページプラグインをレスポンシブで埋め込む方法

2018年11月17日 8:00　

facebookのページプラグインをレスポンシブで埋め込む方法

おはようございます！社員Aです👩

今回はWEB制作されている方ならよく使っているであろうFacebookのページプラグインをレスポンシブで埋め込む方法についてご紹介します。

ページプラグインの導入は簡単にできるのですが、レスポンシブ対応で横幅がはみ出てしまったり、スマートフォン時の対応に苦戦することが多いので、簡単にレスポンシブ対応できる方法をまとめました。

埋め込みコードの取得
ソースコードを加工してサイトに貼り付ける
CSSを追記する
JSを追記する
まとめ

埋め込みコードの取得

まずは、facebook for developersからFacebookページプラグインを生成します。

開発者向けFacebook

ページプラグイン - ソ&#...

https://developers.facebook.com/docs/plugins/page-plugin

FacebookページのURL
タブ
幅
高さ
その他オプション（スモールヘッダーなど）

を設定し、最下部の「ソースを取得」ボタンをクリックすることでソースを取得できます。

ソースコードを加工してサイトに貼り付ける

STEP2とSTEP3でそれぞれコードが生成されていますが、STEP2のJavaScript SDKはbody開始タグ直下に記述します。

STEP3のソースコードは、Facebookの埋め込みを表示したい場所に設置しますがこの時の貼り付け方が重要になります。

<!-- 通常の貼り付け方（そのままコピペした場合) -->
<div class="fb-page" data-href="https://www.facebook.com/universe.fukuoka.hakata/" data-tabs="timeline" data-width="500" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/universe.fukuoka.hakata/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/universe.fukuoka.hakata/">株式会社ユニバース</a></blockquote></div>

<!-- 今回の貼り付け方 -->
'<div class="fb-page" data-href="https://www.facebook.com/universe.fukuoka.hakata/" data-tabs="timeline" data-width="' + w + '" data-height="' + h + '" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/universe.fukuoka.hakata/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/universe.fukuoka.hakata/">株式会社ユニバース</a></blockquote></div>'

通常であれば生成されたソースコードをそのままサイトに貼り付けるかと思いますが、今回は上記のように貼り付けます。

公式のソースから変更した点は下記です。

全体をシングルクォーテーション（ ‘ ）で囲む
data-width部分を「data-width=”‘ + w + ‘”」に変更
data-height部分を「data-height=”‘ + h + ‘”」に変更

上記の貼り付けが終わったら、下記も一緒に貼り付けます。

<div class="facebook-wrapper"></div>

CSSを追記する

サイトにソースコードを貼り終わったあとは、CSSを追記します。

.facebook-wrapper {
    max-width: 500px;
    margin: 0 auto;
}
.facebook-wrapper > .fb-page {
    width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}

JSを追記する

下記JSも追記します。

10行目の return〜の部分に先程加工したソースコードを貼り付けます。

これにより、ソースコードで改変した「data-width=”‘ + w + ‘”」や「data-height=”‘ + h + ‘”」をデバイス幅に応じて自動で変更してくれるため、レスポンシブの対応が出来るという仕組みになります。

$(function() {
    // ページプラグインの埋め込みコードを返す。
    function pagePluginCode(w) {
        // 幅に応じて高さを変更する場合
        if(w > 400) {
            var h = 300;
        } else {
            var h = 200;
        }
        return '<div class="fb-page" data-href="https://www.facebook.com/universe.fukuoka.hakata/" data-tabs="timeline" data-width="' + w + '" data-height="' + h + '" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/universe.fukuoka.hakata/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/universe.fukuoka.hakata/">株式会社ユニバース</a></blockquote></div>';
    }
 
    // ページプラグインを追加する要素
    var facebookWrap = $('.facebook-wrapper');
    var fbBeforeWidth = ''; // 前回変更したときの幅
    var fbWidth = facebookWrap.width(); // 今回変更する幅
    var fbTimer = false;
    $(window).on('load resize', function() {
        if (fbTimer !== false) {
            clearTimeout(fbTimer);
        }
        fbTimer = setTimeout(function() {
            fbWidth = facebookWrap.width(); // 変更後の幅を取得
            // 前回の幅から変更があった場合のみ処理
            // スマホだとスクロール時にリサイズが発生することがあるため
            if(fbWidth != fbBeforeWidth) {
                facebookWrap.html(pagePluginCode(fbWidth)); // ページプラグインのコード変更
                window.FB.XFBML.parse(); // ページプラグインの再読み込み
                fbBeforeWidth = fbWidth; // 今回変更分を保存しておく
            }
        }, 200);
    });
});