はてなブックマークウィジェットをhackする

特定のサイトについて、はてなブックマークでブックマークされている注目／人気エントリーを、サイドバー等に表示するためのパーツです。

このウィジェットのJavaScriptを調べて、どのようにして注目／人気エントリーの情報を得ているかを見てみました。
すると、案外シンプルで、割と簡単にhackすることができました。
以下の例は、当Blogの注目／人気エントリーの情報を得て、表示形式をカスタマイズしてみたものです。

1.情報を得る方法

はてなブックマークウィジェットは、以下のURLを利用して、注目／人気エントリーの情報を得ています。
「サイトのURL」の部分には、情報を得たいサイトのURLをURLエンコードした値を入れます。

注目エントリー
http://b.hatena.ne.jp/entrylist/json?url=サイトのURL&sort=hot&callback=コールバック関数名
人気エントリー
http://b.hatena.ne.jp/entrylist/json?url=サイトのURL&sort=count&callback=コールバック関数名

いずれのアドレスも、JSONPの形式でデータを返してきます。
したがって、データを表示したいページにJavaScriptでコールバック関数を用意しておけば、その関数の中でデータを操作することができます。

また、データは以下のような形式の配列になっています。
得られるデータの件数は、最大で10件のようです。

[
    { link : エントリーのURL, title : エントリーのタイトル, count : 被ブックマーク数 },
    { link : エントリーのURL, title : エントリーのタイトル, count : 被ブックマーク数 },
    ・・・
]

2.データを表示するJavaScriptの例

冒頭にあげた例では、以下のようなコールバック関数でデータを表示しています。

var SimpleHBWidget = {};
SimpleHBWidget.showBookmarkList = function(data) {
    var i, j, html;
    html = '<p>' + SimpleHBWidget.title + '</p>';
    html += '<ul>';
    for (i = 0, j = data.length; i < j; i++) {
        html += '<li><a href="' +data[i].link + '">'+ data[i].title + '</a> <span style="padding : 0 3px; color : #ff0000; background-color : #ffcccc;">' + data[i].count + 'users</span></li>';
    }
    html += '</ul>';
    document.getElementById(SimpleHBWidget.id).innerHTML = html;
};

また、データを表示する位置には、以下のようなHTMLを入れています。

<div id="hatena_hot"></div>
<script type="text/javascript">
//<![CDATA[
SimpleHBWidget.title = '■当Blogの注目エントリー';
SimpleHBWidget.id = 'hatena_hot';
//]]>
</script>
<script type="text/javascript" src="http://b.hatena.ne.jp/entrylist/json?url=http%3A%2F%2Fwww.h-fj.com%2Fblog%2F&sort=hot&callback=SimpleHBWidget.showBookmarkList"></script>

<div id="hatena_count"></div>
<script type="text/javascript">
//<![CDATA[
SimpleHBWidget.title = '■当Blogの人気エントリー';
SimpleHBWidget.id = 'hatena_count';
//]]>
</script>
<script type="text/javascript" src="http://b.hatena.ne.jp/entrylist/json?url=http%3A%2F%2Fwww.h-fj.com%2Fblog%2F&sort=count&callback=SimpleHBWidget.showBookmarkList"></script>

お知らせ

はてなブックマークウィジェットをhackする

1.情報を得る方法

2.データを表示するJavaScriptの例

おすすめ