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

    WordPress

    Twitterボタンの導入メモ

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

  2. 20120603232610

    WordPress

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

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

  3. リンク集追加

    WordPress

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

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

  4. WordPressのバージョンを確認する方法

    WordPress

    WordPressのバージョンを確認する方法

    WordPressのバージョンを確認するにはダッシュボードの表示を調整…

  5. さくらサーバーの設定

    WordPress

    「WordPressのログイン後に画面が真っ白け」対策

    新デザインのテーマをいじっていると必ず起こる意味不明な現象。デザイン…

  6. Newpost_Catch08.jpg

    WordPress

    サムネイル付きで最近の記事を表示できるWordPressプラグイン「Newpost Catch」

    WordPressにはデフォルトで最近の投稿をまとめて表示できるサ…

アーカイブ

  1. 日常

    Tate Britain & SHIPLEY
  2. 日常

    新生活デザイン
  3. 日常

    決意
  4. 日常

    仕事を受けるか、どうするか
  5. 日常

    「紙の新しいコミュニケーションとデザインの可能性」
PAGE TOP