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>
■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読み込み用スクリプト
javascript
(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'));
ウインドウリサイズ用スクリプト
javascript
//////////////////////////////////////////////
//
// 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
css
/* ######################################################################################
facebook埋め込み：レスポンシブ対応
###################################################################################### */
.fb-page {
display:block !important;
width:100%;
max-width:500px;
margin-left:auto;
margin-right:auto;
height:600px;
}
