Twitterの最新のツイートを表示させるウィジェット

Twitter のプロフィール情報（プロフィール押した時に表示される発言一覧）を表示するウィジェットをブログ（MTOS）に貼ってみる。

まずは、ウィジェットの HTML を取得する必要がある。

Twitter活用術→ウィジェットの画面（http://twitter.com/widgets）にアクセスする。
ちなみにこの画面、うちの InternetExplorer8 on Windows Vista Business SP2 の環境では正常に表示されない。
左の「Widgets for...」のメニューが表示されないのだ。
つーことで、俺は Firefox でアクセスした。

で、「自分のサイト」の「プロフィールウィジェット」を選択する。
設定画面が開くので、自分の環境に合わせて設定を行う。
俺は、「デザイン」で色を自分のブログに合わせ、「サイズ」で横幅をブログの右ペインの幅に収まるように、250→198 に変更。そして、ディフォルトでは 4つである表示するつぶやきの数を 5つにした。「Preferences」の「Number of Tweets」のところね。

そして、「完了＆コード取得」ボタンを押せば、HTML が生成される。

ここから後は、MTOS のウィジェットの貼付手順どおりに作業をすればいい。
「Nike+ のブログツールをサイドバーに」を参考にしてみてちょ。

取得した HTML ソースは、おきまりの <div> タグで囲っておくこと。

（例）

<div class="widget-twitter widget">
    <div class="widget-content">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 5,
  interval: 6000,
  width: 198,
  height: 300,
  theme: {
    shell: {
      background: '#e3b200',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#2e230b',
      links: '#f03c28'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('Shar6507').start();
</script>
    </div>
</div>

いやぁ、簡単ですねえ。MovableType へのウィジェットの追加。