これまでブログに貼っていたTwitterのパーツがイマイチだったので、新しいものに付け替えてみました。
2010/2/18現在。
このウィジェットは、Twitter公式サイトから入手できます。
このサイトで、「自分のサイト」をクリックすると、ウィジェットのタイプを選べます。普通は、「プロフィールウィジェット」を選びます。
左にあるタブの「設定」は、TwitterのIDの指定です。常にログオンしている人であれば、ここにいつものIDが出ているはずです。他の人のIDも指定できます。
「Preference」、ここがちょっとわかりにくいところです。デフォルトのままでもよいのですが、少しカスタマイズしてやると、独自の味が出せます。「Poll for new results?」にチェックすると、定期的に新しいツイートを取りに行きます。「Include scrollbar」にチェックすると、収まらないツイートをスクロールして読むことができます。
「Behavior」の「Timed interval」の意味はよくわかりませんでした。プレビューでも特に変わらないようですし。ここは「Load all tweets」で全ツイートを読み込ませることにします。「Number of tweets」は表示させるツイートの数で、スクロールバーを出すなら10個ほどでも良いと思います。
「Show Avatars?」「Show Timestamps?」「Show hashtags?」は、それぞれ発言者のアバターの表示、投稿時間の表示、ハッシュタグの表示、を意味しています。これはお好みで。私はデフォルトのままです。アバター付きは少々うるさいです。
「デザイン」では背景や文字の色を変えられますが、貼り付けるブログなどのスタイルシートに合わせて設定します。このままにしておいて、あとでブログ側で貼り付けたコードを修正してもよいです。「サイズ」ではウィジェットの大きさを指定しますが、「auto width」にしておけば、幅だけは貼り付けた場所の幅によって自動的に変わります。
終わったら、「完了＆コード取得」を押せば、コードをコピーできます。このコードを、ウィジェットを置きたい場所に貼り付ければ、ひとまず作業は完了です。
私の場合はココログの「プロ」コースなので、テンプレートを直接書き換えてしまいますが、それができない場合には「リスト」などの機能を使って何とかコードを配置します（このあたりは、アフィリエイトのコードを貼り付ける方法と一緒ですね）。
私の場合、こんなコードが出ました。
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 2000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('naosan1963').start();
</script>
この場合、themeと書かれているところのshellブロックにおいて、background, color, linksを書き換えれば、ボックス上下の部分の色をカスタマイズできます。tweetsブロックでは、ツイート部分がカスタマイズできます。ここには、一般的なスタイルシートの指定が書けそうですが、フォント関係を指定しようとしたらウィジェット自体が出なくなりました。何でも書けるわけではないようです。
「features」の部分を書き換えると、あとからカスタマイズできます。意味も、上の画面と照らし合わせると、何となくわかりますね。
これで、ブログにTwitterのつぶやきをリアルタイムで載せることができるようになりました。あとは、有意義につぶやくだけなのですが、これが何とも…。
コメント