[jQuery]はてなブックマーク数が多い順に記事を一覧で出力する方法

Javascript・jQuery

2013.04.152014.01.25

はてブで人気の記事を自分のブログに一覧として表示する方法が紹介されていました。

記事のタイトルとブックマーク数をリスト形式で出力する方法です。

はてブでの人気記事一覧を作るJavascriptファイル
hotentry.js ファイルの設置
フロントへはてブ記事一覧の出力

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

ウェブル様で公開されているコードの中で、3行目のvar siteurl =はご利用のブログURL に変更します。

また、4行目のvar id = 'hotEntry'もご利用環境に合わせてIDを指定できます。

var j$ = jQuery;
j$(function() {
	var siteurl = '【ブログのURL】';
	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="">';
						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>はてブ人気記事一覧</h2><ul>' + content + '</ul>';
		}
	});
});

var j$ = jQuery;

j$(function() {

var siteurl = '【ブログのURL】';

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="">';

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>はてブ人気記事一覧</h2><ul>' + content + '</ul>';

}

});

出力部分のレイアウトや文言は変更の上、このファイルをhotentry.jなどの名前で保存し、サーバへアップします。

hotentry.js ファイルの設置

jQueryファイルと一緒に、hotentry.jsファイルを設置します。

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./hotentry.js"></script>

1 2	<script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./hotentry.js"></script>

※<head>内でも</body>の直前でもどちらでも動きます。

フロントへはてブ記事一覧の出力

あとはフロント画面側の処理ですが、

はてなブックマーク数の多い順に記事一覧を出力した場所に、以下の1文を追記します。

<div id="hotEntry"></div>

1	<div id="hotEntry"></div>

　
※ID は hotentry.js内で指定したIDです。

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