JavaScriptを使って、自サイトでの「はてなブックマーク」の人気記事一覧を表示する

Javascript

ソーシャルブックマークの「はてなブックマーク」。ここで自分のサイトの記事がどれだけブックマークされているかわかるのですが、 それをブックマーク数が多い順で並べる方法をJSで試したので、ご紹介です。

既存のブログパーツ

わざわざJSを使わなくても、ブログパーツを使えば 簡単に設置ができるのですが、デザインの柔軟性にはかけるのでJSで簡単にできないかなと思った次第です。以下がブログパーツを設置したサンプルです。

APIを呼び出す

まずはその人気エントリーを取得するAPIのアドレスが以下になります。

http://b.hatena.ne.jp/entrylist/json?sort=count&url=[サイトのURL]&callback=hatebuCallback

[サイトのURL]に自分のサイトのアドレスを。callbackの後ろはあとで書くJSのfunctionの名前に合わせます。ちなみにアクセスして中身を見るとわかるのですが、件数は最大10件で取得できる項目が

  • link ページのアドレス
  • count ブックマーク数
  • title ページのタイトル(文字数が多いと途中で...になる。)

の3つです。

実際に表示させる

データは読み込めたので、これを実際に整理して表示させます。

まずは読み込む先のHTMLを以下にしました。

<div id="hatebuList"></div>

そして、JSはこんな感じ。jQuery使ってますので先に読み込んで下さい。今回はdiv>ul>liになるようにしました。

<script>
function hatebuCallback(data){
		if(data.length == 0){
			$("#hatebuList").append("<p>データを読み込めませんでした。</p>");
		}
		else {
			$("#hatebuList").append("<ul>");

			for(i = 0 ; i < data.length; i++){
				$("#hatebuList ul").append('<li><a href="' + data[i].link + '" target="_blank">' + data[i].title +'</a>(<span>' + data[i].count + ')</span></li>');
			}

		}
}
</script>

functionの後ろをcallbackの箇所と合わせます。ifの{}中が読み込めなかった用。elseが読み込めた場合の処理。以下がそのサンプルページです。

これで自由な形で出来るので、デザインの幅が広がるかと思います。

参考サイト

おまけ

作ろうと思ったキッカケが、「ブログパーツよりJSで作った方が読み込む速度が早くなるんじゃ」だったのですが、 両方を比べてみたら、そんなに変わらなかったです。作り方が悪いとかあるかもしれませんが。