[JS]jQuery ではてなブックマーク数が多い順に記事を一覧で出力する方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

Javascript・jQuery

はてブ

スポンサード

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

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

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

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

はてブでの人気記事一覧を作る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 です。

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

スポンサード

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

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

hotentry.js ファイルの設置

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

コメント

コメントを残すコメントをキャンセル

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

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

hotentry.js ファイルの設置

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

コメント

コメントを残す コメントをキャンセル

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

コメントを残すコメントをキャンセル