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

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

10件のコメント

  1. Tommy より:

    いつも参考にさせていただいております。
    複数のFBを埋め込みたいのですが、
    2023年現在は、SDKがv18になっていて、こちらに記載の方法だとうまく表示してくれません。
    v18の表示方法をご存知でしたら教え頂けましたら幸いです。

    • cly7796.net より:

      Tommyさん
      コメントありがとうございます。
      複数埋め込みのサンプルでSDKをv18.0に変更してみましたが、表示されていそうでした。
      https://cly7796.net/blog/sample/the-corresponding-embedding-of-facebook-to-responsive/index3.html

      • Tommy より:

        お返事が遅れてすみません。
        新Verのjsとcss,htmlを完コピしたら複数表示出来ました!
        jsの記述ミスだったみたいで、初歩的なミスでした・・・。
        新Verは少しjsやhtmlの記述が変更されているようなのですが、これからもFBのverが変更するたびにjsも変更していかなきゃならないんでしょうか??
        ともかく、今のところはうまく表示できています。
        感謝しかありません。
        本当にありがとうございますm(_ _)m

  2. 通りすがり より:

    Facebookめ…poorな実装をしやがって…
    大変助かりました。ありがとうございます。

  3. t-hatta より:

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

  4. colt 1911 より:

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

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

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

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

    • cly7796.net より:

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

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031