MovableTypeに自作のTwitter Badgeをテンプレートモジュールで貼り付ける

kwLogには自作のTwitter Badgeを貼り付けています。何で自作しているかというとデザインを自分流にしたいからです。

自宅サーバを経由する方法もありますが、jsonpを使って表示しています。blogのhtmlのソースを見ると丸わかりですが、

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/makoto_kw.json?callback=twitterCallback2&amp;count=1"></script>

を入れています。

twitterの自分のtimelineは
http://twitter.com/statuses/user_timeline/{アカウント名}.json
で取得できます。callbackパラメータを指定すればjsonpになります。発言一つだけを表示するのでcount=1をパラメータで指定しています。

実際のところ、jsonpで使うcalbackもtwitterで用意されているblogger.jsのtwitterCallback2で処理しています。

twitterCallback2で何をしているかというと、自分の発言を

<li><span>'+twitters[i].text+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>

のようにliにしてid=twitter_update_listの要素に書き込んでくれます。

なので

<ul id="twitter_update_list"></ul>

を置いておけば、その場所に更新されます。

デザインはcssでul#twitter_update_list, ul#twitter_update_list liなどを指定して変更できます。

ただkwLogではtwitterの表示のところにjavascriptをimportしてたので、

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/makoto_kw.json?callback=twitterCallback2&amp;count=1"></script>

のところでメニューの表示が止まったりしてました。

そこで、このimportはhtmlの一番下に入れることにしました。twitter badgeはMTのテンプレートモジュールにしていたので、その中に

<MTSetVar name="use_twitter_widget" value="1">

を入れて、フッターのテンプレートモジュールにて

<MTIf name="use_twitter_widget">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/makoto_kw.json?callback=twitterCallback2&amp;count=1"></script>
</MTIf>

を入れました。

これでbadgeを表示するときだけフッターに上記javascriptがインポートされるようになります。