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

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

    ゴミ・リビジョンをきれいにしてサーバーの容量を節約するプラグイン「Delete-Revision」

    その名前の通りに「リビジョン」を消してくれるWordPressプラグ…

  2. WordPress

    旧WPブログのデータベースを新WPブログのデータベースに移行させる方法

    新ドメインと新サーバー(マルチドメインですが^^;)ですっきりしま…

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

    WordPress

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

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

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

    WordPress

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

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

  5. 3段組

    WordPress

    3段組の準備完了

    3段組にするにはまず2つの段を1つの段として扱えるようにグループ化する…

  6. トップページ

    WordPress

    サイトにトップページをつけた

    従来型のサイト、ということで、トップページをつけた。個別のページとブ…

最近の記事

  1. 進撃の巨人展FINAL チラシ
  2. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  3. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  4. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  5. 【コレクション】カードダス:SDガンダム外伝シリーズ
  6. 懐かしい!!カードダスSD戦国伝!!
  7. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!

アーカイブ

  1. 日常

    『形とデザインを考える60章』
  2. 日常

    ながーい1日
  3. iOS

    コメントとログをコードに混ぜて分かりやすく書いていきたい♪
  4. OSインストール

    ソフトウェア

    Parallels Desktop5【OSインストール】
  5. 日常

    普段使いの万年筆
PAGE TOP