Twitterのタイムラインを表示するブログパーツ（ウィジェット）を使っています。いくつかの種類がありますが、本家のTwitter / ウィジェットをカスタマイズしています。

自分のつぶやきのタイムライン

このTwitter / ウィジェットから、「自分のサイト」をクリックし、あとはウィザードに従って出来たコードを貼りつけます。このサイトの場合は、次のモジュールテンプレートを「ブログツール」作成し、「2カラムのサイドバーモジュール」にインクルードさせています。

<h2>ブログツール</h2>
<div class="widget-content">
<div id="twtr-profile-widget"></div>
<script type="text/javascript" src="http://widgets.twimg.com/j/1/widget.js"></script>
<script type="text/javascript">
new TWTR.Widget({
  profile: true,
  id: 'twtr-profile-widget',
  loop: true,
  width: 155,
  height: 240,
  theme: {
    shell: {
      background: '#ff8000',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  }
}).render().setProfile('自分のID').start();
</script>
</div>

「2カラムのサイドバーモジュール」への記述

<$mt:Include module="ブログツール"$>

インデックステンプレートでtwtr-widget.cssファイルの作成をします。名前は「スタイルシート: twtr-widget.css」として作りましたが、テンプレートの設定で出力ファイル名は「css/twtr-widget.css」、テンプレートの種類は「カスタムインデックス」とします。
オリジナルのtwtr-widget.cssに

.twtr-widget h3 {border:0;background:none;clear:none;padding:0;margin:0;color:#fff;}
.twtr-widget h4 {border:0;background:none;clear:none;padding:0;margin:0;}

を追加したほか、フォントサイズをいじくっただけです。

/**
 * Twitter - http://www.twitter.com
 * Copyright (C) 2009 Twitter
 * Author: Dustin Diaz (dustin@twitter.com)
 *
 * V 1.0.8 Twitter search/profile widget with a variety of options to customize
*/
.twtr-widget h3 {border:0;background:none;clear:none;padding:0;margin:0;color:#fff;}
.twtr-widget h4 {border:0;background:none;clear:none;padding:0;margin:0;}
.twtr-widget{position:relative;font-size:10px!important;font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;zoom:1;}.twtr-widget .twtr-spinner{width:14px;height:14px;position:absolute;background:url(http://widgets.twimg.com/j/1/spinner.gif) no-repeat;top:3px;right:3px;}.twtr-inactive{display:none;}.twtr-widget a img{border:0!important;}.twtr-doc{overflow:hidden;width:100%;text-align:left;font-weight:normal;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}.twtr-bd{padding:0 1px;}.twtr-widget .twtr-tweet-wrap{padding:6px 8px;overflow:hidden;zoom:1;}.twtr-widget .twtr-tweet{border-bottom:1px dotted #ddd;overflow:hidden;zoom:1;}.twtr-widget .twtr-tweet a.twtr-reply{visibility:hidden;}* html .twtr-widget .twtr-tweet a.twtr-reply{visibility:visible;}.twtr-widget .twtr-tweet:hover a.twtr-reply{visibility:visible;}.twtr-widget-profile img.twtr-profile-img{display:block;float:left;width:31px;height:31px;border:0!important;}.twtr-widget h3,.twtr-widget h4,.twtr-widget p{margin:0!important;padding:0!important;line-height:1.2!important;width:auto!important;}.twtr-widget-profile h3,.twtr-widget-profile h4{margin:0 0 0 40px!important;}.twtr-widget h3{font-size:13px!important;font-weight:bold!important;}.twtr-widget h4{font-size:11px!important;}.twtr-widget i{font-size:9px;font-style:normal;display:block;margin-top:2px;zoom:1;}.twtr-hd{padding:10px;position:relative;zoom:1;overflow:hidden;}.twtr-timeline{-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;position:relative;overflow:hidden;z-index:2;height:225px;}.twtr-widget .twtr-tweet:last-child{border-bottom-width:0;}.twtr-ft{position:relative;}.twtr-ft div{overflow:hidden;padding:10px;zoom:1;}.twtr-ft span{float:right;text-align:right;}.twtr-ft a{float:left;display:block;}.twtr-ft span a{float:none;}.twtr-avatar{width:40px;height:40px;float:left;overflow:hidden;display:block;}.twtr-img{height:25px;width:25px;}.twtr-img img{width:30px;height:30px;}.twtr-tweet-text{margin-left:40px;}.twtr-doc a{text-decoration:none!important;}.twtr-doc a:hover{text-decoration:underline!important;}

「HTMLヘッダー」テンンプレートに次のようにcssへのリンク記述をします。

<link rel="stylesheet" href="<$mt:Link template="スタイルシート: twtr-widget.css"$>" </li>

または、メインのcssでインポートさせます。

@import url("twtr-widget.css") screen;

以上で再構築すれば完成です。

お気に入りのつぶやきを表示

お気に入りのつぶやきを表示させるには、「自分のサイト」から「Faves Widget」を選びます。生成されたソースは次のようになります。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'faves',
  rpp: 10,
  interval: 6000,
  title: 'The best of Twitter according to',
  subject: 'ユーザー名',
  width: 160,
  height: 300,
  theme: {
    shell: {
      background: '#ff8000',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#43c43f'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
}).render().setUser('ユーザーID').start();
</script>

Flash版とHTML版

http://twitter.com/badgesでも作成可能です。「Other」をクリックすると、Flash版とHTML版が選べます。

HTML版だと以下のようなソースが生成されます。

<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/ユーザーID" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザーID.json?callback=twitterCallback2&amp;count=5"></script>