自分のページにTwitterのつぶやきを表示する方法まとめ [javascript]

このページでは、Twitterでつぶやいた内容を、javascriptのみで、自分のページに表示する方法を解説する。

このページでも右上に表示させていますが、Twitterのつぶやきを自分のページに表示させるのは、とても簡単です。

1. javascriptの埋め込み

以下の javascript をページに記入します。変更しなければいけないのは、

• Twitterのユーザ名　（例：BabaTaka）
• つぶやきを何個表示するか　（例：1個ならcount=1）

の2点です。

   <script type="text/javascript"
       src="http://twitter.com/javascripts/blogger.js">
   </script>
   <script type="text/javascript"
       src="http://twitter.com/statuses/user_timeline/ユーザ名.json?callback=twitterCallback2&count=1">
   </script>

javascriptを埋め込む場所はどこでも良いです。RinGoon POP!!では、ページの最後の方に書いています。

2. HTMLの追加

次のようなHTMLを、自分のページに追加します。場所は、Twitterのつぶやきを表示したい場所です。

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

以上で完成です！

3. スタイルシートで見栄えを良くする

これだけだと

• Twitterでつぶやいた内容・・・ 30 minutes ago

といった風情で、ちょっと見映えが面白くないので、スタイルシートを適用してみましょう。例えば、

#twitter_update_list {
   list-style: none;
   width: 76px;
   height: 136px;
   margin: 0;
   padding: 24px 4px 0px 13px;
   background: url(http://bit.ly/3AoQ9a) no-repeat;
   font-size: 80%;
}

とするだけで、

• Twitterでつぶやいた内容・・・ 30 minutes ago

と言う感じに見映えが変わります。

4. 関連記事

■bitly API (javascript) を使ってTwitterボタンを設置する方法まとめ