[jQuery] はてなブックマーク件数取得APIをもっと手軽に使うためのプラグイン

はてなブックマーク件数取得API がJSONPに対応しました。

皆さんご存知の通り、これまでも画像形式でブックマーク数を取得することは可能でしたが、
JSONPに対応したことでカスタマイズが楽しめるようになりました。

単純にブックマーク数を返すだけのシンプルなAPIなので、小難しい所は一切ないのですが、jQueryのプラグイン化してもっと手軽に扱えるようにしてみました。

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

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

デモ:
はてなブックマーク数 » 読み込んでいます...


準備：

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

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

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

<script type="text/javascript" src="jquery.hatenabookmarkcount.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:

aタグのhref属性にブックマーク数を取得したいURLを指定します。

<a href="http://blog.mudaimemo.com/" class="hatena"></a>

Javascript:

$(document).ready(function () {
 $('a.hatena').hbCount();
});

これだけでブックマーク数を表示することが可能です。

<a href="http://b.hatena.ne.jp/entry/blog.mudaimemo.com/" class="hatena">ブックマーク数</a>

※ デフォルトでリンク先がはてなブックマークのエントリーページに置き換わります。



オプション:

callback
コールバック関数を指定することが可能です。

$('a.hatena').hbCount({
  callback: function (count, element, url) {
    if (count > 5) {
      var style = {fontWeight: 'bold', color: '#ff0000'};
    } else {
      var style = {color: '#666666'};
    }
    $(element).css(style).text('はてなブックマーク数: ' + count);
  }
});

コールバック関数には最大3つの引数がセットされます。

count: ブックマーク数
element: 表示中のアンカー要素
url: replaceUrl(下記参照)が true の場合、はてなブックマークのエントリーページURLが渡ります。falseの場合はnullが入ります。

コールバック関数が省略された場合は以下の関数が呼ばれます。

function (i, e, url) {
  if (url)
    jQuery(e).text(i).attr('href', url);
  else
    jQuery(e).text(i);
}

replaceUrl (boolean)
trueの場合、コールバック関数にはてなブックマークのエントリーページのURLを渡します。
(デフォルト true)