Facebook コメントをつける wordpress

| カテゴリー : Life Log | コメント (0)   はてなブックマーク - Facebook コメントをつける wordpress

fb_icon_325x325facebookのコメント欄を導入してみました。

やってみたら、簡単だったので、次からは5分で導入可能なようにメモメモ

最初はプラグインとか探したのですが、なんか直接入れたほうが簡単そうだったので、直接index.phpに書くことにしました。

001https://developers.facebook.com/docs/plugins/ へアクセス

色々ボタン等、ここから作ってコピペで、出来る様になっているようです。今回はコメント欄を用意したいので、[Comments]を選択します。

 

 

002なが~い説明があるのですが、必要なのは、[GetCode]のボタンまで、

4つの項目、URL、表示幅、コメント表示数、色、を設定して[GetCode]のボタンを押します。

003このコードをコピペして利用します。

変更箇所は、URLの記述。このままでは固定ページになるので、

<div class="fb-comments" data-href="http://www.gworks.jp" data-width="470"></div>

を以下のように変更して、表示したいところに貼り付けます。

<div class="fb-comments" data-href="&lt;?php the_permalink(); ?&gt;" data-width="470"></div>

で、表示をすると、無事表示することができます。

レスポンシブに対応
幅がピクセル固定のままでなので、このままでは、レスポンシブになりません。レスポンシブなサイトの場合には、CSSに以下を追加
参照元、ウェブ、ショウジン|Facebook Like Boxを幅100%にする(レスポンシブWebデザイン対応)


/* Facebook Like Box width:100% */
.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
width: 100%! important;
}

私の場合には、twitterのタイムラインの幅に影響がでました。


.twitter-timeline{
width: 100%! important;
}

を追加して一安心です。

おしらせ

  • Calemdar

    2013年9月
    « 8月   10月 »
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    30  
  • Category

  • Archive

  • Latest articles

  • Tag Cloud