SBM Common API を作りました

たくさんあるSBM（ソーシャルブックマーク）サービスのユーザー数を簡単にブログに表示したり、各SBMのユーザー数をJSON(P)形式でまとめて取得できるAPIを作ってみました。
はてなブックマーク、del.icio.us、livedoorブックマーク、Yahoo!ブックマーク、Buzzurl、FC2ブックマーク、@niftyクリップ、POOKMARK Airlines、の８つのサービスに対応しています。
これを作るキッカケは、すで書いた事があります。

冒頭に書いた各SBMのバラバラなAPIを統一するサービス（リダイレクターというかプロキシというか）ができないかなぁと思ったわけで。

via: 各ソーシャルブックマークサービス（SBM）のブックマーク数画像表示APIを調べた ::: creazy photograph

各SBMごとに呼び出しのインターフェイスが統一されていなかったり、RSSやJSONなどのAPIが用意されていなかったりするので、「なるべく多くのSBMを表示してみよう」なんて思っても調べるのが大変だったりするのです。
そこで、なるべく同じインターフェースで被ブックマーク数を取得できるようなAPIが必要となってくるわけです。
目次

1. １）各SBMの被ブックマーク数を簡単に張り付けられるブログパーツ
2. ２）各SBMの被ブックマーク数をまとめて取得できるJSON(P) API
3. ３）各SBMのブックマーク表示画面のURLにリダイレクトするURL
4. ４）各SBMのブックマーク追加画面のURLにリダイレクトするURL

１）各SBMの被ブックマーク数を簡単に張り付けられるブログパーツ

とりあえず、全部盛りで簡単にブログに設置しちゃいたい初心者向けのパーツです。

こんな感じに表示できます。
使い方
表示させたい部分に下記scriptタグを貼り付けるだけです。

<script type="text/javascript" src="http://labs.creazy.net/sbm/counter/js"></script>

このスクリプトは張り付けられたページのURLをリファラーから判断して、そのURLに対する被ブックマーク数を表示します。
下記のようなコードを出力します。

document.open();
document.write(
'<a href="{ブクマ追加URL}" target="_blank" title="〜に追加"><img src="{アイコンURL}" alt="〜に追加" border="0" /></a><span>[<a href="{ブクマ確認URL}" target="_blank">{ブクマ数}</a>]</span> '
(各SBM分繰り返し)
);
document.close();

CSSでスタイルを付けたい場合は、

<p id="sbm_buttons"><script type="text/javascript" src="http://labs.creazy.net/sbm/counter/js"></script></p>

などど、id（かclass）付きのブロック要素で囲んでおいて、

#sbm_buttons {
margin: 0;
padding: 0;
}
#sbm_buttons img {
height: 16px;
vertical-align: middle;
}
#sbm_buttons span {
font: 12px/12px Verdana,sans-serif;
vertical-align: middle;
}

のようにしてやれば良さそう。
パフォーマンスを考慮した使い方
上の例では document.write で直接書き出していましたが、SBMやこのAPIで使っているレンサバの負荷によってはレスポンスが遅くなってしまうかもしれません。
表示を止めないために、body直前でscriptを呼び出す形式も作りました。

<p id="sbm_buttons"></p>
(snip)
<script type="text/javascript" src="http://labs.creazy.net/sbm/counter/js?target_id=sbm_buttons"></script>
</body>
</html>

target_idパラメータにHTMLを流し込みたい要素のIDを入れてやれば、document.getElementById'(‘id’).innerHTML で流し込みます。
出力されるHTMLは同じなので省略します。

２）各SBMの被ブックマーク数をまとめて取得できるJSON(P) API

やりたい事は名前の通りなのでインターフェイスだけ紹介します。
リクエスト

http://labs.creazy.net/sbm/counter/json?callback={コールバック関数名}&url={URL}

callbackにはJSONPで取得したい場合のコールバック関数を指定します。
urlには被ブックマーク数を調べたいURLをURLエンコードして渡します。
レスポンス

コールバック関数名(
{ "サービス識別子" :
{ "name" : "サービス名"
,"img" : "被ブックマーク数画像URL"
,"url" : "ブックマーク詳細URL"
,"count" : ブックマーク数
,"ico" : "サービス毎アイコンURL"
},
（ブックマークサービス分繰り返し）
}
);

実際に見た方が早いと思いますので、Yahoo!JapanのJSONをご覧下さい。
・Yahoo!Japanのブックマーク数JSONP
サービス識別子には、下記８つがあります。

delicious,hatena,livedoor,yahoo,buzzurl,fc2,nifty,pookmark

というわけで、１）のブログパーツでは柔軟な出力ができないので、このAPIを使えばJSONP経由でデータを取得してJavaScriptで好きなフォーマットに成形できます。
他にも色々使い道はありそうですね。何かアイデアある人はでひ作ってみてください。

３）各SBMのブックマーク表示画面のURLにリダイレクトするURL

はてブでは http://b.hatena.ne.jp/entry/{URL} で表されるブックマーク表示画面のURLが、各SBMでバラバラなので覚えやすい様にリダイレクターを作ってみました。
URL

http://labs.creazy.net/sbm/entry?service={サービス識別子}&url={URL}

サービス識別子には、下記８つがあります。

delicious,hatena,livedoor,yahoo,buzzurl,fc2,nifty,pookmark

４）各SBMのブックマーク追加画面のURLにリダイレクトするURL

はてブでは http://b.hatena.ne.jp/append?{URL} で表されるブックマーク追加画面のURLが、各SBMでバラバラなので覚えやすい様にリダイレクターを作ってみました。
URL

http://labs.creazy.net/sbm/add?service={サービス識別子}&url={URL}

サービス識別子には、下記８つがあります。

delicious,hatena,livedoor,yahoo,buzzurl,fc2,nifty,pookmark

あとがき

とりあえず、出してしまったけどまだまだバギーな気がします。
お気付きの点があればお知らせください。
あと、同じような仕組みはすでに存在しているようですが、APIである事が重要（特にブログ利用される事を考えるとJSONP必須）だと思ったので公開に踏み切りました。
レンサバが貧弱なので、アクセス集中するとレスポンス遅れるかもしれません。
（そういう事は流行ってから心配する事にしました。）

更新履歴

[追記：2008/07/22]
SBM Common API (ver1.1) ブックマーク表示画面、追加画面のURLリダイレクターを追加
・３）４）としてブックマーク表示画面、ブックマーク追加画面のURLへのリダイレクターを公開しました。
・上記リダイレクター公開に合わせて、１）２）のAPIでレスポンスとして返すURLもリダイレクターのURLに変更しました。
・このエントリーが長くなってきたので目次とページ内リンクを作りました。
[追記：2008/08/25]
DeliciousのリニューアルにともなくAPI変更も対応しました。
自作のAPIを使用しています。
・Delicious2.0 の被ブックマーク数画像取得APIを作りました