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

    リンク集追加で、3段組。

    とりあえず、3段組完了。最終的にレイアウトどうしようかな。まだ仮の状…

  2. 独立ページ追加

    WordPress

    独立ページを追加

    独立ページを追加してみた。なるほど、こうやって仕上げていくのか。カン…

  3. 20120603232610

    WordPress

    ゴミ・リビジョンをきれいにしてサーバーの容量を節約するプラグイン「Delete-Revision」

    その名前の通りに「リビジョン」を消してくれるWordPressプラグ…

  4. 3段組

    WordPress

    3段組の準備完了

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

  5. 関連記事表示

    WordPress

    関連記事プラグイン導入

    関連記事を記事の下部に表示させるプラグインを入れてみました。いくつ…

  6. コメント覧変更

    WordPress

    コメント覧デザイン変更

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

最近の記事

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

アーカイブ

  1. 日常

    明日は休み
  2. 日常

    上流で
  3. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

    プロダクト

    暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」
  4. Minimalist Art Photography

    写真

    この空間の使い方がたまらない!ミニマリスト写真が好き!「Minimalist A…
  5. kamawanu_tenugui-3.jpg

    プロダクト

    この夏オススメ! 富士山世界遺産登録記念てぬぐい「富士山縞てぬぐい」♪
PAGE TOP