Site icon Tips Note by TAM

FacebookのPage Pluginをリサイズに対応させる

moriya

ブラウザ幅を変更した時に動的にPage Pluginを再読み込みさせる方法を紹介します。

通常の埋め込み方の紹介は省略します。公式ドキュメントを見てください。

css

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}

html

取得してきたコードを#pagepluginの中に入れる。

<div id="pageplugin">
    <!-- 取得してきたコード -->
    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>
    <!-- 取得してきたコード -->
</div>

jquery

処理は下記の通りです。
・リサイズ完了後、0.5秒後に読み込み。
・リサイズ後にリサイズ処理前後の幅を比較して、変更があったら、再読み込み。
・最大幅が500pxなので500px以上の画面幅の時は処理は発生させない。

$(function () {
    var windowWidth = $(window).width();
    var htmlStr = $('#pageplugin').html();
    var timer = null;
    $(window).on('resize',function() {
        var resizedWidth = $(window).width();
        if(windowWidth != resizedWidth && resizedWidth < 500) {
            clearTimeout(timer);
            timer = setTimeout(function() {
                $('#pageplugin').html(htmlStr);
                window.FB.XFBML.parse();
　　　　　　　　　　　//window.FB.XFBML.parse()で再レンダリングします。
                var windowWidth = $(window).width();
            }, 500);
        }
    });
});

以上

デモページ

https://tipsnote.github.io/fb-page-plugin/

参考URL