facebookのコメント欄を導入してみました。
やってみたら、簡単だったので、次からは5分で導入可能なようにメモメモ
最初はプラグインとか探したのですが、なんか直接入れたほうが簡単そうだったので、直接index.phpに書くことにしました。
https://developers.facebook.com/docs/plugins/ へアクセス
色々ボタン等、ここから作ってコピペで、出来る様になっているようです。今回はコメント欄を用意したいので、[Comments]を選択します。
なが～い説明があるのですが、必要なのは、[GetCode]のボタンまで、
4つの項目、URL、表示幅、コメント表示数、色、を設定して[GetCode]のボタンを押します。
このコードをコピペして利用します。
変更箇所は、URLの記述。このままでは固定ページになるので、
<div class="fb-comments" data-href="https://www.gworks.jp" data-width="470"></div>
を以下のように変更して、表示したいところに貼り付けます。
<div class="fb-comments" data-href="<?php the_permalink(); ?>" 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;
}
を追加して一安心です。
コメント