BETA

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

投稿日:2019-06-26
最終更新:2019-06-26
※この記事は外部サイト(https://labor.ewigleere.net/2019/06/26/fac...)からのクロス投稿です

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カラムになった際に、リサイズで再描画が走ると一時的に高さが失われてしまい、下のコンテンツが上下してしまうのを防ぐために書いておきました。


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

参考

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!