サイト内の記事をツイート数でランキングにするスクリプト

ひろゆき

2011.05.25

Web制作

サイト内の記事をツイート数でソートし、ランキング形式で出力してくれるjsを、弊社エンジニアチームが作ってくれたので紹介します！

概要

サイト内の記事をツイート数でソートして、ツイート数の多い順番に一覧として出力します。
形式はリスト（dl dt dd）形式で、dlにツイート数、ddに記事urlにリンクされている記事タイトルが表示されます。

JSコード

以下jsコードになります。

<script language="JavaScript" type="text/javascript">
//perpage　取得件数を設定
//q にURLをsite:hogehoge.com形式で入れる
//window　期間を指定
var req = "http://otter.topsy.com/search.js?perpage=20&callback=?"+
    "&window=a&q=site:hogehoge.com";

function renderTweets(res) {
	//console.log(res);
	var i, tweet, len = res.list.length, container = $('#tweet_rank');
	if(!len){$('<dt />').text("tweetがありません。").appendTo(container);return;}

	res.list.sort ( function (b1, b2) { return b1["trackback_total"] < b2["trackback_total"] ? 1 : -1; } );
	//表示件数を調整する場合は、for文のlenで制御
	for(i=0; i<5/*len*/; ++i) { //表示が5行なので5で固定
tweet = res.list[i];
var count = $('<dt />')
			.text(tweet.trackback_total + " tweets");
		var title = tweet.title;
		//タイトル文字数を丸める処理
		if (title.length>30) title = title.substring(0,29) + "…";
		var text = $('<a>')
			.attr({ href: tweet.url, target: "_blank" })
			.text(title);
		var text = $('<dd class="tweet-title">')
			.append(text);
		$(container)
			.append(count)
			.append(text);
	}
}
$(document).ready(function() {
	$.getJSON(req, function(res){ renderTweets(res.response); });
});
</script>

解説

まずは上記のコードを

<head>
</head>

に追加します。
1.perpageに取得件数を追加する
上記のコードでは20という値が設定されています。
変えなくても動作しますが、一覧表示したい記事の数より大きい数字にする必要があります。
2.hogehoge.comの部分をサイトのurlに変更します。
3.#tweet_rankが入ってる部分に任意のIDを設定します。