任意のページに、はてなブックマークのコメントを表示する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件超えとかしても問題ないと思います。多い日も安心。
)
)
', '/media/images/blog/080217_thinkpad6.jpg'))
)
)
