各ソーシャルブックマークサービス(SBM)のブックマーク数画像表示APIを調べた

ブックマーク数画像表示API

GYM Search にも「del.icio.us」「はてなブックマーク」「livedoor clip」「Yahoo!ブックマーク」の各ブックマーク数を表示したんだけど、それぞれ表示される画像の仕様や呼び出し方が異なっていて戸惑いました。

「ブックマーク数画像表示API」はブログに簡単に貼付けられてナンボだと思うので、この仕様のバラバラさ加減はどうかと思うわけです。そこで、取りあえず各SBMサービスの仕様をまとめて調べてみました。
(ブックマーク数画像呼び出しの部分だけにフォーカスしてますので、周辺情報省略しています。ご了承下さい。)

まずは、ブックマーク数画像を表示するためのURLを調べました。

1)del.icio.us ブックマーク数画像呼び出しURL

[2008/08/24 追記]
Deliciousのリニューアルに伴い、旧画像APIが使用できなくなりました。
手前味噌ですが、新Deliciousに対応したAPIを作りましたのでそちらをご利用下さい。
Delicious2.0 の被ブックマーク数画像取得APIを作りました

del.icio.us には公式の画像APIが用意されていませんが、非公式(非サポート?)で画像を呼び出す事ができます。
参考: del.icio.us でのブックマーク数を画像で取得できるようになったらしい - HsbtDiary (2007-03-22)
参考: del.icio.us でのブックマーク数を画像で取得できるようになったらしい(2) - HsbtDiary (2007-03-24)

<img src="http://del.icio.us/feeds/img/savedcount/{MD5_HASH(URL)}?aggregate" />

リダイレクト先の数字画像URL

http://images.del.icio.us/static/img/feeds/savedbyothers/{万の位}/{千の位}/{百の位}/{十の位}/{ブックマーク数5桁}.gif

重要なポイントとしては、URLをMD5ハッシュに変換してから渡さなければいけない事があります。
MD5はJavaScript(md5.js)でも、Perl(Digest::MD5)でも、Ruby(Digest::MD5)でも、PHP(md5)でも関数で比較的簡単に変換可能ですが、ちょっと面倒ですねぇ。

それからリダイレクト先の画像URLも工夫がみられます。物理的なファイル置き場を一つのディレクトリに最大100個までになるように桁毎にディレクトリを自動で分割しています。
また、ブックマーク数のファイル名は5桁に満たない場合は左に0埋めされています。(「1」の場合は「00001.gif」な感じ)

2)はてなブックマーク ブックマーク数画像呼び出しURL

はてなブックマークでは公式に3つのサイズの画像が用意されています。
参考: ブックマーク数を画像で取得する API の公開について - はてなブックマーク日記 - 機能変更、お知らせなど

<img src="http://b.hatena.ne.jp/entry/image/{URL}" /> <!-- デフォルトはnormal -->
<img src="http://b.hatena.ne.jp/entry/image/large/{URL}" /> <!-- 大 -->
<img src="http://b.hatena.ne.jp/entry/image/normal/{URL}" /> <!-- 中 -->
<img src="http://b.hatena.ne.jp/entry/image/small/{URL}" /> <!-- 小 -->
※URLに「#」を含む場合は、「%23」に変換が必要です。

リダイレクト先の数字画像URL

http://b.hatena.ne.jp/images/users/large/{ブックマーク数5桁}.png
http://b.hatena.ne.jp/images/users/normal/{ブックマーク数5桁}.png
http://b.hatena.ne.jp/images/users/small/{ブックマーク数5桁}.png

3サイズ用意されている事と、URLをそのまま渡すのが特徴です。

リダイレクト先の画像はdel.icio.usと違って1ディレクトリにあるようですね(内部でさらに細かいディレクトリにリダイレクトしている可能性はありますが)。既に「ls」コマンドきかないんじゃ…。
ブックマーク数のファイル名は5桁に満たない場合は左に「0埋め」されています。(「1」の場合は「00001.png」な感じ)

3)livedoor clip ブックマーク数画像呼び出しURL

livedoor clip では公式に3つのサイズの画像が用意されています。
参考: クリップ数を画像で取得する API - livedoor クリップ まとめサイト - livedoor Wiki(ウィキ)

<img src="http://image.clip.livedoor.com/counter/{URL}" /> <!-- デフォルトはsmall -->
<img src="http://image.clip.livedoor.com/counter/large/{URL}" /> <!-- 大 -->
<img src="http://image.clip.livedoor.com/counter/medium/{URL}" /> <!-- 中 -->
<img src="http://image.clip.livedoor.com/counter/small/{URL}" /> <!-- 小 -->
※URLに「#」を含む場合は、「%23」に変換が必要です。

リダイレクト先の数字画像URL

http://image.clip.livedoor.com/img/users/large/{ブックマーク数5桁}.png
http://image.clip.livedoor.com/img/users/medium/{ブックマーク数5桁}.png
http://image.clip.livedoor.com/img/users/small/{ブックマーク数5桁}.png

詳細ははてなブックマークと一緒なので割愛します。

4)Yahoo!ブックマーク ブックマーク数画像呼び出しURL

Yahoo!ブックマーク では公式に3つのサイズの画像が用意されています。
参考: 便利ツール : 「ブックマーク人数表示」画像 - Yahoo!ブックマーク
参考: 各社ブログ向けYahoo!ブックマークのブログパーツ設置方法 - Yahoo!ブックマーク スタッフブログ

<img src="http://num.bookmarks.yahoo.co.jp/image/large/{URL}" /> <!-- 大 -->
<img src="http://num.bookmarks.yahoo.co.jp/image/medium/{URL}" /> <!-- 中 -->
<img src="http://num.bookmarks.yahoo.co.jp/image/small/{URL}" /> <!-- 小 -->

リダイレクト先の数字画像URL

http://thumbnail.yimg.jp/number/large/{ブックマーク数}
http://thumbnail.yimg.jp/number/medium/{ブックマーク数}
http://thumbnail.yimg.jp/number/small/{ブックマーク数}

Yahoo!ははてななどと違って、ブックマーク数画像のファイル名を「0埋め」しません。

5)buzzurl ブックマーク数画像呼び出しURL

buzzurl では公式に画像が用意されています。
参考: ECナビ デベロッパー ネットワーク: ブックマークユーザー数イメージ取得API
参考: Buzzurl [バザール] / ソーシャルブックマーク

<img src="http://api.buzzurl.jp/api/counter/v1/image?url={URL}" />
あるいは
<img src="http://api.buzzurl.jp/api/counter/{URL}" />

リダイレクト先の数字画像URL

http://cdn.buzzurl.jp/static/image/num/{ブックマーク数}.gif

Yahoo!と同じく、ブックマーク数画像のファイル名を「0埋め」しません。
(CDN使ってるんですね・・・当たり前か)

6)fc2ブックマーク ブックマーク数画像呼び出しURL

fc2ブックマーク では公式に画像が用意されています。(公式の説明ページは見つかりませんでした)
参考: Fブ カウンターを設置:ポエツ | poets

<img src="http://bookmark.fc2.com/image/users/{escape(URL)}" />
※URLはURLエンコードを推奨しています

リダイレクト先の数字画像URL

http://bookmark.fc2.com/icons/{ブックマーク数5桁}.png

はてな、livedoorのようにブックマーク数が5桁になるように「0埋め」します。

各SBMの ブックマーク数画像スタイル比較

次に、表示されたブックマーク数画像の見た目について表形式で比較してみます。

サービス名 画像 種類 高さ
del.icio.us GIF 17px フォント=白/背景=青
数による変化なし
はてなブックマーク(大) PNG 15px [1〜9] フォント=薄い赤/背景:薄いピンク
[10〜] フォント=濃い赤/背景:濃いピンク
はてなブックマーク(中) PNG 13px
はてなブックマーク(小) PNG 11px
livedoor clip(大) PNG 20px [1〜2] フォント=薄い青/背景:薄い水色
[3〜9] フォント=濃い紫/背景:薄い紫
[10〜] フォント=濃い赤紫/背景:薄い赤紫
livedoor clip(中) PNG 16px
livedoor clip(小) PNG 12px
Yahoo!ブックマーク(大) PNG 20px [1〜] フォント=黒/背景:ピンク〜赤
無段階に背景色の赤が濃くなる
Yahoo!ブックマーク(中) PNG 17px
Yahoo!ブックマーク(小) PNG 15px
Buzzurl GIF 12px [1〜2] フォント=青(細)/背景:白
[3〜9] フォント=青(太)/背景:薄い水色
[10〜] フォント=青(太)/背景:濃い水色
FC2ブックマーク PNG 12px [1〜2] フォント=青/背景:薄い水色
[3〜9] フォント=青/背景:中くらいの水色
[10〜] フォント=青/背景:濃い水色

del.icio.usは呼び出し方も特徴的ながら、画像も一つだけ白抜きのタイプで独特。
はてな、LD、Y!は仲良く3サイズ選べます、微妙にサイズが違う。

それから、各サービスとも色の濃淡で人気度を表していますが、概ね10以上を人気としているようです。
LD、Buzzurl、FC2は[1~2]でもさらにグラデーションさせてますが、これはユーザ総数が少ないために一桁usersのエントリーがたくさんあるための対処と思われます。


色の濃淡は一覧で見た方が分かりやすいので、別ページに並べてみましたのでご参考下さい。
画像スタイル

調べて思った事

調べた中では、Yahoo!とBuzzurl以外はブクマ数が5桁までしかないので仕組み上最大値は「99999」って事になってしまいます。
実際、かなりブクマ数が多いと思われるFlickrのdel.icio.usでのブクマ数は「40000」(2008/01/24現在)ちょいだった。
まあ、大丈夫だろうという考え方もあるけど、物理的に足りなくなった時にどうするんだろ。

その点、Yahoo!は後進ながらもスゴいと思った。
呼び出し方もIMGとSCRIPT両方が用意されていたり、人気を表す背景色が無段階(だと思う)にグラデーションしていたり。
何よりもともと囲っているユーザ数のアドバンテージを活かしてか、もの凄い数のブクマ数がすでにある。例えば、Yahoo!Japanのトップページは「100000」人越えてます(2008/01/24現在)。桁が一個違うのです。

まとめ

このエントリー書くのに1週間くらいかかっている気がするorz
そもそもなんでこんな事調べたかっていうと、冒頭に書いた各SBMのバラバラなAPIを統一するサービス(リダイレクターというかプロキシというか)ができないかなぁと思ったわけで。
って作る前からネタばらししたら誰か先に作っちゃうかもしれないけど。

いや、非常に便利だろうと予想できるし、自分自身がそういうサービス欲しいんだけど、パフォーマンスが求められるので今のレンサバじゃキツいだろうなぁとか漠然と思っていたりして。
そんなわけで、気が向いたら誰か作っちゃって下さいw

それから、同じようにSBMのまとめエントリーは何個かあって参考にさせてもらいました。
この場を借りて感謝します。
Big Sky :: 個人的ソーシャルブックマークサービスの歩き方
ソーシャル・ブックマーク・サービスの被ブックマーク数取得まとめ/楽

はてブ数1000越え記念に、はてブカウンターの使い方を調べた

同じカテゴリーの記事

このページの一番上に戻る
  • Facebook
  • Twitter
  • Tumblr
  • Instagram
  • miil