プラグインを使わずにFacebookのコメントをWordPressで表示させる方法WordPressでデフォルトのコメント欄を表示させていると、Akismetというプラグインを有効化していてもスパムが多く届いてしまい、面倒だと感じたことがありませんか?

デフォルトのコメント欄をFacebookのコメント欄に設定することで、

  • Facebookは実名なので誹謗中傷の心配が薄れる
  • 社会的証明になる
  • スパムコメントが来ない

といった効果が期待できます。

この記事では、プラグインを使わずにFacebookのコメントをWordPressで表示させる方法を解説します。

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ1
facebook for developersにログイン

下記URLをクリックし、facebook for developersの画面を表示させます。

※この時、Facebookにログインした状態でいてください。

▶︎facebook for developers

Facebookコメント WordPressで表示させる方法

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ2
幅とコメント数を入力する

少し下にスクロールすると、下記の画像の画面となりますので、各項目に入力していきます。

Facebookコメント WordPressで表示させる方法

①コメントするURL

デフォルトのままでOKです。

②幅

ブログのコンテンツの幅を入力すると綺麗に表示されます。

③投稿数

コメントの投稿数を入力します。

※設定した数字を超えると、折りたたまれます。

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ3
コードを取得

下にスクロールすると、「コードを取得」という青いボタンがありますので、クリックします。

Facebookコメント WordPressで表示させる方法

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ4
コードをコピー

下記の画像のように2つのコードが表示されますので、まずは①をコピーします。

※まだfacebook for developersの画面を閉じないでください。

Facebookコメント WordPressで表示させる方法

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ5
WordPressに戻る

WordPressの管理画面に戻り左サイドメニューの「外観」内の「テーマの編集」をクリックします。

Facebookコメント WordPressで表示させる方法

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ6
header.phpに貼り付ける

右サイドメニューに「(header.php)」という項目があるので、クリックし表示させます。

表示させたら、<body>の直下にステップ4でコピーした①を貼り付けます。

※使用しているテーマによって<body>の位置は違うと思いますので注意してください。

Facebookコメント WordPressで表示させる方法

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ7
ファイルを更新

<body>の直下に貼り付けたら、ファイルを更新をクリックします。

Facebookコメント WordPressで表示させる方法

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ8
②を編集

facebook for developersの画面に戻り②をコピーし、メモ帳に一度貼り付け少し変更していきます。

※もしコードが表示されていない場合は、もう一度「コードを取得」をクリックすると表示されます。

コピーしたコードのままだとhttps://developers.facebook.com/docs/plugins/comments#configuratorに対してのコメントになってしまうので、記事のURLを指定する必要があります。

<div class=”fb-comments” data-href=”https://developers.facebook.com/docs/plugins/comments#configurator” data-width=”650″ data-numposts=”5″></div>

赤文字の部分を消し、

<?php the_permalink(); ?>

を入力します。

編集後

<div class=”fb-comments” data-href=”<?php the_permalink(); ?>” data-width=”650″ data-numposts=”5″></div>

となります。

これをコピーします。

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ9
表示させたい場所に貼り付ける

例えば、記事のデフォルトのコメント欄と切り替えたい場合は、管理画面の左サイドメニューの「外観」内の「テーマ編集」をクリックし、右の「(single.php)」を選択します。

その中に、

<?php comments_template(); ?>

という文字がありますので、ここを消して、先ほどの編集した

<div class=”fb-comments” data-href=”<?php the_permalink(); ?>” data-width=”650″ data-numposts=”5″></div>

を貼り付けます。

最後にファイルを更新をクリックします。

※テーマによっては、<?php comments_template(); ?>ではなく、<?php comments_template( ”, true ); ?>などで表記されている場合もあります。

プラグインを使わずにFacebookのコメントをWordPressで表示させる方法ステップ10
確認

設置ができているか確認してみましょう。

Webサイトの記事を開き、下記画像のようにFacebookコメント欄が表示されていればOKです。

Facebookコメント WordPressで表示させる方法

まとめ

この通り進めれば実際にスムーズにできると思いますが、もしわからないことがありましたら、こちらからお問い合わせください。

また感想等もお待ちしております。