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. トラックバックURL追加

    WordPress

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

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

  2. Twitter Embed

    WordPress

    Twitterのツイートをカンタンに埋め込めるWPプラグイン『Twitter Embed』

    ブログを書いていると「ツイッターのツイートを記事の中に表示させたい!…

  3. Amazonプラグインデザイン

    WordPress

    Amazonプラグイン導入

    プラグインのデザインを整えてみた。これはAmazonの商品情報を表示…

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

    WordPress

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

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

  5. WPtouch

    WordPress

    スマートフォン対応してみた

    WordPressのプラグイン「WPtouch」を導入。このプラグ…

  6. トップページ

    WordPress

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

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

アーカイブ

  1. fits_slime1.PNG

    グルメ

    噛んだ後はスライムがあらわれる『Fit’s スライム味』
  2. 日常

    バリ1日目
  3. 日常

    7/26 隠れた名ギャラリー
  4. quickle_handy-1.jpg

    プロダクト

    ウェーブ ハンディワイパーから全面を掃除に使える「クイックルワイパー ハンディ」…
  5. ghana_hotchocolate-1.jpg

    グルメ

    この冬、チョコは溶かして楽しむ♪「ガーナ ホットチョコレート」
PAGE TOP