2010/12/02

Twitter のタイムラインを表示する for Blogger

私の趣味のブログ（Team Hige）では、記事の上に Twitter のタイムラインを表示しています。デザイン的にイマイチではありますが、それはさておき、これを表示するための方法を書いておきます。

まず、Blogger にログインしておきます。
その状態で http://twitter.com/about/resources/widgets（リンク切れ） に行き、表示するウィジェットを作ります。 サイトに合わせてデザインなどを修正したあと、「完了＆コード取得」を押すと、以下のような "Add to Blogger" ボタンが出てくるので、簡単に Blogger のガジェットとして追加することができます。

ちなみに、私のサイトではヘッダ・フッタを消して、 Follow me ボタンを表示しています。
フッタ等を消す方法は Twitterウィジェットが生成するタグとCSS （もげる人） を参考にさせてもらいました。
このとき、Blogger では <style> タグの中に改行が入ってしまうと、うまく動かないようですので、ご注意ください。
以下に実際に使用しているコードを挙げておきます。
<style type="text/css">#twtr-widget-1 .twtr-hd, #twtr-widget-1 .twtr-ft { display: none; }</style>
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript">
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 3,
  interval: 6000,
  width: 468,
  height: 120,
  theme: {
    shell: {
      background: '#ffffff',
      color: '#000000'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#3778cd'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
}).render().setUser("yusuke_n").start();
</script>
<div style="display:block;text-align:right;">
<a href="http://www.twitter.com/yusuke_n"><img src="http://twitter-badges.s3.amazonaws.com/follow_me-b.png" alt="Follow yusuke_n on Twitter"/></a>
</div>

0 件のコメント:

コメントを投稿