ナイルさまイベント
ナイルさまイベント

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

ひろゆき


サイト内の記事をツイート数でソートし、ランキング形式で出力してくれる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を設定します。

html側の設定

実際にリストを表示したいところに下記の様にコードを追加します。

<dl id="tweet_rank">
</dl>

これで設定は完了です。ツイートでソートされた記事一覧が出力されるはず。。。

参考URL

Topsy’s Otter APIを使ってTweet数の多い記事をブログから抽出してリスト表示