FacebookCommentsをプラグインを使わずに設置

028.jpg

Facebook Commentsの設置方法

Facebook Commentsをプラグインを使わずに設置するのもそう難しくありません。

プラグインで設置する方が簡単ですが、余計なタグを増やさないで済む、データベースの容量を減らさないで済む、等のメリットもあります。

では、Facebookのディベロッパーページから直接コードをサイトに設定する方法をやってみましょう。

Facebookのデベロッパーページからコードを取得する

header.phpへのOGP設定まで済んでいる方は、コードをheader.php、もしくは、script.phpにコピペします。

FacebookのCommentsプラグインページ:https://developers.facebook.com/docs/plugins/comments
を開きます。
FacebookCommentsPluginページ

設定項目を入力します。
下の図を参考に入力してください。
FacebookCommentsPlugin

Get Codeボタンをクリックすると、ポップアップウィンドウが表示されます。
下の図を参考に確認できたら、まず、下のコードをテキストソフトなどにコピーしておいて下さい。
次に上のスクリプトコードをコピーします。
FacebookCommentsPlugin1

Facebook Commentsのスクリプトコードの設置

外観→テーマ編集画面を開き、header.phpを開きます。
header.phpにスクリプトを直接貼り付ける場合は、bodyタグのすぐ下の部分に貼り付けます。

この記事で、scriptを読み込む設定にした場合、下の図のようになっています。
FacebookCommentsPlugin2

この場合は、social-script.phpを開いて、下のようになっているのを
Facebook Commentスクリプトの設置

このようにコードをはりかえます。
Facebook Commentスクリプトの設置

必ず、ファイルを保存ボタンをクリックしてください。
Facebook Commentスクリプトの設置

Facebook Commentのコードの設置

Facebook Commentのコードを設置するのは、テーマによっても変わりますが、contet.phpが多いと思いますので、contet.phpの設置方法で説明します。

まず、content.phpをこちらの記事:「子テーマ用header.phpの作成と編集」の要領で作成します。
サンプルサイトで使用している、TwentyTwelveの場合、テキストソフト上で、49-50行目に

</div><!– .entry-content –>
<?php endif; ?>

というコードがあります。(画像はTeraPadです。)
FacebookCommentsコード設置

これが、投稿記事はここまで、というコードですので、この下に、先程テキストソフトに貼り付けておいた、プラグインコードを挿入します。
FacebookCommentsコード設置2

コードを修正します。
現在のコードは、下のようになっていると思います。

<div data-href="http://wp-samples.hublog.biz/" data-width="450" data-numposts="5" data-colorscheme="light"></div>

このままだと、コメントが入るのは、data-href=”http://wp-samples.hublog.biz/”のURL、http://wp-samples.hublog.biz/のページにのみになってしまいます(^^ゞ

そこで、URLの部分を<?php the_permalink(); ?>に変更します。

下のようになります。

<div data-href="<?php the_permalink(); ?>" data-width="450" data-numposts="5" data-colorscheme="light"></div>

また、今回はcontent.phpを編集していますので、このままだと抜粋にもコメント欄が表示されてしまいます・・(^^ゞ

なので、投稿ページにだけ表示されるよう、以下のように修正を加えます。

<?php if ( is_single() ) : ?><div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="minwidth=450px" data-numposts="5" data-colorscheme="light"></div><?php endif; ?>

上書き保存をして、FTPソフトで子テーマ内にアップします。

アップするのは、子テーマディレクトリ内です。
ルートを
ドメイン → public_html → wp → wp-content → themes → 子テーマ
とたどって、子テーマ内にアップします。
content.phpのアップロード

サイトを確認してみましょう。
FacebookComments

お疲れ様でした(^^)

Published:2014/02/14

Written by

FacebookCommentsをプラグインを使わずに設置」への1件のフィードバック

コメントを残す