[jQuery] はてなブックマーク数/ユーザー/コメントをコンパクトに表示するプラグイン

はてなブックマーク件数取得API用のプラグインを作ったばっかりなのにあれですが、
はてなブックマークエントリー情報取得APIを利用すればブックマーク件数だけでなく、ブックマークしたユーザーやコメントもJSONPで取得できるですよね。
すっかり忘れていました。

戯れにjQueryのプラグインを作ってみました。


デモ:

読み込んでいます。しばらくお待ちください...

Google Code: jquery-hatenabookmark-entry
http://code.google.com/p/jquery-hatenabookmark-entry/

» ダウンロード
» ダウンロード (圧縮版)


準備：

上のダウンロードリンクからお好きな方を選んでダウンロードしてください。
もともと超軽量なので、どちらでもほとんど同じです。

ダウンロードしたファイルをアップロードします。
(レンタルサーバーを借りている方はFTP等でサーバー上へ、ファイルをアップロードできるブログサービスで利用する場合はそのファイルアップロード機能を利用して)

アップロードしたファイルをインクルードするようHTML内に下のように記述すれば準備完了です。

<script type="text/javascript" src="jquery.hatenabookmarkentry.js"></script>

※ ファイルのパス/ファイル名は自分の環境に合わせてください。
※ プラグインのJavascriptをインクルードする前にjQuery(1.3.x系推奨)をインクルードする必要があります。

jQueryを準備していない方はGoogle AJAX Libraries APIを利用したほうが早いかもしれません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

使い方：

HTML:
エントリ情報を表示する要素を用意します。

<div id="container"></div>

Javascript:

<script type="text/javascript">
  $(document).ready(function () {
    $('#container').hatenaEntry('http://www.mudaimemo.com');
  });
</script>

これだけで指定されたURLのはてなブックマークエントリー情報を表示することが可能です。


オプション:

プラグインの第1引数はURL、第2引数にオプションを指定することができます。

$('#container').hatenaEntry('http://www.mudaimemo.com', {
  comment: false,
  limit: 10
});

callback
function / null / 独自のコールバック関数を指定することができます。

icon
boolean / true / ユーザーのアイコンを表示

username
boolean / true / ユーザー名を表示

tags
boolean / true / タグを表示

comment
boolean / true / コメントを表示

timestamp
boolean / true / ブックマークされた日を表示

headerBgColor
string / #2C6EBD / ヘッダーの背景色

headerColor
string / #ffffff / ヘッダーの文字色

userColor
string / #0000DD / ユーザー名の文字色

tagColor
string / #6666cc / タグの文字色

timeColor
string / #666666 / ブックマーク日の文字色

limit
integer / 7 / 表示件数

headerLabel
string / "ブックマークしているユーザー" / ヘッダーのラベル

useJsonlite
boolean / false / jsonliteエンドポイント(/entry/jsonlite/)を利用するか

onLoad
function/ null / ブックマークがロードされた時のコールバック関数