2008年04月22日

ブログの各記事にはてなブックマークのコメント表示をつけました

masuidriveさんのところで、はてなブックマークのコメントを
ブログに表示するjavascript が公開されていました。
　
■masuidrive on rails - ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js
http://blog.masuidrive.jp/index.php/2008/04/17/released-hatena-bookmark-anywhere/
　
実はわたし自身もこれに似たものを作りたいなと思っていたのですが、
自分で作るよりもはるかにエレガントでしたので拝借することに
いたしました。masuidriveさん ありがとうございます <( _ _)>
　
この hatena-bookmark-anywhere.js は、javascript自身で
通信を行ってはてなAPIを叩いてブックマークコメントを取得します。
記事本文の読み込みとは 非同期で通信 しますので、数秒送れて表示
されるような感じですが、逆にいえば、これによって記事の読み込みが
遅くなるといったことはほとんどありません。
　
組み込み方はいたって簡単。
masuidriveさんのブログ記事に掲載されている hatena-bookmark-anywhere.js
という.jsファイルをダウンロードして、自分のサーバスペースに置いておきます。
そして記事HTMLのほうで、
　
　
　<script type= "text/javascript">/*<![CDATA[*/
　var hatena_bookmark_anywhere_limit = 100; // 表示する件数
　var hatena_bookmark_anywhere_style = true; // trueでデフォルトスタイル falseを設定するとCSSでスタイルの指定が可能
　var hatena_bookmark_anywhere_collapse = true; // trueにすると、コメントの書いてないブクマを表示しない。指定しない場合は、表示件数を超えた場合のみコメントを表示しない
　var hatena_bookmark_anywhere_url; // 表示するURL 未指定の場合、現在のページ
　/*]]>*/</script>
　<script src="[設置パス]hatena-bookmark-anywhere.js" type="text/javascript" charset="utf-8"></script>
　<div id="hatena_bookmark_anywhere"></div>
　
　
のように記載するだけです。各js変数で表示件数を変えたりできます。
わたしはコメントのないブクマを表示しないオプションである
hatena_bookmark_anywhere_collapse を true にしてみました。
　
　
実際に表示されるブクマコメントはこんな感じです。
　
■慣習が生み出す情報連鎖 - ２ちゃんねる型スレッド管理のしくみ
http://c-kom.homeip.net/review/blog/archives/2007/01/post_320.html

　
実際、ブログの記事には はてなブックマークにしか コメントが付かない
ということも多いですので、こうして並べて見られるようになるのは
とても助かりますね(=´∇｀=)