【HTML/CSS/Javascript】Facebook埋め込み・レスポンシブ対応
FacebookのタイムラインはWebサイトに埋め込むと横幅が読み込み時に固定されます。
そのためレスポンシブ対応させるには、ウィンドウリサイズ後にリロードして可変に対応させる必要があります。
Webサイトに埋め込む時、PC上では画面の半分幅くらいで他のブロックと横に並べて表示させて、スマートフォンでは他のブロックと上下に並べて、横幅100％で表示させる場合が多いと思います。
今回はその場合を想定したサンプルを作成しました。
Facebookの埋め込み レスポンシブ対応
Facebookの埋め込み- HTML
はじめにサンプルページはこちらです >>> サンプルページ
PC上では画面の半分幅くらいで他のブロックと横に並べて表示させるイメージです。
スマートフォンでは他のブロックと上下に並べて、横幅100％で表示させます。
HTMLはこちらです。
<div class="fb-container"> <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-height="450" data-tabs="timeline,events" data-hide-cover="false" data-show-facepile="true" data-small-header="false" data-adapt-container-width="true" > </div> </div><!-- fb-container out -->
data-href=”” に表示させたいfacebookページのURLに入れ替えてください。
data-width=”” は表示幅です。あとでCSSとjavascriptで調整しますが、ここは500にしています。
data-height=”” は表示高。
data-tabs=”” は表示内容(timeline,events,messagesなど カンマ区切りで複数可）
data-hide-cover=”” はカバー写真表示・非表示
data-show-facepile=”” は[いいね]している友達のPF写真表示・非表示
data-hide-cta=”” はカスタムのアクションボタン表示・非表示
data-small-header=”” は小さなヘッダーの使用・不使用
data-adapt-container-width=”” は表示枠への幅フィット、ここはtrueで！
Facebookの埋め込み- javascript 読み込み・レスポンシブ
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 = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
次にレスポンシブに対応させるために、ウィンドウリサイズ時再度横幅を調整するスクリプトを入力します。
Javascript
;jQuery(document).ready(function ($) {
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の埋め込み- CSS
PCでは横幅960pxのコンテナ内の左側に580pxのお知らせ、右側に340px幅のFacebookを表示させます。
スマートフォン（デバイス表示幅768px以下）では横幅100％のコンテナ内に縦にお知らせ、Facebookと共に横幅100％で表示させます。
CSS
.container{
width:960px;
margin:40px auto 0 auto;
}
.home-left{
float:left;
width:580px;
}
.home-right{
float:right;
width:340px;
}
.heading{
border:1px solid #e8e9e9;
background:#f4f6f5;
line-height:60px;
letter-spacing: .2em;
font-size:30px;
font-weight:bold;
color:#0852a0;
padding-left:20px;
margin-bottom:40px;
}
.news-container{
position:relative;
width:580px;
height:277px;
overflow:hidden;
margin:0 auto;
}
.news-container .news{
line-height:2;
}
.news li{
border-bottom:1px solid #e5e5e5;
padding-bottom: 20px;
margin-bottom:20px;
}
.news li span{
display:block;
font-weight:bold;
color:#0852a0;
}
a {color:#333;
text-decoration: none;}
.fb-container{
float:right;
width:340px;
}
@media screen and (max-width:768px){
.container{
width:100%;
margin:0;
padding:20px;
}
.home-left{
float:none;
width:100%;
margin-bottom:20px;
}
.news-container{
width:100%;
}
.home-right{
float:none;
width:100%;
margin-bottom:20px;
}
.fb-container{
float:none;
width:100%;
margin-bottom:20px;
background:#ccc;
}
.fb-page{
display:block !important;
width:100%;
max-width:500px;
margin-left:auto;
margin-right:auto;
height:450px;
}
}
サンプルページはこちらです >>> サンプルページ
FacebookはYouTubeと同じように、枠に100％とCSSで指定しただけでは画像のように可変してくれません。
Javascriptでウィンドウリサイズ後に再度表示させるひと手間が必要です。
（関連記事）YouTubeの埋め込みについて
yuri-lifestyle.com
