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

    WordPress導入時にまっさきに入れたいプラグイン『Disable Revisions and …

    新しくWordPressを導入したときにすぐに入れておきたいプラグ…

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

    WordPress

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

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

  3. 関連記事

    WordPress

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

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

  4. WordPress

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

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

  5. WordPress

    WordPressにアバターが表示されるように「Gravatar」に登録してみた

    WordPressを使っているとコメント覧とか記事を書いたライター…

  6. 3段組

    WordPress

    3段組の準備完了

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

最近の記事

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

アーカイブ

  1. 大人なら揃えておきたい!突然必要になる礼服一式をORIHICAで揃えました

    ファッション

    大人なら揃えておきたい!突然必要になる礼服一式をORIHICAで揃えました
  2. 展覧会

    世界が恋した日本のデザインを観よう!『KATAGAMI Style展』の見どころ…
  3. MTG

    【MTG】『ギルド門侵犯』プレリリースで優勝してきた!
  4. 日常

    引越中止
  5. サービス

    RSS配信のログも見たいから『Google feedburner』を導入してみた…
PAGE TOP