2009年8月13日木曜日

[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 / ブックマークがロードされた時のコールバック関数

0 件のコメント: