Facebookのページプラグインをレスポンシブに対応する

Facebookのページプラグインを埋め込むときに、レスポンシブに対応する方法を調べたのでメモしておきます。

埋め込みコードの取得

Facebookのページプラグインのページからコードを取得します。

各項目を設定して、コードを取得ボタンをクリック。
幅と高さに関しては後ほど変更するのでなんでもかまいません。

コードが作成できました。

step2の開始のbodyタグ直後に追加するコードは通常通り追加して、step3のFacebookを埋め込む場所に追加するコードは以下のように書き換えます。

// 変更前
<div class="fb-page" data-href="https://www.facebook.com/frst.joqr" data-tabs="timeline" data-width="400" data-height="200" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/frst.joqr"><a href="https://www.facebook.com/frst.joqr">早見沙織のふり～すたいる</a></blockquote></div></div>

// 変更後
'<div class="fb-page" data-href="https://www.facebook.com/frst.joqr" data-tabs="timeline" data-width="' + w + '" data-height="' + h + '" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/frst.joqr"><a href="https://www.facebook.com/frst.joqr">早見沙織のふり～すたいる</a></blockquote></div></div>'

「‘」でコード全体を括って、data-width=”400″ data-height=”200″ となっている部分を data-width=”‘ + w + ‘” data-height=”‘ + h + ‘” と変更しました。
このコードはHTMLに直接埋め込まず、JavaScriptから埋め込み・変更を行うようにします。
　

サンプルコード

実際にページに埋め込んでみます。

HTML

<div class="facebook-wrapper"></div>

CSS

通常だと幅が固定になってしまうので、親要素の.facebook-wrapperに最大幅を指定して、中身にはwidth: 100%;を指定します。

.facebook-wrapper {
	max-width: 500px;
	margin: 0 auto;
}
.facebook-wrapper > .fb-page {
	width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
	width: 100% !important;
}

ページ読み込み時とリサイズ時に、幅と高さを書き換えたコードに差し替えて再読み込みを行わせています。
先ほどのdata-widthとdata-heightを書き換えたコードは 10行目に追加してください。

JavaScript

$(function() {
	// ページプラグインの埋め込みコードを返す。
	function pagePluginCode(w) {
		// 幅に応じて高さを変更する場合
		if(w > 400) {
			var h = 300;
		} else {
			var h = 200;
		}
		return '<div class="fb-page" data-href="https://www.facebook.com/frst.joqr" data-tabs="timeline" data-width="' + w + '" data-height="' + h + '" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/frst.joqr"><a href="https://www.facebook.com/frst.joqr">早見沙織のふり～すたいる</a></blockquote></div></div>';
	}

	// ページプラグインを追加する要素
	var facebookWrap = $('.facebook-wrapper');
	var fbBeforeWidth = ''; // 前回変更したときの幅
	var fbWidth = facebookWrap.width(); // 今回変更する幅
	var fbTimer = false;
	$(window).on('load resize', function() {
		if (fbTimer !== false) {
			clearTimeout(fbTimer);
		}
		fbTimer = setTimeout(function() {
			fbWidth = facebookWrap.width(); // 変更後の幅を取得
			// 前回の幅から変更があった場合のみ処理
			// スマホだとスクロール時にリサイズが発生することがあるため
			if(fbWidth != fbBeforeWidth) {
				facebookWrap.html(pagePluginCode(fbWidth)); // ページプラグインのコード変更
				window.FB.XFBML.parse(); // ページプラグインの再読み込み
				fbBeforeWidth = fbWidth; // 今回変更分を保存しておく
			}
		}, 200);
    });
});

Facebook埋め込みのレスポンシブ対応のデモページ
ちなみに500px以上には広がらないようなので注意してください。

2018.04.14追記
data-widthの値に小数点が含まれていると表示されない場合があるようです。
うまく表示されない場合は以下記事を参照ください。
Facebookページプラグインのレスポンシブ対応で表示されない場合
　

複数埋め込む場合 (2019.08.03追記)

コメントで質問をいただいたので、上記サンプルを修正して複数を埋め込む方法を試してみます。
HTMLは埋め込む要素に.facebook-wrapperを付けるのはそのままですが、合わせてdata属性で埋め込むページURLとタイトルを設定するようにします。

HTML

<div class="facebook-wrapper" data-fburl="https://www.facebook.com/frst.joqr" data-fbttl="早見沙織のふり～すたいる"></div>
<div class="facebook-wrapper" data-fburl="https://www.facebook.com/HatsuneMikuOfficialPage/" data-fbttl="Hatsune Miku"></div>

data-fburlにページURL、data-fbttlにタイトルを指定してください。
CSSは前のサンプルから変更ありません。

最後にJavaScriptですが、前のサンプルでは埋め込むコードをJavaScript内にベタ書きしていましたが、今回はHTMLで設定したページURLとタイトルを使って埋め込むコードを生成するようにします。

JavaScript

$(function() {
	// ページプラグインの埋め込みコードを返す
	function pagePluginCode(w, url, ttl) {
		// 幅に応じて高さを変更する場合
		if(w > 400) {
			var h = 300;
		} else {
			var h = 200;
		}
		return '<div class="fb-page" data-href="' + url + '" data-tabs="timeline" data-width="' + w + '" data-height="' + h + '" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="' + url + '"><a href="' + url + '">' + ttl + '</a></blockquote></div></div>';
	}

	// ページプラグインを追加する要素
	var facebookWrap = $('.facebook-wrapper');
	var fbTimer = false;
	var fbBeforeWidth = []; // 前回変更したときの幅
	var fbWidth = [];// 今回変更する幅
	for (var i = 0; i < facebookWrap.length; i++) {
		fbBeforeWidth[i] = '';
		fbWidth[i] = facebookWrap.eq(i).width();
	}
	$(window).on('load resize', function() {
		if (fbTimer !== false) {
			clearTimeout(fbTimer);
		}
		fbTimer = setTimeout(function() {
			for (var i = 0; i < facebookWrap.length; i++) {
				fbWidth[i] = facebookWrap.eq(i).width(); // 変更後の幅を取得
				// 前回の幅から変更があった場合のみ処理
				// スマホだとスクロール時にリサイズが発生することがあるため
				if(fbWidth[i] != fbBeforeWidth[i]) {
					var thisUrl = facebookWrap.eq(i).data('fburl');
					var thisTtl = facebookWrap.eq(i).data('fbttl');
					facebookWrap.eq(i).html(pagePluginCode(fbWidth[i], thisUrl, thisTtl)); // ページプラグインのコード変更
					window.FB.XFBML.parse(); // ページプラグインの再読み込み
					fbBeforeWidth[i] = fbWidth[i]; // 今回変更分を保存しておく
				}
			}
		}, 200);
    });
});

3～11行目の埋め込みコードを返す関数は、引数に指定したページURLとタイトルを使って埋め込みコードを生成するように変更しています。
ページ読み込み時とリサイズ時にコードを差し替える処理も基本的には前のサンプルと同じ流れで、27行目のfor文で埋め込みを行う数だけループさせています。
HTMLで設定したページURLやタイトルは32,33行目で指定して、34行目の関数の引数に指定して使用しています。
複数埋め込み対応のデモページ
　

【参考サイト】

• page plugin（facebook埋め込み）をレスポンシブ対応する | WordPressの勉強がてら
• Facebook の Page Plugin をレスポンシブ対応させる
• ページプラグイン – ソーシャルプラグイン