yoppa.org

Blog

Twitterのブログ貼り付けメモ

Twitterから提供されている方法(オフィシャル版)

  • HTML + Javascript版
    • シンプルにHTMLのみを出力。リスト形式で指定した個数の投稿を列挙する。
    • 書き出されたHTML全体が、<div id="twitter_div">で囲まれているので、#twitter_idをセレクタにしてCSSでデザインすることで、自由にカスタマイズ可能。
  • Flash版
    • 2つのバージョン
    • Interactive
      • 指定した個数の投稿を表示、スクロールバーで上下に
    • Display-only
      • 一つずつ、投稿を表示
  • 作成方法
    • http://twitter.com/badges/ にアクセス、作成したいidでログインする。
    • "Where do you want to put it?" の選択を"Other"にしてContinue
    • Flash or HTMLを選択
    • Flash
      • Interactice or Display-onlyを選択
      • プレビューを確認しながら、パラメータを調整
      • テキストエディト欄に表示されているHTMLコードをコピーして、自分のページにペースト
    • HTML
      • 表示する投稿数、タイトルを設定
      • テキストエディト欄に表示されているHTMLコードをコピーして、自分のページにペースト

出力サンプル：HTML+ Javascript版


HTMLソース

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/tadokoro" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/tadokoro.json?callback=twitterCallback2&amp;count=5"></script>

出力サンプル：Flash版 – Interactive

HTMLソース

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0" width="290" height="350" id="TwitterWidget" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="userID=9986412&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml">
<embed src="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" quality="high" bgcolor="#000000" width="290" height="350" name="TwitterWidget" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="userID=9986412&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml"/>
</object>

出力サンプル：Flash版 – Display-only

follow tadokoro at http://twitter.com

HTMLソース

<div style="width:176px;text-align:center">
<embed src="http://twitter.com/flash/twitter_badge.swf"  flashvars="color1=16594585&type=user&id=9986412"  quality="high" width="176" height="176" name="twitter_badge" align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br>
<a style="font-size: 10px; color: #FD3699; text-decoration: none" href="http://twitter.com/tadokoro">follow tadokoro at http://twitter.com</a></div>

Twitterから提供されている別の方法(HTML + Javascript)

  • Twitterで提供されている別のウィジット
  • Javascriptを使用
  • Twitter / Widgetsにアクセス http://twitter.com/widgets
  • "Widgets for…" で "My Website" を選択
  • "Profile Widget" を選択
  • 各種設定を調整
    • Settingで"Username" を設定
    • Preferenceでプレビューで見ながらパラメータを調整
    • Appearanceで色を設定
    • Dimensionsでサイズを設定
  • 調整が完了したら"Finish & Grab Code"をクリック
  • テキストエディト欄に表示されているHTMLコードをコピーして、自分のページにペースト

出力サンプル


HTMLソース

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#eeeeee',
color: '#666666'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#0000ff'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('tadokoro').start();
</script>

その他、サードパーティー製