WordPressでプラグインを使用せずにFacebookのコメント欄を導入する方法!


このブログはわいひらさんの作ったハイパー便利で使いやすいWordpressテーマ『Cocoon』で運用しています。

今のところコメント欄にコメントが来ることは無いですが、ボクが運営しているほかのサイトでも使っている『Facebookコメントプラグイン』を導入しようと思いまして調べつつ導入してみました。

Simplicity2の頃からあまり需要がなかったようで情報も少なかったので、備忘録を兼ねて残しておきます。

Cocoon使ってるけどコメント欄をFacebookにしたい!』というボクと気が合いそうな方がいれば参考にどうぞ!

Facebookコメントプラグインとは?

まずはFacebookコメントプラグインについて。

WordPressなどのコメント欄を、Facebookアカウントでコメントすることが出来るようになる仕組みです。

メリットとしては、

  • Facebookアカウントと紐づくので荒らしコメントやスパムが少ない
  • コメントした人のタイムラインに表示することが出来るので宣伝になるかも

デメリットとしては、

  • Facebookアカウントが無いとコメント出来ない
  • テーマ側などの仕様変更でこれまでのコメントが消えるかも知れない

など、メリット・デメリット双方あります。

ボクは別のブログでFacebook関連の記事がいくつか人気があったので、コメント欄をFacebookコメントプラグインに変更していました。

ということでこのブログでもFacebookコメントプラグインに変更したいと思います!

Facebookコメントプラグインのコードを入手する

まずはFacebookのプラグインページにアクセスしてFacebookコメントプラグイン用のコードを入手します。

Facebook Comments

https://developers.facebook.com/docs/plugins/comments

アクセスしたら①〜③を設定します。

  • コメントするURL:設置するホームページのアドレス
  • 幅:コメントプラグインの幅。特にない場合は100%にしておくとサイトの幅いっぱいになる
  • 投稿数:投稿されたコメントを何件表示するか

設定が完了したら、『コードを取得』をクリックしてコードを表示します。

①、②のコードを後ほどテーマ内に挿入するのでメモしておきましょう。

①のコードをBodyタグの直後に挿入

FTPツールでheader.phpをダウンロードして、bodyダグの直後に①のコードを追記する。

その際にローカル環境にコピーをとっておくと万が一エラーが出た場合も修復しやすいです。

②のコードをWordpress用に編集する

取得した状態だとURLがトップページになっているため、各投稿ページで表示できるように下記のパーマリンクに置き換えます。

置き換えたあとのコードはこちら。

” data-width=”100%” data-numposts=”10″>

②のコードをコメント(comments.php)に挿入する

FTPツールでcomments.phpをダウンロードして、<!– comment area –>から<!– /.comment area –>の間(11行目から60行目)を削除して上記②のコードに置き換えます。

その際にローカル環境にコピーをとっておくと万が一エラーが出た場合も修復しやすいです。

投稿ページを表示して確認

実際に投稿ページを表示してコメント欄がFacebookコメントプラグインに変更されていれば完了です。

まとめとあとがき

PHPなどのプログラミングが全くわからないボクは、今回初めてCocoonのフォーラムで質問をさせていただきました。

するとテーマ作者のわいひらさんから丁寧にご返信を頂き、試行錯誤の結果無事導入が出来ました!

忙しい中ご対応頂きありがとうございました!

コメント欄自体いらない派の方も多いと思いますし、わざわざFacebookのコメントプラグインにするメリットも無いとされる派も多いと思います。

が、もしもCocoonにFacebookコメントプラグインを導入したい方がいたら参考にしてください!

恐らくその他のテーマでも似たような形で導入できるかと思います。

なお、親テーマの大事な大事なPHPをいじくり回すので必ずバックアップを取ってから作業してください!

コメント