ブログのサイドバーにTwitterを表示した

メニュー終了

2009年7月24日

Posted by @Style : 00:57 | コメント (0) | トラックバック (0)

以前からブログのサイドバーにTwitterのつぶやきを表示してみようかなと思ってましたが、標準のウィジェットだと出力されるソースがおかしいので躊躇していました。

「Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌」の中で、JavaScriptで出力される一番シンプルな「Add Twitter to your blog (step-by-step)」を実装してみました。

やり方は、twitter.jsをダウンロードしてソースを記述するだけ。

ちなみに当ブログではスクリプト部分を以下のように記述しました。

getTwitters('tweet', { 
  id: 'atstyle', 
  count: 3, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '%text%(<a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>)'
});

ローディング画像を用意し、サンプルのhtmlを少し編集。ブログのメインページだけに表示したかったので、以下のようにサイドバーに記述。

<MTIf name="main_index">
<div id="tweet">
 <p>Please wait while my tweets load <img src="<$MTBlogURL$>webimg/indicator.gif" alt="" width="16" height="16" /></p>
 <p><a href="http://twitter.com/atstyle">If you can't wait - check out what I've been twittering</a></p>
</div>
</MTIf>

後はhead部分からスクリプトへリンク。

JavaScriptなのでサーバーに負担をかけることもありません！