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のテキスト置換にかかせないプラグイン「Search Regex」

    WordPress

    コレ使える! WordPressのテキスト置換にかかせないプラグイン「Search Regex」

    ブログなんかでタイトルのCSSを置き換えたり、写真のサイズを変更したり…

  2. 個別ページ

    WordPress

    個別ページを1段組にした

    また、小さく前進。個別ページのテンプレートpage.phpをつくって…

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

    WordPress

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

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

  4. WPサーバー移行が楽すぎ!「All-in-One WP Migration」

    WordPress

    WPサーバー移行が楽すぎ!「All-in-One WP Migration」

    WordPressのサーバー移行の方法は何種類もありますが、簡単なほう…

  5. 独立ページ追加

    WordPress

    独立ページを追加

    独立ページを追加してみた。なるほど、こうやって仕上げていくのか。カン…

  6. 20120610154122

    WordPress

    インストールするだけでブログ記事へのアクセス情報がわかるWPプラグイン『post-views』

    ブログを日々運営している人なら気になるのはアクセス数ですよね〜。いっ…

最近の記事

  1. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  2. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  3. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  4. コミックのイラストが新鮮だった!『MARVEL展』
  5. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  6. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」
  7. 水引と風呂敷の包み方のデザインが美しい引き出物「祝づつみ」
  8. 【無印良品】ちょっと小さいクリップも買っておいて損はない「袋止めクリップ・小」
  9. 【無印良品】普通に使えるクリップが安くてうれしい「袋止めクリップ・大」
  10. 今年の手帳はコレに決めた♪「ほぼ日手帳 2017 オリジナル」

アーカイブ

  1. 【無印良品】キッチンまわりは「整理ボックス」で仕分け♪

    無印良品

    【無印良品】キッチンまわりは「整理ボックス」で仕分け♪
  2. JAXA相模原キャンパス2011

    イベント

    JAXA相模原キャンパス特別公開 2011-1
  3. 日常

    対策
  4. silicone_ice_lolly-1.jpg

    無印良品

    【無印良品】シリコーン製氷器「アイスバー」をセールでゲット♪
  5. 日常

    メシ
PAGE TOP