facebookの埋め込み　レスポンシブ対応

facebookのタイムライン埋め込みは、読み込み時にサイズが決まってしまうので、リアルタイムのウインドウサイズ変更には対応していません。
ウインドウリサイズ後にリロードするようにして、ウインドウサイズの可変に対応しました。

まずは【デモ】
リセットCSS「base.css」はこちら。

Source

<div
class="fb-page"
data-href="https://www.facebook.com/imdb"
data-width="500"
data-height="600"
data-tabs="timeline,events"
data-hide-cover="false"
data-show-facepile="true"
data-small-header="false"
data-adapt-container-width="true"
>
</div>

<div

class="fb-page"

data-href="https://www.facebook.com/imdb"

data-width="500"

data-height="600"

data-tabs="timeline,events"

data-hide-cover="false"

data-show-facepile="true"

data-small-header="false"

data-adapt-container-width="true"

</div>

■facebook埋め込み用class ※変更不可
　class=”fb-page”

■facebookページのURL
　data-href=””

■表示幅（180～500）　※[DF]340
　data-width=”340″

■表示高（70～）　※[DF]500
　data-height=”500″

■表示内容(timeline,events,messagesなど　カンマ区切りで複数可）　※[DF]timeline
　data-tabs=”timeline”

■カバー写真非表示　※[DF]false
　data-hide-cover=”false”

■[いいね]している友達のPF写真表示　※[DF]true
　data-show-facepile=”true”

■カスタムのアクションボタン非表示　※[DF]false
　data-hide-cta=”false”

■小さなヘッダーの使用　※[DF]false
　data-small-header=”false”

■表示枠への幅フィット　※[DF]true
　data-adapt-container-width=”true”

facebook読み込み用スクリプト

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.11';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.11';

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

ウインドウリサイズ用スクリプト

    //////////////////////////////////////////////
    //
    //   facebook 埋め込み：レスポンシブ対応
    //
    //////////////////////////////////////////////
    if ($('.fb-page').length) {

        // iframeリロードの[ON/OFF]を切り替えるウィンドウサイズ。
        var reloadWidth = 768;

        $(function(){
            // まずウインドウの横幅を変数に入れる
            var timer = false;
            var winWidth = $(window).width();
            var winWidth_resized;
        
            // ウインドウのリサイズイベントに処理をバインド
            $(window).on("resize", function(){
                // リサイズ後の放置時間が指定ミリ秒以下なら何もしない(リサイズ中に何度も処理が行われるのを防ぐ)
                if (timer !== false) {
                    clearTimeout(timer);
                }
                // 放置時間が指定ミリ秒以上なので処理を実行
                timer = setTimeout(function() {
                // リサイズ後のウインドウの横幅を取得
                winWidth_resized = $(window).width();
        
                // リサイズ前のウインドウ幅とリサイズ後のウインドウ幅が異なる場合
                if ( winWidth != winWidth_resized ) {

                var windowWidth = parseInt($(window).width());
                if(windowWidth >= reloadWidth) {
                    // 画面サイズ大のとき
                    //location.reload();
                } else {
                    // 画面サイズ小のとき
                    location.reload();
                }
                console.log("ウインドウ横幅のリサイズ");
                console.log("現在の横幅: ", winWidth);
                console.log("リサイズ後の横幅: ", winWidth_resized);
        
                // 次回以降使えるようにリサイズ後の幅をウインドウ幅に設定する
                winWidth = $(window).width();
                    }
                }, 200);
            });
        });
    }

//////////////////////////////////////////////

// facebook 埋め込み：レスポンシブ対応

//////////////////////////////////////////////

if ($('.fb-page').length) {

// iframeリロードの[ON/OFF]を切り替えるウィンドウサイズ。

var reloadWidth = 768;

$(function(){

// まずウインドウの横幅を変数に入れる

var timer = false;

var winWidth = $(window).width();

var winWidth_resized;

// ウインドウのリサイズイベントに処理をバインド

$(window).on("resize", function(){

// リサイズ後の放置時間が指定ミリ秒以下なら何もしない(リサイズ中に何度も処理が行われるのを防ぐ)

if (timer !== false) {

clearTimeout(timer);

}

// 放置時間が指定ミリ秒以上なので処理を実行

timer = setTimeout(function() {

// リサイズ後のウインドウの横幅を取得

winWidth_resized = $(window).width();

// リサイズ前のウインドウ幅とリサイズ後のウインドウ幅が異なる場合

if ( winWidth != winWidth_resized ) {

var windowWidth = parseInt($(window).width());

if(windowWidth >= reloadWidth) {

// 画面サイズ大のとき

//location.reload();

} else {

// 画面サイズ小のとき

location.reload();

}

console.log("ウインドウ横幅のリサイズ");

console.log("現在の横幅: ", winWidth);

console.log("リサイズ後の横幅: ", winWidth_resized);

// 次回以降使えるようにリサイズ後の幅をウインドウ幅に設定する

winWidth = $(window).width();

}

}, 200);

});

}

ウインドウリサイズ対応CSS

/* ######################################################################################

　facebook埋め込み：レスポンシブ対応

###################################################################################### */
.fb-page {
    display:block !important;
    width:100%;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
    height:600px;
}

/* ######################################################################################

　facebook埋め込み：レスポンシブ対応

###################################################################################### */

.fb-page {

display:block !important;

width:100%;

max-width:500px;

margin-left:auto;

margin-right:auto;

height:600px;

}

Source

Share this:

Like this: