JavaScriptを使いdel.icio.usの被ブックマーク数を表示する

FC2BlogでFC2ブックマークの登録人数を表示するというエントリを前に書きましたが、今度はdel.icio.usの被ブックマーク数をFC2Blogで表示する方法です。基本的に海外の利用者数が多いSBMサービスですが、意外とブックマークされていることもあるので興味がある方は使ってみてはいかがでしょうか。

普通は各SBMサービスで登録人数表示用のAPIが用意されているのですが、del.icio.usは手軽に使える公式APIがないのでFC2Blogの変数とJavaScriptを利用します。(この表示方法自体も非公式もの。)ここで使うのはFC2Blogの変数ですが、同じような変数が使えるBlogサービスなら変数の入れ換えだけで流用できるかもしれません。

なお変換自体にJavaScriptを使うため、JavaScriptがOFFのブラウザ環境では表示させることはできません。

del.icio.usはひと味違う

はてなブックマークを始め、普通のSBMサービスは被ブックマーク数を比較的簡単に取得できるようになっています。FC2ブックマークは公式サイトに何も書いてないというありさまですが、それでもそのまま数を取得できるようにはなっています。

そして今回のdel.icio.usなのですが、これは少々面倒なことになっています。

楽：技林ブログ
ソーシャル・ブックマーク・サービスの被ブックマーク数取得まとめ

非公式インターフェース。。。
URLをMD5ハッシュに変換する(JavaScript=MD5.js, Perl=Digest::MD5, PHP=md5関数)必要がある。

書式：http://del.icio.us/feeds/img/savedcount/[URLのMD5ハッシュ]?aggregate

要するにそのままだと取得できなくて、URLをMD5に変換してやらないと駄目なのです。実際にdel.icio.usのブックマーク数を取得して表示してるところも多数あるのですが、大概はMovable TypeやWordPressのプラグインやCGIを使って表示しているようです。貼り付けるだけで表示できるようなものも探したのですが、残念ながら見つかりません。

ということで、JavaScriptでURLをMD5ハッシュに変換し、Blogにdel.icio.usの登録人数を表示するスクリプトを組んでみました。(正確にはURLをmd5.jsに渡しているだけ。)FC2Blogでは正常に動作することを確認しています。(ただし私はプログラムについては超素人で、JavaScriptでは昔マウスオーバーすると画像が変わるスクリプトぐらいしか組んだことがありません。失笑レベルなスクリプトなのはご勘弁を。)

FC2Blogでdel.icio.usの被ブックマーク数を表示する

具体的な手順です。

1.md5.jsをダウンロードしてFC2Blogにアップロードする

高度な JavaScript 技集からmd5.jsをダウンロードし、自分のBlogにアップロードしてください。

2.スクリプトを読み込むタグをテンプレートに書き込む

以下のソースを<head></head>の間に書き込んでください。

<script type="text/javascript" src="アップロードしたURL/md5.js"></script>

3.ブックマーク数を表示したいところにスクリプトを貼り付ける

del.icio.usの被ブックマーク数を表示したいところに、以下のソースを書き込んでください。

<script type="text/javascript">
<!--
var en_url = '<%topentry_link>';
md5_url = MD5_hexhash(en_url);
document.write('<a href="http://del.icio.us/url/'+md5_url+'" title="このエントリを含むdel.icio.us"><img src="http://images.del.icio.us/static/img/delicious.gif" style="border:0;" alt="このエントリを含むdel.icio.us" /><\/a>');
document.write('<img src="http://del.icio.us/feeds/img/savedcount/'+md5_url+'?aggregate" style="border:0;" alt="del.icio.us saved count" />');
// -->
</script>

成功すれば下記のように表示されているはずです。


余談ですが、MD5ハッシュをブラウザのJavaScriptで計算する関係上、旧型のPC環境などだと重くなる可能性はあります。また、動作チェックした環境はWindows XPでのIE6、Firefox2、Opera9.25です。その他のOSやブラウザ環境できちんと表示されるかはわかりませんので注意してください。

おまけ 他のBlogで代用できるかもしれない変数

上記のソースの緑文字の変数と同じ動作をする、いくつかのBlogサービスの変数をピックアップしてみました。そのまま置き換えることによって動く「かも」しれません。当方ではチェックのしようがないので、やるなら自己責任でお願いします。

Seesaaブログ : <% article.page_url %>
Blogger : <$BlogItemPermalinkUrl$>
livedoor Blog : <$ArticlePermalink$>
忍者ブログ : <!--$entry_link-->

参考URL
ブックマークアイコンの取り付け
独自構文解説書／変数