サイト制作に関するメモ書き

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

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

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

埋め込みコードの取得

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

the-corresponding-embedding-of-facebook-to-responsive01

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

the-corresponding-embedding-of-facebook-to-responsive02

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

the-corresponding-embedding-of-facebook-to-responsive03

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行目の関数の引数に指定して使用しています。
複数埋め込み対応のデモページ
 

【参考サイト】

 

“Facebookのページプラグインをレスポンシブに対応する” への9件のフィードバック

  1. t-hatta より:

    FBの埋め込みが一つの時はOKですが、二つ以上埋め込みたい場合はどうすれば良いでしょうか?
    別のSDKコードを記載しても二つとも同じFBになってしまいます・・・
    CSSとHTMLは分かりますが、JSは全くなので、複数埋め込みの方法が知りたいです!

  2. […] 参考にさせていただいたサイトです iFrameの場合のレスポンシブ JavaScript SDKの場合のレスポンシブ […]

  3. colt 1911 より:

    ひとまずお礼を・・・ありがとうございます。

    FBのレスポンシブ対応コードを載せた記事は多々あり、通常HTMLやWordPress情報が混在の中、
    ようやくあなた様のブログに出会いました(^^) 感謝です。

    掲載内容通りコード調整したところ上手く動いてくれました。ほんとに感謝感動です。

    戦いの日々が続いて数ヶ月・・・久々に悩まずすっきり眠れそうです・・・
    ありがとうございました!!

    • cly7796.net より:

      colt 1911 さん
      コメントありがとうございます!
      お役に立てたようで何よりです。

  4. […] じように、ウィンドウリサイズのタイミングで再描画してやらんといけないっぽいです。 SDK式の場合は下記が参考になりそうです。 Facebookのページプラグインをレスポンシブに対応する […]

kokomama にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP