Word Pressでテーマを弄っていて面倒な作業の一つがコメント欄の設置。

ボタンからコメントに対する返信のデザイン、更にサニタイズまでやるのは非常に時間もかかる。

始めたばかりのウェブサイトでは時間をかけて作ったコメント欄に書き込まれるコメントの殆どがスパム。

Word Pressデフォルトのコメント機能は言っちゃ悪いが良い事なし。

そういう場合の対処方法をいくつか紹介します。

Facebookソーシャルプラグインを使う

Facebookのソーシャルプラグインを使えば炎上やスパムが起き難いコメント欄を設置することが出来る。

こんな感じのやつです。

現在ネットをやっている人の多くがFacebookアカウントを持っているしブログに積極的にコメントを残してくれるユーザーならなお更。

設置の仕方は簡単。

まずはFacebookのディベロッパー（開発者）用ページに登録。

Facebookフッターの「開発者」から飛ぶか「Facebook　開発者」とググればすぐに見つかる。

タイムラインが伸びてフッターが見えませんなんてアホな人は居ないとおもいますけれど念のため言っておくと「設定」等のタイムラインの無いページに飛べばフッターは簡単に見えます。

開発者ページに行ったら上部ナビゲーションのアプリからRegister as Developerへ。

登録したら同じく上部ナビゲーションのドキュメントからページ左部分のSharing → Social Plugin → Commentsへ。

適当なURLを入れてGet Codeでコードを取得します。

固定ページに設置したい場合にはそのURLを入力すればOKですが、今回はブログのコメント欄の代わりとして使用したいのでURLは後に編集します。

コードが2種類表示されますが、1つ目は表示する為のJavascriptなので表示したいページで表示される領域のBody内でしたら何処に貼り付けてもOK

2つ目をコメント欄を設置したい場所に貼り付けます。

2つ目のコードの中身をphpを使って編集して、現在ページのURLを取得します。

既存のコメント欄がある場合には削除or無効化します。（残したい場合は残してもOK）

デフォルト
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>

PHPで現在のURLを取得
<div class="fb-comments" data-href="<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" data-numposts="5" data-colorscheme="light"></div>

以下のような既存のコメント欄読み込み用のコードは削除or無効化

これでFacebook Social Pluginを使用したコメント欄は完成です。

同じような要領でシェアボタンやいいね！ボタンも設置できるので必要な方はやってみましょう。

その際コード取得の際のJavascriptの読み込みは1度で大丈夫です。

Zenbackを使用する

Facebookのコメント欄の設置の仕方を紹介した直後に書くのも難ですが、Zenbackという無料サービスを使用すると各種ソーシャルボタンの他、Facebookコメント欄もコード１つで簡単に設置が出来ます。

月間数十万PVのブロガーさん達でも使っている方は沢山いて簡単ソーシャルボタン設置サービスに関して言えばNinjaツールズかこれ。

設置方法はZenbackのHPで簡単な登録を済ませてコードを取得、設置したいところに貼り付ければ完了です。

当ブログでも使用していますし、他のWebクリエイターの方のブログを拝見しても使っている方は多い。

無料サービスのため広告が少し邪魔ですが、広告非表示機能付のビジネス向けのZenback Bizというサービスもあるのでお金払ってでも広告を消したい方はこちらをオススメします。

デメリット

Facebookを使ったコメント欄は非常に便利でセキュアな反面

世の中には個人情報を晒してまでコメントを残したくないという方も沢山います。

更にブログのターゲット層がFacebookのアカウントをあまり持っていない場合もあります。

そういった場合にはこのFacebookコメントはオススメできません。

Disqusを使う

しかし世の中にはまだまだ便利なものが沢山あってセキュアかつ匿名性もある上にSNSのような機能を持つコメントサービスが存在します。

というかこれが書きたくて記事を書きました。

中央集権型のコメント機能を提供するオンラインサービスDisqus。

スクロールするまで読み込みも始まらないのでページ読み込み速度も気になりません。

Word Pressとの親和性もありWPプラグインをインストールするだけで使用できます。

海外では既に多くの個人クリエイターやThe Next Web等の大手ITニュースサイトも使用している。

日本でもTech Church Japanが使用しており信頼性も抜群。

使い方は以下の通り

comments_template();の部分を読み込んでいるのでデフォルトのコメント欄を削除している場合は以下のコードを設置したい場所に貼り付けてください。

コメント欄呼び出しコード
<?php comments_template(); ?>

するとこのようなコメント欄が簡単に設置できます。

ユーザー登録している方がコメントした場合、そのユーザーの過去のコメント一覧（別のHPで残したコメントも含む。）やプロフィールが閲覧可能。

SNSのような信頼性もありセキュアなやり取りが可能になります。

BLOGOSのコメントサービスの部分だけ切り取ったような感じでしょうか。

一方で匿名での書き込みも可能なため、個人情報に敏感な人でも安心して使用できます。

当ブログではZenbackのFacebookコメント欄とDisqusのコメント欄の両方を設けてあります。

まとめ

やりたいようにやればいい。

結局かなり細かい部分までカスタマイズして凄いカッコイイコメント欄を自力で作れる人は尊敬に値するけれど時間の節約も大事。

ひとこと

日本メダルスノーボード銀銅メダル獲得おめでとう！

ナショナルチームのメンタルコーチをしている知人がいて、国際放送にバッチリ写ってた。

ちょっとびっくりしたけれど折角なのですぐさまキャプチャーしてその方のタイムラインにはったったｗ

CBCのアナウンサーも日本人のメンタルの強さに驚いていたけれど一昔前では考えられない。

以前一度、競技者としてセッションを受けた際に最初は正直胡散臭いと思っていたけれど思った以上に凄かった。

メンタルのコーチングは知ってる人は知っているという感じでジワジワきてはいるけど、これからもっとくると思う。