やっと私もツイッターを使用することになりました。

ツイッターっていうのは、ポツリポツリとつぶやけるウェブサービスで、いろんな人とフォローしあったりもできてコミュニケーションツールとしてもなかなか楽しめます。

で、このツイッターを自分のサイトに表示するということを javaScript で実現してみます。

jQuery を使用した juitter という Ajax があるのですが、試したところ表示が不安定な（たまに表示されないつぶやきとかがある）ので、twitter.js を今回は使用します。

juitter の表示はエフェクトの設定や検索、キャッシュリフレッシュなどの機能がてんこ盛りで、表示するユーザーが複数いる場合とか、キーワード検索などに使用したい場合はお勧めです。

で、今回は自分のだけなので twitter.js での作業内容を掲載します。

HEAD内に以下のソースを入力します。

<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script type="text/javascript">
getTwitters('tweet', {
id: 'ツイッターのID',
count: 10, //リストの数
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>' //表示するソースの指定
});
</script>

BODY内に以下のソースを入力。

<div id="tweet">
<p><img src="/images/load.gif" alt="ローディング用画像" /><p>
<p><a href="http://twitter.com/ツイッターのID">早く見たい場合はこちらから</a></p>
</div>

表示されるソースはリストで表示されるのでスタイルシートでは ID「tweet」のリストでつぶやきごとにマージンやボーダー、バックグラウンドなどのプロパティを指定してレイアウトしちゃいましょう。

#tweet li {
margin-bottom:　5px;
}

※2010年6月6日　この内容に少し解りやすくしたものを追記しました。
Twitter をサイトに表示する（追記）