Weboo! Returns.

任意のページに、はてなブックマークのコメントを表示するjQueryプラグインを作ったので公開。JavaScriptが動作する環境ならば、簡単に自分のサイトの好きな場所に、そのページについた"はてブコメント"を下のサンプルのように表示することができます。 → 実稼働サンプル

使い方は次の通りです。

1.ダウンロード

jquery.hatebshow.js をダウンロードして、サーバ上に配置します。

2.scriptタグ

1.で設置したjsファイルを読み込むscriptタグを表示したいページのソースに記述します。jQuery本体も忘れずに読み込むようにしてください。

<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.hatebshow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hatena_bookmark").hatebShow()
});
</script>

※hatebShow()の引数にtrueを指定すると、コメント本文があるブックマークだけを表示することもできます。 例：$("#hatena_bookmark").hatebShow(true)

3.表示場所を用意する

ブックマークのコメント一覧は、#hatena_bookmarkの要素内に表示されます。また、#hateb_countにはブックマーク数が表示されます。例えば、次のようにします。

<div id="hatena_bookmark">
  <h3><img src="http://d.hatena.ne.jp/images/b_entry.gif" />
  このエントリーのはてなブックマーク (<span id="hateb_count">-</span>)
  </h3>
  <!-- ここに表示されます -->
</div>

4.スタイルを指定する

次のようなスタイルを指定してあげると、オリジナルっぽい表示になります。

#hatena_bookmark ul {
  background-color:#EDF1FD;
  border-top:1px solid #5279E7;
  list-style-position:inside;
  margin:0;padding:8px 5px;
}
#hatena_bookmark ul li {
  list-style-type:circle;
}
#hatena_bookmark ul li a {
  color:#00E;
}
.hb_tag {
  color:#66C;
}

もともと自分のサイトで使うために作ったものですが、はてなダイアリー以外を使っている人には有用だと思うのでjQueryプラグインにしました。del.icio.usとlivedoorクリップ、POOKMARKあたりにも対応していきたいと思っています。それから、特に表示件数の制限は設けていませんが、はてなのAPI自体が115件までしか返してくれないので、1,000件超えとかしても問題ないと思います。多い日も安心。