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. 20120630223226

    WordPress

    Facebookのいいね!ボタン導入メモ

    TwitterとGoogle+のボタンを入れたらやっぱりFacebo…

  2. 20120620194435

    WordPress

    『zenback』をWPプラグインで簡単に設定できる「EZ zenback」が便利!

    『zenback』をブログに導入する時は、コードをphpファイルに埋…

  3. themeforest0.jpg

    WordPress

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

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

  4. blog_apphtml-8.jpeg

    WordPress

    AppHtmlメーカーのリンク切れをWPプラグイン「Search Regex」で一括変換!

    ちょっと前のことになりますが、AppHtmlで作ったリンクの画像が…

  5. WordPress

    WordPress:個別ページで第一階層しか表示しないようにしたい

    WordPressっていろいろできるなあ、調べるとほんとにいろんなブロ…

  6. WPtouch

    WordPress

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

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

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  6. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  8. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  9. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  10. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」

アーカイブ

  1. English_Tradition-1.jpg

    プロダクト

    これだけは持っておきたい!とことん使い回せる定番マフラー「イングリッシュ トラデ…
  2. red_shock-1.jpg

    グルメ

    今まで食べたインスタントラーメンの中で一番辛い!「レッドショックヌードル」
  3. 日常

    7/26 隠れた名ギャラリー
  4. 20120530172146

    ブログ

    ブログを消してしまったので再始動します!
  5. 国内初のコンバースシューズ直営店「White atelier BY CONVERSE」に行ってきた

    ショップ

    国内初のコンバースシューズ直営店「White atelier BY CONVER…
PAGE TOP