最初、これ分からなくて困っていたのでメモしておきます。
いまどきはデフォルトでレスポンシブくらい対応してほしいもんですが。。。
1: FacebookでLike Boxを作成
これがないと始まらないので、まずはFacebookでLike Boxを作成します。
そのときの設定は以下のようにしました。
私の場合はコンテンツボックスに入れちゃうのでBorderはいりません。
2: コードを取得
コードを取得するときは「HTML5」を選択しました。
3: コードを配置
Bodyタグのすぐ下と、
コメントの下にLike Boxを表示させたいので、
「comments.php」の以下の部分にコードを入れました。
4: CSSの設定
このままだとレスポンシブ対応になっていないので、
「style.css」に以下を追記しました。
これでレスポンシブ対応になります。
.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span {
width: 100% !important;
}
ただ、画像がレスポンシブ対応になっていないんですよね〜。
今度調べてうまく適用できるようにしないと。
これで少しだけブログの整備が進みました♪
▼参考にさせていただきました。
Like Boxを可変に対応させたい | Tips Note
