Facebookコメント欄をレスポンシブに対応する方法
2014年10月30日 16:44


当ブログにも設置しているFacebookコメント欄ですが、ちょっとハマったのでメモ。

当ブログは一応レスポンシブ対応になっているのですが、このFacebookコメントプラグインを設置してPCブラウザやスマホで確認すると、どうもうまくレスポンシブ挙動を示してくれない…。

そこで、
「Facebook コメント レスポンシブ」
「Facebookソーシャルプラグイン レスポンシブ」
「Facebook コメント スマホ 余白」
「fb-comments スマートフォン」
「fb-comments スマホ対応」
などなど色々ググってみたのですが、なかなか良い解決策にたどり着かず。。

でもちょこちょこ出ている情報を組み合わせたりいろいろやってたらなんとなく(たぶん)うまくいったような気がします。
ちゃんと検証してないけど以下の対応でなんかいけるっぽいのでもし良かったら参考にドウゾ。

iphone サファリ

【html】

 
<div class="facebook-comment">
	<Facebookコメントプラグインソース>
</div>

【css】

.facebook-comment {
	width: 100% !important;
}
.fb-comments, 
.fb-comments iframe,
.fb-comments iframe[style],
.fb-comments span,
.fb-comments span[style] {
	width:100% !important; 
}

※もしうまくいってなかったら教えてください…。