MENU

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の仕様変更で管理画面から直接変更して保存するとエラーが出て内容が白紙になる場合があるので必ず元ファイルをダウンロードして編集、アップロードしてください。
その際にローカル環境にコピーをとっておくと万が一エラーが出た場合も修復しやすいです。

 

Cocoon設定のOGP設定でFacebook APP IDを入力している場合は①のコードは不要です。

 

 

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

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

<?php comments_template(); ?>

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

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

 

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

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

 

WordPressの仕様変更で管理画面から直接変更して保存するとエラーが出て内容が白紙になる場合があるので必ず元ファイルをダウンロードして編集、アップロードしてください。
その際にローカル環境にコピーをとっておくと万が一エラーが出た場合も修復しやすいです。

 

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

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

 

まとめとあとがき

PHPなどのプログラミングが全くわからないボクは、今回初めてCocoonのフォーラムで質問をさせていただきました。
するとテーマ作者のわいひらさんから丁寧にご返信を頂き、試行錯誤の結果無事導入が出来ました!
忙しい中ご対応頂きありがとうございました!

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

お出掛けやら流行りモノやら立ち飲みやら好き。
熱しやすく冷めやすい。
Nikon D5300ユーザー。
スマホ修理・MacBook修理のSMARTじゅんちゃんの城めぐりブログやってます。

コメント

コメントする

目次