facebookウィジェットのiframeをレスポンシブにする

facebookウィジェットをサイトに埋め込んでいる人は結構多いのではないでしょうか？

facebookウィジェットを埋め込む際に困るのが微妙にレスポンシブ対応してくれていないことです。PCとスマホで横幅が変わる場合は、大きすぎたり小さすぎたり、結構微妙です。

公式ページには画面サイズの違いに追従する対策が載っているのですが、残念なことにその説明はiframeじゃないウィジットを使ったときの説明しかありません。

ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - Meta for Developers

この記事では、facebookウィジェットをiframeで埋め込んだ時にレスポンシブ対応させる方法についてまとめています。

この記事で分かること

facebookウィジェットを画面サイズに追従させるには？
facebookウィジェットのiframeをレスポンシブにするjQuery
Javascript SDKの方がレスポンシブ対応は簡単だし、将来性もある
まとめ

facebookウィジェットを画面サイズに追従させるには？

iframeのウィジットはwidth指定で表示幅が決まります。

<iframe id="fbiframe" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F{ページ名}%2F&tabs=timeline&width=400&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="400" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

つまり、レスポンシブ対応させるには、画面サイズに合わせてwidthを書き換える必要があり、なおかつ書き換えた後にリロードしないといけません。

つまり、何らかのjavascriptが必要になります。

facebookウィジェットのiframeをレスポンシブにするjQuery

検索すると、iframeバージョンでレスポンシブ対応するスクリプトを公開されている人がいたのでご紹介します。

正しい検索キーワードがわかれば、正しい検索結果が得られるという時代の到来はとてもありがたい、捗ります。

<iframe id="fbiframe" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F{ページ名}%2F&tabs=timeline&width=400&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="400" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

<script>
jQuery(function($){
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 = $("#side").width();//親要素のID,class要変更
 
        var src = "https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F{ページ名}%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>

参考： http://proclass.jp/blog/?p=2998

Javascript SDKの方がレスポンシブ対応は簡単だし、将来性もある

iframeタグを使う方法は古い方法です。

iframeにこだわる必要が無ければ、もう一つの公式の方法を使うと、レスポンシブは簡単に実現できます。

もう一つの方法は、javascript sdkを使う方法です。

ちょっとわかりくい感じがしますがiframeでもレスポンシブ対応する場合は、javascript使うので、どうせ使うなら、javascript SDKの方が将来性は高いです。

bodyタグ直後にタグを追加

最近のまともなテーマを使っている場合は、header.phpをいじる必要はありません。

wp_body_openアクションフックで対応できます。

add_action( 'wp_body_open', function() {
	?>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0&appId=xxxxxxxxxxxxx"></script>	<?php
});

表示したい箇所に以下のコードを追加

従来、iframeを置いていた場所に、以下のコードを置きます。

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="" data-height="" 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>