Facebookのウィジェットの幅をレスポンシブにする方法（iFrameの場合）

2019/3/18 JavaScript/CSS




プロクラスの森です。
この間、ページにFacebookウィジェットを設置する機会があったのですが、その際ウィジェットの横幅をページ幅に合わせて変更する方法について少し調べたのでメモです。

ウィジェットを設置するにはFacebook公式ページからコードを取得し貼り付けるのですが、そのままだとスマホを横向けた時などに横幅が動的に変わってくれません。

なのでウィンドウリサイズ時に横幅を合わせてリロードするようにしてみました。
ウィジェットの設置用コードはSDKとiFrameの2種類があるけど、iFrameの場合です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<iframe id="fbiframe" src="" width="" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<script>
var first_width = $(window).width();

var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        //resize完了時の動作
        var width = $(window).width();
        if(width!=first_width){

            console.log('resized');
            fbiframe_reload();
            first_width=width;
        }
    }, 200);
});




function fbiframe_reload(){//facebookウィジェットの再描画

		var width = $(window).width();

        var src = "https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FPROCLASSpage%2F&tabs=timeline&width="+width+"&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId"

        $("#fbiframe").attr("src","");       
		$("#fbiframe").attr("src",src);	

        $("#fbiframe").attr("width",width); 
};

fbiframe_reload();
</script>

500px以上に広がらないのは元々の仕様みたいです。 （ウィジェット側の横幅制限が～500pxらしいです） 

resizeの取得や、jQueryを使ったiframeのリロードは下記を参考にしました。
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する
jQueryだけでiframeを再読み込み(reload)させる方法とプレーンなjavascriptを使った方法
あとiPhoneだとアドレスバーが出た時にもウィンドウの縦幅が変わってresizeイベントが走ってしまうので、横幅のみに限定するif文を（ざっくりですが）追加しました。

色んな人の記事を見るところ、SDK式もiframe式も同じように、ウィンドウリサイズのタイミングで再描画してやらないといけないっぽいです。
SDK式の場合は下記が参考になりそうです。
Facebookのページプラグインをレスポンシブに対応する

リロードなしのサイズ追従に挑戦してる記事もあったのですが、すごく難しそうでした。