wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

FacebookコメントをレスポンシブWebデザインに対応する方法

ちょっとググってみたら、どうやら以下のCSSスタイルを適用すればOKっぽいです。CSSファイルに記述しておけばバッチリですね。

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

最大化した時のコンテンツエリアは730ピクセルいっぱいになり
image

ウィンドウ幅を小さくするとこのようになります。
image

ちなみに、Facebookページの「いいね!」ボックスのプラグインをレスポンシブWebデザインに対応するには、以下のコードを追加します。

div.fb_iframe_widget, 
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 100% !important;
}

2015/02/03 追記

しかし、あれから仕様が変わったので、最新記事をリンクしておきますね。


FacebookコメントプラグインをレスポンシブWebデザインに対応し直す方法 - wanichanの日記