自サイトの Twitter での注目エントリーを Topsy API を使ってランキング形式で表示

Category : jQuery

JavaScript の勉強その4。
Topsy の API を使って Twitter での自サイト注目エントリーをランキング形式で表示したい。
今回デモページはありません。

JSONP

サイトごとの注目エントリーの JSONP は
http://otter.topsy.com/search.js?q=site:example.com
で取得できます。
パラメータなどは下記のリンク先を参照してください。

並び順は Topsy が出したスコア順なので、Tweet の多さ順にならない場合もあります。

JSONP は以下のようなものになります。
今回はYahoo!ニュースを全期間指定で取ってみました。

({
	"request": {
		"parameters": {
			"window": "a",
			"q": "site:headlines.yahoo.co.jp",
			"perpage": "2"
		},
		"response_type": "js",
		"resource": "search",
		"url": "http://button.topsy.com/search.js?perpage=2&q=site%3Aheadlines.yahoo.co.jp&window=a"
	},
	"response": {
		"window": "a",
		"page": 1,
		"total": 1000,
		"perpage": 2,
		"list": [{
			"trackback_permalink": "http://twitter.com/hatebu/status/11179773972",
			"mytype": "link",
			"content": "携帯端末、全社対応型に…総務省が制限解除要請へ(読売新聞) - Yahoo!ニュース (50 users) http://bit.ly/9yyK61",
			"trackback_date": 1269751579,
			"score": 10.6204,
			"trackback_total": 985,
			"hits": 925,
			"topsy_trackback_url": "http://topsy.com/trackback?url=http%3A%2F%2Fheadlines.yahoo.co.jp%2Fhl%3Fa%3D20100328-00000055-yom-bus_all",
			"url": "http://headlines.yahoo.co.jp/hl?a=20100328-00000055-yom-bus_all",
			"firstpost_date": 1269713788,
			"title": "携帯端末、全社対応型に…総務省が制限解除要請へ(読売新聞) - Yahoo!ニュース",
			"highlight": "??^(o)a*??c,?????a~??a*?¨c,?3/4a*?3/4a*??a*??a~??a^?¦c,??a*??c,??a~??a*?¶e'??e`§£e'??e`¦?e`??a~??i"1/4?e`^(a)?a*£^(2)??°e`??i"1/4? - <span class=\"highlight-term\">Yahoo</span>!&atilde;&#131;&#139;&atilde;&#131;&yen;&atilde;&#131;&frac14;&atilde;&#130;&sup1; (50 users) http://bit.ly/9yyK61&#8230;"
		},
		{
		......
		}]
	}
});

これから必要なものを抜き出して使います。

jQuery

上記のデータを ol 要素と li 要素でマークアップして、指定の id 内に表示します。

jQuery(function ($) {

	var opt = {
		url: 'http://headlines.yahoo.co.jp/', // サイトのURL
		time: 'a', // h:最近1時間, d:最近24時間, w:最近一週間, m:最近1ヶ月間, a:全期間
		count: 2, // いくつまで表示するか (デフォルト10, 最大50)
		del: '', // 取得したエントリータイトルから削除したい文字列
		showcount: true // ○○tweets を表示するかどうか (true/false デフォルトtrue)
	}

	// パラメータ用に整形
	var param = {
		url: opt.url.replace(/^http(|s):\/\/|\/$/g, ''),
		time: (opt.time != null && opt.time.match(/^[hdwma]{1}$/)) ? opt.time : 'auto',
		cnt: (opt.count > 0 && opt.count < 51) ? opt.count : 10
	}

	// コールバック関数
	function twiRank(data) {

		var list = '';

		// 1つもなければ終了
		if (data.response.total === 0) return;

		// レスポンスの配列数だけループさせる
		for (i = 0; i < data.response.list.length; i++) {

			// エントリーへのリンク
			list += '<li><a href="' + data.response.list[i].url + '">';

			// エントリーのタイトル (消したい文字列がない場合はそのまま)
			if (opt.del !== '') {
				list += data.response.list[i].title.replace(opt.del, '');
			} else {
				list += data.response.list[i].title;
			}

			list += '</a>'

			// tweet数(Topsyへのリンク付き)
			if (opt.showcount !== false) {
				tweets = (data.response.list[i].trackback_total > 1) ? 'tweets' : 'tweet';
				list += '<a href="' + data.response.list[i].topsy_trackback_url + '" target="_blank">'
				list += data.response.list[i].trackback_total + tweets;
				list += '</a>';
			}

			list += '</li>';
		}

		// 指定した ID 内にol要素を作ってリストを追加
		$('#twirank').html('<ol>' + list + '</ol>');

	}

	// JSONPを取得
	$.getJSON('http://otter.topsy.com/search.js?q=site%3A' + param.url + '&window=' + param.time + '&perpage=' + param.cnt + '&callback=?', twiRank);

});

opt.del を入れたのは、ブログなんかだと各タイトルにブログ名が入るので自分のサイトに置いた場合に見た目が悪くなるからです。
うちの場合は ' | Unformed Building' を指定して、エントリーのタイトルのみに置換します。

パラメータ用に整形と書かれている箇所について。
http:// があったからといって問題はないんですが、念のため消しています。
また、URL の最後のスラッシュがあると上手く検索されないようなので、それも消しています。
他の2つは指定できるもの以外のパラメータを入れられた場合のデフォルト値。ちゃんと指定するならいらないと思います。


データ量が多いので、他にも色々できそうです。
もしこのコードを使う場合、見た目は class 名とか適当につけて自分でスタイル指定してね。

本当はプラグインに挑戦してみようと思ってたんですが、これでいいのか不安なのでやめておきました。
少しでも自信が持てたら作ります。

Leave a Reply