Facebookページプラグインのレスポンシブ対応で表示されない場合

以前にFacebookのページプラグインをレスポンシブに対応する方法の記事を書きましたが、画面幅によって表示されない現象に遭遇したので対応方法をメモ。

サンプルコード

実装方法に関しては以前の記事を参考いただければと思います。
今回はサイドバーにページプラグインを設置する想定で実装してみます。

HTML

<div class="contents">
	<div class="main">
	</div>
	<div class="sub">
		<div class="facebook-wrapper"></div>
	</div>
</div>

.facebook-wrapperの部分にページプラグインが表示されます。
次にCSSの設定ですが、レスポンシブ対応のため.subの幅はパーセント値にします。

CSS

.contents {
	max-width: 1000px;
	margin: auto;
}
.main {
	float: left;
	width: 60%;
}
.sub {
	float:right;
	width: 37%;
}

.facebook-wrapper > .fb-page {
	width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
	width: 100% !important;
}

最後にJavaScriptで.facebook-wrapperにページプラグインを埋め込む処理を記述します。

JavaScript

$(function() {
	// ページプラグインの埋め込みコードを返す。
	function pagePluginCode(w) {
		return '<div class="fb-page" data-href="https://www.facebook.com/frst.joqr" data-tabs="timeline" data-width="' + w + '" data-height="300" 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);
	});
});

1000px以上の時は問題ないのですが、画面幅をコンテンツより小さくするとページプラグインが表示されなくなります。
うまく表示されない場合のデモページ

いろいろ試してみたところ、ページプラグインで設定するdata-widthの値に小数点が含まれるとうまく表示されなくなるようでした。
現状はパーセントで指定している.subの幅をそのまま使っているため、画面幅によっては値に小数点が含まれて表示されなくなるようです。

対応として、小数点を切り捨てた値を使用すると表示されるようになりました。

JavaScript

$(function() {
	// ページプラグインの埋め込みコードを返す。
	function pagePluginCode(w) {
		return '<div class="fb-page" data-href="https://www.facebook.com/frst.joqr" data-tabs="timeline" data-width="' + w + '" data-height="300" 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 = Math.floor(facebookWrap.width()); // 変更後の幅を取得
			// 前回の幅から変更があった場合のみ処理
			// スマホだとスクロール時にリサイズが発生することがあるため
			if(fbWidth != fbBeforeWidth) {
				facebookWrap.html(pagePluginCode(fbWidth)); // ページプラグインのコード変更
				window.FB.XFBML.parse(); // ページプラグインの再読み込み
				fbBeforeWidth = fbWidth; // 今回変更分を保存しておく
			}
		}, 200);
	});
});

変更後のデモページ