[広告] テストデータ生成なら疑似個人情報ジェネレータ!! (People to People Communications 株式会社)
[広告] 疑似個人情報ジェネレータで個人情報漏洩対策!! (People to People Communications 株式会社)
携帯向けサイト | 過去の記事
気になるニュースや時事の話題を毎朝配信!世界と日本の未来を分析します。デジモノや料理の情報、WQXGAサイズの壁紙も。

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

| コメント(0) | トラックバック(0)

このページでは、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_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%;
}

とするだけで、と言う感じに見映えが変わります。


4. 関連記事

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

トラックバック(0)

このブログ記事を参照しているブログ一覧: 自分のページにTwitterのつぶやきを表示する方法まとめ [javascript]

コメントする

コメントしても反応がない場合は、気が付いてないだけですので、Twitterなどでつっついてください。









    [広告] IL MILIONE ~世界の風景100撰~ 特大サイズ壁紙集 (People to People Communications 株式会社)