はてなブックマーク数が多い順に自分のブログの人気記事を一覧にする方法

はてなブックマークの数が多い順に記事を一覧する jQuery のコード書いてみました。私のブログのサイドバーにホットエントリーという名前の項目がありますが、これははてブ数でソートして一覧にされています。

とても簡単で30秒くらいで出来ます。

はてブでの人気記事一覧を作る JS ファイルを作る

以下のコードを任意の名前で JS ファイルとして保存してください。変更点は var siteurl と var id の部分のみですね。自分のブログのドメインをスラッシュありで入れて、id には一覧を表示するためのボックスを入れてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var j$ = jQuery;
j$(function() {
	var siteurl = 'http://weble.org/';
	var id = 'hotEntry';
	j$.ajax({
		dataType: "jsonp",
		data: {'sort':'count', 'url':siteurl},
		cache: true,
		url: "http://b.hatena.ne.jp/entrylist/json",
		success: function (data)
		{
			var hotEntry = document.getElementById(id);
			var content = '';
			j$.each(data, function(i,item)
				{
					if(item.link != siteurl) {
						content += '<li>';
						content += '<a href="http://b.hatena.ne.jp/entry/' + item.link + '" class="resentHatebu">';
						content += '<img src="http://b.hatena.ne.jp/entry/image/small/' + item.link + '"></a>';
						content += '<a href="' + item.link + '">' + item.title + '</a>';
						content += '</li>';
					}
				}
			);
			hotEntry.innerHTML = '<h2>Hot Entry</h2><ul>' + content + '</ul>';
		}
	});
});

作った JS ファイルを読み込む

ページフッタで良いので、以下のようにコードを読み込みましょう。jQuery が既に読み込まれているなら1行目のコードは必要ないです。適当に書いたので全ての環境で動くのかは分かりませんが、ぜひどうぞ！

1
2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://weble.org/wordpress/wp-content/themes/weble_v4/js/weble.hatena.js"></script>

あとコードが結構私のサイト向けになっているので、その点に関しては修正してみてください。HTML 部分のみだったら見れば分かると思いますので頑張ってみてください。

関連記事

コメント

コメントは受け付けていません。