Warning: Parameter 1 to multibyte_patch::wplink_js() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579
FacebookのLike Boxをレスポンシブ対応させる方法 | Crunchlog
Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

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

    コメント覧デザイン変更

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

  2. 20120630223226

    WordPress

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

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

  3. WPプラグイン「Quick Adsense」でお手軽広告管理♪

    WordPress

    WPプラグイン「Quick Adsense」でお手軽広告管理♪

    ブログでGoogle Adsenseの管理をどうしようか考えていたら、…

  4. wordpress_Fatal_error.jpg

    WordPress

    新テーマを適用したらでる「Fatal error」はWordPressのアップデートで対応してみる

    新年度スタート記念にブログのテーマを新しくしようとしたところ、ダッ…

  5. WordPressの基本的な設定項目をおさらい1「一般設定」篇

    WordPress

    WordPressの基本的な設定項目をおさらい1「一般設定」篇

    WordPressをインストールしたら設定しておきたい項目のひとつです…

  6. Twitter Embed

    WordPress

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

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

最近の記事

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

アーカイブ

  1. 引越先で以前の入居者宛郵便がきたらすること

    日常

    引越先で以前の入居者宛郵便がきたらすること
  2. Harry_the_Dirty_Dog-1.jpg

    読書

    【絵本】じつはシリーズ化していた『どろんこハリー』
  3. レゴはやぶさ

    LEGOはやぶさ

    レゴはやぶさ一般発売開始!!
  4. 日常

    意外とこぢんまり
  5. 日常

    音→映像
PAGE TOP