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. コメント欄1021

    WordPress

    コメント覧のデザインを少し

    ほんの少しだけ手を入れた。フリーのテーマから持ってきたのが元になって…

  2. WordPress

    WordPressプラグインの脆弱性に「TimThumb Vulnerability Scanner…

    先日サーバーをレンタルしているさくらインターネットから「【重要】W…

  3. WordPress4.1でMarkDown記法を使うように設定してみた

    WordPress

    WordPress4.1でMarkDown記法を使うように設定してみた

    今までWordPress3系を使っていました。先日新しくテーマを買った…

  4. 検索フォーム

    WordPress

    検索フォームを追加。

    ますますブログっぽくなってきた。検索するとこんな感じで表示される…

  5. RSSフィード

    WordPress

    コメントフィードをつけた・・・だけ

    プチ・デザイン更新。細かくさくっと。…

  6. WordPress

    Twitterボタンの導入メモ

    Twitterボタンはわりとカンタンに導入できますね。すでにブログ…

最近の記事

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

アーカイブ

  1. 日常

    2009年、藍着堂 福袋
  2. 日常

    映画ラッシュ
  3. レゴ・ガチャ「スター・ウォーズ」全5種

    LEGO

    レゴ・ガチャ「スター・ウォーズ」全5種
  4. 日常

    うっわー、ぶっこわれた
  5. WordPress

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