BETA

facebookの埋め込みをリサイズの度に幅調整するようにしたら、Edgeの表示がおかしかった件

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

facebookの埋め込みをリサイズの度に幅調整するでfacebook埋め込みの幅を調整するスクリプトを書きましたが、テストを繰り返す中で「Edgeで表示すると初回表示時に正しく表示されない」という現象を確認しました。

F12で開発者ツールを開くことも含めてresizeイベントが走れば表示されるのですが、最初の表示で出てこないのはまずかろう、と。

また、詳しい条件は不明ですがスクロール量に応じて下からフェードインしてくるアニメーションと組み合わせると、PC幅の場合だけresizeイベント後も含めて描画がされない、という現象にも遭遇しました。

後者は結局原因が分からず断念しましたが、前者に関してはJSに後述のような改修を実施して乗り切りました。

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

//facebookをリサイズする度に幅を調整  
function facebookResize() {  
    var $fbWrapper = $("#fbWrapper");  
    //連想配列の形にして、ミュータブルな引数とする  
    var fbArray = {  
        timer: false,  
        fbBeforeWidth: 0,  
        fbWidth: $fbWrapper.width()  
    };  
    fbResizeProcess(fbArray, $fbWrapper);  
    $(window).on("resize", function() {  
        fbResizeProcess(fbArray, $fbWrapper);  
    });  
}  

//facebook埋め込みメイン処理  
function fbResizeProcess(fbArray, $fbWrapper) {  
    if(fbArray.timer !== false) {  
        clearTimeout(fbArray.timer);  
    }  
    fbArray.timer = setTimeout(function() {  
        fbArray.fbWidth = $fbWrapper.width();  
        if(fbArray.fbWidth !== fbArray.fbBeforeWidth) {  
            $fbWrapper.html(fbCodeGen(fbArray.fbWidth));  
            window.FB.XFBML.parse();  
            fbArray.fbBeforeWidth = fbArray.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>';  
}  

しかしまあ、今回いくつかのサンプルを作ってみた結果嵌まるときは嵌まる感がしたので、下手に多用はしない方が良さそうな気がしてきました……。

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

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

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

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