お問い合わせはコチラから

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

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

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

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

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

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>

注意点

親要素のサイズに自動的に調整してくれるので、ウィジェットのサイズはwidth:500とかにしておけば、大丈夫です。小さめにしているとスマホで幅が足りなくなります。

動作確認は、実際にブラウザの幅を小さくしないと上手く反応しなかったです。検証ツールで画面サイズを変えた後にリロードしてもレスポンシブ対応しませんでした。

まとめ

Facebookのウィジットは個人的には意味あるの?と常々思っておりますが、埋め込みたい人が後を絶ちません。サイドバーにFacabookウィジットを配置すると、PCとスマホで幅が変わりますのでその影響でサイズが変になってしまう場合、今回のスクリプトは役に立つのではないかと思います。

タイトルとURLをコピーしました