facebookの埋め込みをリサイズの度に幅調整する

facebookをWebサイトに埋め込む機会はそこそこあると思うのですが、他のコンテンツと併せて表示する場合に困ったことが。 それは、facebookの埋め込みコードはデフォルトではページロード時のみ描画を行うため、ブラウザ幅を変更(リサイズ)した際に表示サイズが変化しないこと。 レイアウトによっては、他のコンテンツに被ってしまったり、全体のバランスが狂ってしまったり……と頭を抱えることも。 そこで調べてみたところ、jQueryで対処法があるようなのでそれで対処することにしました。

コード

HTML

<div class="fbWrapper" id="fbWrapper"></div>

まずHTMLですが、facebook標準の埋め込みコードはJSで出力するため、class="fb-page"等が付いているdivはごっそり削除してラッパーのdivのみとします。 ※<div id="fb-root"></div>やscriptタグは残しておいてください。

jQuery

$(function() {
    if($('#fbWrapper').length) {
        facebookResize();
    }
});

//facebookをリサイズする度に幅を調整
function facebookResize() {
    var $fbWrapper = $('#fbWrapper');
    var fbBeforeWidth = '';
    var fbWidth = $fbWrapper.width();
    //setTimeOutで負荷軽減
    var timer = false;
    $(window).on('load resize', function() {
        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            fbWidth = $fbWrapper.width();
            if(fbWidth !== fbBeforeWidth) {
                $fbWrapper.html(fbCodeGen(fbWidth));
                window.FB.XFBML.parse();
                fbBeforeWidth = fbWidth;
            }
        }, 300);
    });
}

//facebookのコードを生成
function fbCodeGen(w) {
    var hrefUrl = 'https://www.facebook.com/facebook'
    var name = 'Facebook'

    return '<div class="fb-page" data-href="' + hrefUrl + '" data-tabs="timeline" data-width="' + w + '" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="' + hrefUrl + '" class="fb-xfbml-parse-ignore"><a href="' + hrefUrl + '">' + name + '</a></blockquote></div>';
}

こんな感じです。ポイントは

• ロード時、リサイズ時にfacebook埋め込みコードの出力とページプラグインの再読み込みを実施
  • facebook埋め込みコードの中の幅をwで動的に変動させている
• 負荷軽減のためsetTimeoutを使う

というところでしょうか。おまけとして

• タグURLと名前は使い回しが効くように変数に切り出し

もしておきました。

Scss

.fbWrapper{
    height: 600px; //描画の度に高さが変動してカクつくのを防ぐ
    max-width: 500px;
    margin: 0 auto;
    & > .fb-page {
        width: 100%;
        & > span {
            width: 100% !important;
        }
    }
}
iframe {
    width: 100% !important;
}

Scssはこんな感じで。 height: 600px;はスマホ表示などで1カラムになった際に、リサイズで再描画が走ると一時的に高さが失われてしまい、下のコンテンツが上下してしまうのを防ぐために書いておきました。

---

これでとりあえず目的は達成できました。

参考

• facebookのページプラグインをレスポンシブで埋め込む方法
• facebookの埋め込み　レスポンシブ対応 – 3@TECH BLOG