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

    WordPress

    blogデザイン更新。

    ちょっと久しぶりにデザイン更新。シンプルに、blogへのリンク画像…

  2. newserver24

    WordPress

    旧WPブログのデータベースを新WPブログのデータベースに移行させる方法

    新ドメインと新サーバー(マルチドメインですが^^;)ですっきりしま…

  3. 20120620194435

    WordPress

    『zenback』をWPプラグインで簡単に設定できる「EZ zenback」が便利!

    『zenback』をブログに導入する時は、コードをphpファイルに埋…

  4. 関連記事表示

    WordPress

    関連記事プラグイン導入

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

  5. 20120623111008

    WordPress

    Twitterボタンの導入メモ

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

  6. Amazonプラグインデザイン

    WordPress

    Amazonプラグイン導入

    プラグインのデザインを整えてみた。これはAmazonの商品情報を表示…

最近の記事

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

アーカイブ

  1. google_addurl_error12.png

    サービス

    GoogleにURLを登録できなかった時の対処方法
  2. legocuusoo_ArchivedProject2.png

    LEGO

    LEGO CUUSOOのスター・ウォーズ系プロジェクトが商品化ならず
  3. ehon_100neko-1.jpg

    読書

    【絵本】大人ももう一度読みたい『100万回生きたねこ』
  4. 無印良品の箸で2015年をはじめます

    無印良品

    【無印良品】無印良品の箸で2015年をはじめます
  5. ダース・ベイダーのデザインがかっこいいDARSのスター・ウォーズコラボ

    グルメ

    ダース・ベイダーのデザインがかっこいいDARSのスター・ウォーズコラボ
PAGE TOP