Twitter Badge を貼ってみる

no extension

トップページに Twitter Badge を貼ってみる。 最初は Flash Badge にしてたんだけど， デザインがイマイチ。 なので， 地味に最新の「さえずり」のみを JavaScript で取得して表示するようにしてみた。

Twitter Badge に載っている JavaScript コードを見ると， 以下の URL で JSONP 形式のデータが取れるらしい。 

http://www.twitter.com/statuses/user_timeline/4104801.json?callback=twitterCallback&count=1

4104801 の部分はユーザごとに値が違うので注意。 callback はコールバック関数を， count は取得するデータの数を指定できるようだ。 サンプルでは単純に JSONP データをインクルードしてるようだけど， それじゃあ面白くないので， 「入門 JSON 3 -- JSONP とコールバック関数」 で紹介した JSONscriptRequest クラスを使ってみる。 

<script type="text/javascript" src="/js/jsr_class.js"></script>
<div>
<p><span id="mytwitter"></span></p>
</div>
<script type="text/javascript">
var myId = "4104801";
var oTwitter = new JSONscriptRequest("http://www.twitter.com/statuses/user_timeline/" + myId + ".json?callback=twitterCallback&count=1");
oTwitter.buildScriptTag();
oTwitter.addScriptTag();
function twitterCallback(data) {
  var span = "<a href=\"http://twitter.com/" + data[0].user.screen_name + "\">Recent twitter</a> » " + data[0].text;
  document.getElementById("mytwitter").innerHTML = span;
  oTwitter.removeScriptTag();
}
</script>

myId の値をユーザごとに書き換えればほぼそのまま使えるはず。 まぁ HTML の整形は人それぞれだと思うけど。

あっ， あと個別ページに TwitThis ボタンもつけてみた。 よろしければネタ振り用にご利用ください。