【WordPress】コメント欄を「Facebook Comment」に変装【Plugin】

「Wordpress」には元からコメント機能が実装されています。

しかし使い勝手の都合からコメント欄をカスタマイズされる方も多い様です。

ボクも「The Log」の時代からコメント欄は「Facebook」と統合できるタイプにしていたので改めて実装してみました。

ちなみにコメント欄の改造はプラグインを使うのが簡単で、Webクリエーターボックスさんの「コメント欄で使える10のWordPressプラグイン」という記事でよくまとめられてます。

コメント欄で使える10のWordPressプラグイン

「Facebook Comments」をインストール

log-161012fbcomment02

10万以上インストールされているベタ中のベタ「プラグイン」。「Facebook Comments」と検索すればすぐに出てきます。

インストール→有効化。

「Facebook Comments」の設定

設定は「設定」の中にあります。

log-161012fbcomment05

設定ページを開けると最初に”App”のセットアップを求める項目が出てきます。

設定ページ:

https://developers.facebook.com/apps

まだ登録したことがない場合は設定し、「Facebook App ID」を取得する必要があります。

Developers登録完了

細かいHow Toがわかりにくい場合は他で情報を見つけてもらえたらと思いますが(the 無責任)、とにかく「Facebook App ID」と「App Secret」がゲットできたら続きの項目に入れます。

log-161012fbcomment03

そのあとは改めて下記などを設定。

  • 言語を選択
  • 色合いを明るいかダーク調か選択
  • コメント表示数を選択
  • コメント欄の幅を設定
  • コメント欄のタイトル部分を設定

log-161012fbcomment06

WordPressのカスタマイズになれた人ならすぐに設定できる項目です。

設定完了!

log-161012fbcomment04

こんな感じでできました〜♪

このブログでは設置場所の問題でもう少しいじっていますが、シンプルな導入なら以上の手順で簡単にできるはずです。

コメントの管理方法

「Facebook Comment」を導入すると困るのが、Wordpressデフォルトのコメント機能が使えなくなること。その機能のひとつに、サイドバーに「最新コメント」を並べるもの。

これがあるとブログトップページにアクセスすると最近いただいたコメントが並んでいて一目で確認できます。

今のところこのブログにコメントは来ていません(泣)が、そのうち来る予定なのでそんなせっかくいただいたコメントを見逃さないためにちゃんと管理したいものです。

「Facebook Comment」を導入した場合は、下記の一括管理ページで管理できます。

コメント一括管理画面:

https://developers.facebook.com/tools/comments

log-161012fbcomment07

コメントがつくとこんな感じでFacebookアカウントに設定されている「画像」と、「名前」、その横に「コメントがついた記事の題名」と「コメント内容」が記載されます。

もし仮にいくつかWordpressブログを運営していてもこのページから見られるのでブログサイトとは違うページにアクセスするのが面倒とも思えますが、色々なページにコメントが来る様になった場合役に立ちます。

ここを覗くことを日課にしておけばいただいたコメントを逃す失敗はありませんね。

まとめ

  • WordPressデフォルトのコメントは微妙
  • プラグインで色々カスタマイズができる
  • このブログでは「Facebook Comment」を採用
  • 設定はまあ、簡単
  • 管理も別ページだが一括で簡単

今日のカスタマイズ健忘記はこんなところでしょうか。

Facebookタイプを選んだのは、多くの人がFacebookアカウントにログインした状態でこのブログに来ること、コメントする人の選択によりますが、ブログへのコメントをFacebookに投稿することも可能なので記事やコメントが拡散される可能性を生み出せるなどの理由です。

もちろんFacebookアカウントをお持ちでない方がコメントしようとした時に面倒が起きますので、そういう場合を想定するなら、Disqusの方がいいのかなーとも思いますが、ボクはとりあえずこれで行こうと思います。

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!


Fatal error: Uncaught ErrorException: md5_file(/home/users/1/leoism88/web/LeoLog/blog/wp-content/litespeed/css/e6718ddffb5fc2c2b5d429bb648521e4.css.tmp): failed to open stream: No such file or directory in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php:130 Stack trace: #0 [internal function]: litespeed_exception_handler(2, 'md5_file(/home/...', '/home/users/1/l...', 130, Array) #1 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php(130): md5_file('/home/users/1/l...') #2 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(837): LiteSpeed\Optimizer->serve('https://blog.le...', 'css', true, Array) #3 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(330): LiteSpeed\Optimize->_build_hash_url(Array) #4 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(264): LiteSpeed\Optimize->_optimize() #5 /home/users/ in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php on line 130