Twitterのタイムラインを表示するウィジェット
Twitterのタイムラインを表示するブログパーツ(ウィジェット)を使っています。いくつかの種類がありますが、本家のTwitter / ウィジェットをカスタマイズしています。
自分のつぶやきのタイムライン
このTwitter / ウィジェットから、「自分のサイト」をクリックし、あとはウィザードに従って出来たコードを貼りつけます。このサイトの場合は、次のモジュールテンプレートを「ブログツール」作成し、「2カラムのサイドバーモジュール」にインクルードさせています。
<h2>ブログツール</h2>
<div class="widget-content">
<div id="twtr-profile-widget"></div>
<script type="text/javascript" src="http://widgets.twimg.com/j/1/widget.js"></script>
<script type="text/javascript">
new TWTR.Widget({
profile: true,
id: 'twtr-profile-widget',
loop: true,
width: 155,
height: 240,
theme: {
shell: {
background: '#ff8000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
}
}).render().setProfile('自分のID').start();
</script>
</div>
「2カラムのサイドバーモジュール」への記述
<$mt:Include module="ブログツール"$>
インデックステンプレートでtwtr-widget.cssファイルの作成をします。名前は「スタイルシート: twtr-widget.css」として作りましたが、テンプレートの設定で出力ファイル名は「css/twtr-widget.css」、テンプレートの種類は「カスタムインデックス」とします。
オリジナルのtwtr-widget.cssに
.twtr-widget h3 {border:0;background:none;clear:none;padding:0;margin:0;color:#fff;}
.twtr-widget h4 {border:0;background:none;clear:none;padding:0;margin:0;}
を追加したほか、フォントサイズをいじくっただけです。
/**
* Twitter - http://www.twitter.com
* Copyright (C) 2009 Twitter
* Author: Dustin Diaz (dustin@twitter.com)
*
* V 1.0.8 Twitter search/profile widget with a variety of options to customize
*/
.twtr-widget h3 {border:0;background:none;clear:none;padding:0;margin:0;color:#fff;}
.twtr-widget h4 {border:0;background:none;clear:none;padding:0;margin:0;}
.twtr-widget{position:relative;font-size:10px!important;font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;zoom:1;}.twtr-widget .twtr-spinner{width:14px;height:14px;position:absolute;background:url(http://widgets.twimg.com/j/1/spinner.gif) no-repeat;top:3px;right:3px;}.twtr-inactive{display:none;}.twtr-widget a img{border:0!important;}.twtr-doc{overflow:hidden;width:100%;text-align:left;font-weight:normal;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}.twtr-bd{padding:0 1px;}.twtr-widget .twtr-tweet-wrap{padding:6px 8px;overflow:hidden;zoom:1;}.twtr-widget .twtr-tweet{border-bottom:1px dotted #ddd;overflow:hidden;zoom:1;}.twtr-widget .twtr-tweet a.twtr-reply{visibility:hidden;}* html .twtr-widget .twtr-tweet a.twtr-reply{visibility:visible;}.twtr-widget .twtr-tweet:hover a.twtr-reply{visibility:visible;}.twtr-widget-profile img.twtr-profile-img{display:block;float:left;width:31px;height:31px;border:0!important;}.twtr-widget h3,.twtr-widget h4,.twtr-widget p{margin:0!important;padding:0!important;line-height:1.2!important;width:auto!important;}.twtr-widget-profile h3,.twtr-widget-profile h4{margin:0 0 0 40px!important;}.twtr-widget h3{font-size:13px!important;font-weight:bold!important;}.twtr-widget h4{font-size:11px!important;}.twtr-widget i{font-size:9px;font-style:normal;display:block;margin-top:2px;zoom:1;}.twtr-hd{padding:10px;position:relative;zoom:1;overflow:hidden;}.twtr-timeline{-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;position:relative;overflow:hidden;z-index:2;height:225px;}.twtr-widget .twtr-tweet:last-child{border-bottom-width:0;}.twtr-ft{position:relative;}.twtr-ft div{overflow:hidden;padding:10px;zoom:1;}.twtr-ft span{float:right;text-align:right;}.twtr-ft a{float:left;display:block;}.twtr-ft span a{float:none;}.twtr-avatar{width:40px;height:40px;float:left;overflow:hidden;display:block;}.twtr-img{height:25px;width:25px;}.twtr-img img{width:30px;height:30px;}.twtr-tweet-text{margin-left:40px;}.twtr-doc a{text-decoration:none!important;}.twtr-doc a:hover{text-decoration:underline!important;}
「HTMLヘッダー」テンンプレートに次のようにcssへのリンク記述をします。
<link rel="stylesheet" href="<$mt:Link template="スタイルシート: twtr-widget.css"$>" </li>
または、メインのcssでインポートさせます。@import url("twtr-widget.css") screen;
以上で再構築すれば完成です。
お気に入りのつぶやきを表示
お気に入りのつぶやきを表示させるには、「自分のサイト」から「Faves Widget」を選びます。生成されたソースは次のようになります。
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 10,
interval: 6000,
title: 'The best of Twitter according to',
subject: 'ユーザー名',
width: 160,
height: 300,
theme: {
shell: {
background: '#ff8000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#43c43f'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('ユーザーID').start();
</script>
Flash版とHTML版
http://twitter.com/badgesでも作成可能です。「Other」をクリックすると、Flash版とHTML版が選べます。
HTML版だと以下のようなソースが生成されます。
<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/ユーザーID" 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/ユーザーID.json?callback=twitterCallback2&count=5"></script>
コメント
pettoshoppu
あ~・・・
pettoshoppu
初投稿出来たかな~