• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


この記事は ウェブル 様の記事を参考にさせていただきました。

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

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

はてブでの人気記事一覧を作る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>';
		}
	});
});
出力部分のレイアウトや文言は変更の上、このファイルを hotentry.js などの名前で保存し、サーバへアップします。


hotentry.js ファイルの設置

jQuery ファイルと一緒に、hotentry.js ファイルを設置します。
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./hotentry.js"></script>
※ <head> 内でも </body> の直前でもどちらでも動きます。


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

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

はてなブックマーク数の多い順に記事一覧を出力した場所に、以下の1文を追記します。
 
<div id="hotEntry"></div>
 
※ID は hotentry.js 内で指定したID です。




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください