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. WPプラグイン「Quick Adsense」でお手軽広告管理♪

    WordPress

    WPプラグイン「Quick Adsense」でお手軽広告管理♪

    ブログでGoogle Adsenseの管理をどうしようか考えていたら、…

  2. コメント覧変更

    WordPress

    コメント覧デザイン変更

    少しだけれど変更。大きさ調整しただけだけど、、、、。まだ直す余地…

  3. themeforest0.jpg

    WordPress

    「themeforest」で初めて有料WordPressテーマを買ってみた

    ブログにはWordPressを使っていますが、この度、はじめて有料…

  4. top

    WordPress

    blogデザイン更新。

    ちょっと久しぶりにデザイン更新。シンプルに、blogへのリンク画像…

  5. 関連記事

    WordPress

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

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

  6. 便利なタグがいっぱい! 記事作成が捗るWPプラグイン「AddQuicktag」

    WordPress

    便利なタグがいっぱい! 記事作成が捗るWPプラグイン「AddQuicktag」

    必要というわけではなく「あったら便利」というWordPressプラグイ…

最近の記事

  1. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  2. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  3. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  4. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  5. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  6. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  7. コミックのイラストが新鮮だった!『MARVEL展』
  8. シンプルで使い易い!!「雷に強い マイクロタップ 4個口」
  9. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  10. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 日常

    その道にはハートがあるか
  2. 日常

    陽気
  3. 日常

    意外とこぢんまり
  4. 日常

    鏡面仕上げ商品の撮影
  5. コレ使える! WordPressのテキスト置換にかかせないプラグイン「Search Regex」

    WordPress

    コレ使える! WordPressのテキスト置換にかかせないプラグイン「Searc…
PAGE TOP