WordPress

FacebookのLike Boxをレスポンシブ対応させる方法

最初、これ分からなくて困っていたのでメモしておきます。
いまどきはデフォルトでレスポンシブくらい対応してほしいもんですが。。。

1: FacebookでLike Boxを作成

これがないと始まらないので、まずはFacebookでLike Boxを作成します。
そのときの設定は以下のようにしました。
私の場合はコンテンツボックスに入れちゃうのでBorderはいりません。


Facebook Like Box

2: コードを取得

コードを取得するときは「HTML5」を選択しました。

Facebook Like Box2

3: コードを配置

Bodyタグのすぐ下と、
コメントの下にLike Boxを表示させたいので、
「comments.php」の以下の部分にコードを入れました。

1
2
3
4
5
  <?php comment_form($comment_form_args); ?>  
  <!-- FacebookのLike Boxを挿入 -->
  <div class = "main-box fb-box">
    <div class="fb-like-box" data-href="https://www.facebook.com/designprogramming" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="true" data-show-border="false"></div>
  </div>

4: CSSの設定

このままだとレスポンシブ対応になっていないので、
「style.css」に以下を追記しました。
これでレスポンシブ対応になります。

1
2
3
4
5
6
7
8
.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

関連記事

  1. 関連記事

    WordPress

    関連記事のCSSデザインをちょっと更新

    以下を使って、リスト部分のマークを削除して、左揃えにしました。l…

  2. disable-revisions-and-autosave

    WordPress

    WordPress導入時にまっさきに入れたいプラグイン『Disable Revisions and …

    新しくWordPressを導入したときにすぐに入れておきたいプラグ…

  3. トラックバックURL追加

    WordPress

    トラックバック用のURLを表示

    またしてもささやかな更新。wordpressは、トラックバックとコメ…

  4. wp_changeuser.jpg

    WordPress

    普段は変更できないWordPressのユーザー名を変更する方法

    ブログのドメインを新規取得してブログを立て直したい!ってことがある…

  5. アイキャッチと本文画像の最初がダブっているときの対処法

    WordPress

    アイキャッチと本文画像の最初がダブっているときの対処法

    テーマによると思いますが、アイキャッチと本文の一番最初にくる画像が…

  6. コメント件数

    WordPress

    記事ごとにコメント数を表示

    ちょっと前進。以下をindex.phpに書き加えた。&lt;a …

最近の記事

  1. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  2. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  3. コミックのイラストが新鮮だった!『MARVEL展』
  4. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  5. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. aero-1.jpg

    グルメ

    夏はすぎましたが「エアロ チョコミント」がすっきり涼感あるチョコでした
  2. 他人と被りたくない方にオススメのデザイン折りたたみ傘「BLUNT XS_METRO」

    プロダクト

    他人と被りたくない方にオススメのデザイン折りたたみ傘「BLUNT XS_METR…
  3. happyturn_yuzu-1.jpg

    グルメ

    後味に「柚子」が香るオトナのおやつ「ハッピーターン 柚子こしょう味」
  4. 2段組

    WordPress

    個別ページだけ2段組にしてみた。
  5. gooddesign_exhibition2012-1.jpg

    展覧会

    グッドデザインばかりが集められた「GOOD DESIGN EXHIBITION …
PAGE TOP