WordPressにFacebookコメント欄をかんたん設定【プラグイン不要】

WordPressにFacebookコメント欄をかんたん設定【プラグイン不要】

ワードプレスサイトを運営している人でもコメントに対する価値観や扱い方は様々ですが、どちらかというと、あまり意識していない方が多いように感じます。

僕も以前は「スパム対策だけとっておけばいいか」程度の認識でした。

しかしながら、ジャンルや特性によっても異なりますが、コメントによって盛り上がるサイト、逆にコメントを閉じることで安定するサイトなどがあり、重要なファクターの一つといって間違いないものです。

今回は、ワードプレス標準コメント欄を廃止して、facebookコメント欄を装備する方法をご紹介します。

当サイトでも採用している方法で、とても簡単に実装することができますよ。

動画解説

Aya
上の動画【WordPress】Facebookコメント欄をプラグインなしで設置する方法でも解説しています。ぜひご覧ください。

Facebookコメント欄を使用するメリット

ワードプレス標準コメント欄からfacebookコメント欄に変更するメリットはいくつかありますが、以下の点において大きく感じられます。

  • 誹謗中傷や心ないコメントがつきにくい
  • よりコンテンツになり得るコメントをもらいやすい

実名登録を前提とするFacebookアカウントによるコメントなので、やはり無責任なコメントを圧倒的に減らすことができます。(実際の運用は実名とは限りません)

また、記事に対する賛同意見や独自の考察など、付加価値のあるコメントをいただける可能性も上がるため、コンテンツとしての強化、ひいては内部SEO対策に繋がるメリットも見逃せません。

ワードプレス標準コメント欄の「気楽にコメントできる」メリットと勘案し、どちらを採用するか決めるといいでしょう。

スパムコメント対策としては、ワードプレスのプリインストールプラグイン・Akismetが有効です。

Akismet - 無料スパムコメント対策!APIキー取得方法と使い方

2016.07.20

Facebookコメント欄の実装手順

Facebookコメント欄を実装するためのプラグインは多く存在しますが、今回ご紹介する方法が一番かんたんに感じます。

phpの編集は未経験の方にはハードルが高いかもしれませんが、バックアップを必ず取り、挑戦してみてはいかがでしょうか。以下の手順を見て、出来そうと思われたのなら、試してみてください。

facebookデベロッパーズでコードを取得

facebook公式デベロッパーズサイトにアクセスします。下記からどうぞ。

必ず、自身のFacebookアカウントでログインしたブラウザから行ってください。

119WordPressにFacebookコメント欄をかんたん設定【プラグイン不要】1
  1. URLは変更不要
  2. 自サイトの記事幅(600px〜700pxが一般的です)
  3. 初期表示の投稿数

②③を入力し下にスクロールさせ、コードを取得をクリックします。

ステップ②③のコードを、それぞれメモ帳にコピーします。

119WordPressにFacebookコメント欄をかんたん設定【プラグイン不要】3b

仕様によりますが、ステップ①のアプリ設定は必ずしも必要ではないようです。言語設定ができる場合は、日本語に合わせるといいでしょう。

取得したコード②を変更する

メモ帳にコピーしたコード②を変更します。

こちらから、

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

こちらへ。

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

具体的には、上のdata-href=””の中の部分だけを、以下のコードへ変更する内容です。

<?php the_permalink(); ?>

header.phpに取得したコード①を追加

119WordPressにFacebookコメント欄をかんたん設定【プラグイン不要】4a

コード①をheader.phpに貼り付けます。

外観>テーマの編集>
右側のメニューからheader.phpを開き、「body」を検索します。

検索ウィンドウの表示方法
Mac:command+F
Windows:Control+F

一般的なWordPressテーマでは、以下の構文になっています。

<body <?php body_class(); ?>>

上記画像の通り、この直下にコード①を貼り付け、ファイルを更新をクリックします。

single.php(単一記事の投稿)に変更したコード②を追加

119WordPressにFacebookコメント欄をかんたん設定【プラグイン不要】5

上記で変更したコード②を、single.phpに貼り付けます。

外観>テーマの編集
右側のメニューからsingle.phpを開き、php commentsを検索します。

一般的なWordPressテーマでは、以下の構文になっています。

<!--?php comments_template(); ?-->

※当テーマ「stork」では若干異なっていましたので、「php comments」での検索がお勧めです
 
テーマ側で標準コメント欄の非表示ができる場合は、画像のようにその直下に、非表示ができない場合は、置き換えとして貼り付けます。

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

※置き換える場合は、やり直せるように元のコードをメモ帳にコピーしておきましょう

シェアされる記事を書こう

記事のコメント欄を確認し、Facebookコメント欄が表示できていたら完了です。

画像のように、Facebookページを持っているアカウントの場合、どちらからコメントするかを選ぶこともできますね。

また、「Facebookにも投稿」にチェックを入れた状態でコメントされた場合、そのアカウントのフィードに公開投稿されることになります。場合によっては、それをきっかけに広くシェアされることにも繋がることでしょう。

読者、閲覧者に有益な記事を書くことが大切ですね。

お名前
メールアドレス





WordPressにFacebookコメント欄をかんたん設定【プラグイン不要】

ABOUT運営者情報

北海道出身、東京都在住。幼少期から音楽に触れ、ビジュアル系バンドでの活動を経て作曲家へ。その後、大手IT金融グループ社員を経て独立。現在はアフィリエイトやネットマーケティングのコンサルティングを通じて、研鑽の日々を送っています。