jQueryで言及(トラックバック)されているツイートを表示する。

Topsy APIを利用してjsonデータを取得する。

Topsyはツイート数を表示するパーツやツイートを閲覧できるサービスですが、Topsy APIを利用することで自分のサイトにこれらの情報を表示することができます。
Topsyが提供しているブログパーツは決まっていますのでjsonデータとして取得すればサイトに合ったデザインができます。

Topsy’s Otter API

今回利用するのはtrackbacksというやつです。
ブラウザで下記URLにアクセスしてみましょう。

http://otter.topsy.com/trackbacks.js?url=[URL]

[URL]は取得したいページのURLに置き換えてください。
言及されているツイートが表示されているはず。

取得したデータを表示する。

htmlにTwitterを表示する場所を指定します。
dl要素をid=twitterでマークアップしてみました。

html

		<dl id="twitter"></dl>
	

次にjavascriptです。
jsonデータを取得するにはページごとにURLを指定いないといけないんですが、「document.URL」でそのページのURLを表示できるみたいです。
なので[URL]としてた部分にこいつを入れればいけそうですね。
あとは取得したデータをappendで追加していけばとりあえず表示できます。

javascript

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		(function($) {
			$(function() {
				$.getJSON("http://otter.topsy.com/trackbacks.js?url="
				+ document.URL + "&callback=?",
				function(data){																										
					var res = data.response.list;
					for(var i in res){
						$("#twitter").append(
							"<dt>" + res[i].content + "</dt>" +
							"<dd><img src=" + res[i].author.photo_url+ " width='24' height='24' /> @<a href='" + res[i].author.url + "' target='_blank'>" + res[i].author.name + "</a> " + res[i].date_alpha + "</dd>"
						);					   
					}
				});
			});
		})(jQuery);
	</script>
	

「data.response.total」とかすればつぶやき数が表示できるみたいです。
ちなみにデータの取得とかは相手のサーバーの具合もありますので、最後のbodyタグの直前に行うとよろしいようです。