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のユーザー名を変更する方法

    ブログのドメインを新規取得してブログを立て直したい!ってことがある…

  2. WordPress

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

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

  3. コレ使える! WordPressのテキスト置換にかかせないプラグイン「Search Regex」

    WordPress

    コレ使える! WordPressのテキスト置換にかかせないプラグイン「Search Regex」

    ブログなんかでタイトルのCSSを置き換えたり、写真のサイズを変更したり…

  4. 個別ページ

    WordPress

    個別ページを1段組にした

    また、小さく前進。個別ページのテンプレートpage.phpをつくって…

  5. 3段組

    WordPress

    3段組の準備完了

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

  6. WordPress

    Twitterのツイートをカンタンに埋め込めるWPプラグイン『Twitter Embed』

    ブログを書いていると「ツイッターのツイートを記事の中に表示させたい!…

最近の記事

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

アーカイブ

  1. micro solutionのガラスシート

    プロダクト

    ついにiPhone7の最高のフィルムを見つけた!Micro Solutionのガ…
  2. MarsEdit

    【MarsEdit】至高のブログ・エディターのひとつ『MarsEdit』の体験版…
  3. 日常

    ようやく納品
  4. iOS

    「Distribute」ででたエラー「This bundle is invali…
  5. 日常

    今そこにある危機
PAGE TOP