DISQUSのコメント機能をBlogにペタッ!

先日、とあるBlogでおもしろい記事を発見した。

DISQUS導入してみました (I am Electrical machine)

何のことかというと、BlogのコメントをDISQUSというサービスを使って実現していると。

なかなかおもしろいことしおるなと思った。


なにがおもしろいのかというと、OpenIDでログインしてBlogにコメントを残せることですね。

多くのBlogではコメントは特段のログイン無しで書き込めるが、SPAM対策などを考えればそれでいいのかという疑問はある。

なので、一応はなんしかのアカウントでログインしてもらってから書き込んでもらおうという意図で導入を考えた。

まぁ今の時代OpenIDに対応したアカウントの1つや2つは持ってるでしょ。


さて、まず導入方法ですがDISQUSのWebサイトにアクセスしてSign Upする。

そしてBlogに取り付けるだけだ。

そのBlogへの取り付け方だが、Movable TypeやWordPressなど有名なBlogソフトは対応している。
Install (DISQUS)

ただ、このBlogのようにそういうものにあてはまらないものもある。しかしJavaScriptを利用して簡単に取り付けることが出来る。

Universal Codeをコピペするだけですね。

<div id="disqus_thread"></div>
<script type="text/javascript">
    <!--
    var disqus_shortname = 'hdmr'; // required: replace example with your forum shortname
    var disqus_identifier = '{CEID}';
    var disqus_url = '{LOGURL}';
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    //-->
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

これを貼り付けるに当たって{LOGTITLE}の中身を変えたり{LOGURL}の追加をしたのでBlognplusでそのまま貼り付ければ動くわけではないが、

とりあえずこんな風にDISQUSへ登録したフォーラム名、追加でID・URLを書くだけでいい。

こうすればとりあえずコメントできるようになる。

このときこのBlog自体のコメント機能は消したが、過去のコメントがあればDISQUSのコメント欄の後に表示されるようにしておいた。


Settingで設定するべきことだが、まずコメントできるユーザーの条件をWho Can Comment?で定める。

Anyoneではアカウントなしでもコメントできてしまうが、Registered onlyにしとけばなんしかログインしないとコメントできなくなる。

DISQUSではTrackbackにも対応しているが、これについてはBlogにTrackback機能が付いてるならおそらくそちらの方がよいだろう。

というわけでここではチェックを外している。

それとAkismetというチェックがあるが、これはAkismetという有名なSPAMコメント対策サービスを使うかどうかということ。

チェックを入れれば使えるのかというとそうではなくてAPIキーを取得する必要がある。

Personal siteは$0~120で使えるそうですので、とりあえず無料で登録しといて損はなさそう。


ただ、これだけではコメント数や最近のコメントについて表示できないので残念だ。

まずコメント数の表示を行う方法ですが、まずページのURLに#disqus_threadと付けたリンクを用意しておく。

そして先のUniversal Codeの後ろの方にあるComment countのコードをheadの中に貼り付ける。

そしたら自動的にそのリンクの文字がコメント数に置き換えられる。

このコメント数のフォーマットはSettingのAppearanceのComment Count Linkで変えることができる。

次に最近のコメントについてだが、これはToolsのCodeのコードをコピペすればいい。

CombinationのDefault tab viewをRecentにしたもののコードをはっている。


さて、ここからがBlogを見ているみなさんに関係のあるこのシステムの使い方である。

まずログインが必要なのだが、ログインしようとするとDisqus,Google,Twitter,Facebook,Yahoo,OpenIDと並んでいる。

このうちDisqusに既に登録している人はDisqusで、Google・Twitter・Facebookのアカウントを持ってる人はそれぞれあるのでログインすれば早い。

ただ、問題はYahoo!でこれはアメリカのYahoo!のことでYahoo! JAPANのことではない。なのでこれは使えない。

Yahoo! JAPAN・mixi・はてな・Livedoorあたりのアカウントを持ってる人は次のOpenIDと書かれているのを選べば使える。

このとき打ち込むURLだが、

  • Yahoo! JAPAN : http://www.yahoo.co.jp
  • mixi : http://mixi.jp
  • Livedoor : http://livedoor.com
  • はてな : http://www.hatena.ne.jp/(ユーザー名)/

さらに表示名は最初に指定してやる必要がある。OpenIDからは読み取れないようだ。

ただ、表示名はログイン時に決める度に変わるし、画像は変更できなさそうだし、不便なことは多そうだ。

OpenIDを使うことも出来るぐらいに思っておくのがよいのかもしれません。

まぁTwitter使ってる人も多そうだし、Gmail使ってたりしてGoogleのアカウント持ってる人も多そうだけどね。


見るとLikeというボタンがあるが、これ1つでLikeだと示すことができてこちらに伝わってくる。

コメント残すのめんどくさいけどとりあえずいいねってときはこれすればいいんじゃないですかね。

はてな界隈だとはてなスターを付けるんだと思うけど。

コメントは文字だけでなく画像も貼り付けられるらしい。いまいち使い道は思いつかんが。

これで記事を通じた交流が深まればと思ってるけど、書いてる僕自身あんまりコメント残さんのでなんとも。