Arun's note

子供服を中心としたソーイングライフログ
<< SB カテゴリ/月別/検索結果でインデックス表示 | TOP |

twitterをサイドバーに表示する(@発言抜き)

【2013.07.17.】 TwitterAPIのバージョンが1.1に完全移行したため、以下の方法は使用不可能となりました。


唐突に twitter デビューしてみました。これを機に、右カラム(navi_area)で使用していた SereneBach 標準装備の「ちょっと一言」プラグインを終了し、最新ツイートを表示するよう仕様変更しました。 java script でタイムラインデータ(~.json)を取得&加工(html吐き出し)、 CSS でスタイル指定しています。


 【参考URL】



 【仕様概要】


  • @発言(RT/QTについても)非表示

  • http~から始まるリンクは[URL]表示に変換

  • TwitPic経由の画像はサムネイル表示

  • 日付は「月/日」形式(時間は非表示)

  • 表示件数指定(当ブログでは最新3件)

  • CSSでスタイル指定

  • Firefox3とIE8で表示確認

  • (ハッシュタグについては未テストです)



以下、スクリプトを転載します。
おかしなところ等、コメント欄や「ひとこと送信」からご連絡いただけると助かります。



テンプレートの navi_area 内、 topmemo ブロック内に以下の記述。topmemo は「ちょっと一言」プラグイン用のブロックでトップページにのみ表示されます。


<div class="twit"><div id="twitter"></div></div>



テンプレートの </body> タグ直前に以下を記述。太字部分は適宜変更。
 ├ topmemo ブロックを記述することでトップページでのみ読みこまれる
 └ </body> 直前に記述することで読み込み順序を後回しにする
自分の発言「最新30件」分のデータを取得する設定になっています。
@発言が30件以上続いた場合、リストに何も表示されなくなります。
利用状況に応じて件数を変更してください。


<!-- BEGIN topmemo -->
<script type="text/javascript" src="外部スクリプト(~.js)"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザー名.json?callback=twitterCallback&amp;count=30"></script>
<!-- END topmemo -->

【2012.10.18.追記】
Twitterの仕様変更が気になりつつ放置していたらデータ取得
ができなくなりました。とりあえず取得できるようにするには
タイムライン取得元を以下に変更すればよいようです。
https://api.twitter.com/1/statuses/user_timeline/ユーザー名.json?callback=twitterCallback&amp;count=30



外部スクリプト(~.js)の内容。
取得したタイムラインデータより「@」で始まるもの、「T @」を含むもの、をのぞき、発言時間が最新のものより指定表示件数分のリストを吐き出します。


function twitterCallback(result)
{
var item_max = 表示件数;
var timeline_list = new Array();
var out = '<ul id="twitul">\n';
var cnt = 1;
for (var i = 0; i < result.length; i++)
{
var text = result[i]['text'];
if (text.match(/T @/) || text.match(/^@/))
{
continue;
}
if (cnt > item_max)
{
break;
}
cnt++;
var created_at = result[i]['created_at'].split(" ");
var post_date = created_at[1] + " " + created_at[2] + ", "
+ created_at[5] + " " + created_at[3];
var date = new Date(post_date);
var mon = '0' + (date.getMonth() + 1);
mon = mon.substr(mon.length - 2);
var day = '0' + date.getDate();
day = day.substr(day.length - 2);
var out_date = mon + "/" + day;
text = text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
if(url.match(/\/twitpic.com\/([0-9a-zA-Z])/)){
var img_url = url.replace(/http\:\/\/twitpic\.com\//, function(img_url){
return 'http://twitpic.com/show/mini/';
})
return '<br><a href="'+url+'" target=_blank alt="twitpic"><img border=0 class="twitpic" src="'+img_url+'" align="right"></a>';
}else{
return '<a href="'+url+'" target=_blank">[URL]</a>';
}
})
hash_tags = text.match(/\s*\#[a-zA-Z0-9]*[\s\r]/g);
if (!!hash_tags) {
for (var j = 0; j < hash_tags.length; j++) {
hash_tag = hash_tags[j];
hash_tag = hash_tag.replace(/^ /, "");
hash_tag = hash_tag.replace(/[\s\n]$/, "");
hash_tag_name = hash_tag.replace(/^#/, "");
hash_url = '<a target="_blank" href="http://search.twitter.com/search?q=%23' + hash_tag_name + '&amp;lang=ja">' + hash_tag + '</a>';
text = text.replace(hash_tag, hash_url);
}
}
out += '<li>' + text + '<font class="twitdate"> ' + out_date + ' </font><br clear=all></li>\n';
}
out += '</ul>\n';
document.getElementById('twitter').innerHTML = out;
}



CSS。各タグについてのスタイルを適宜指定。


.twit { レイアウト枠 DIV タグ }
.twitdate{ ツイート内日付の FONT タグ }
.twitpic{ TwitPicサムネイル画像 IMG タグ }
#twitul { ツイートリスト UL タグ }
ul#twitul li { ツイートリスト LI タグ }


自分のCSS記述には自信がないのでソースは載せませんでした。DIVタグで外枠の横幅を指定、ULタグにmarginマイナス値設定で左よせ(インデント相殺)、LIタグでフォント&ボーダーの点線を指定しています。

 
Serene Bach
-
| comments (0) | trackbacks (1) |

Comment

Comment Form









Trackback

Trackback URL :

続・twitterのシンプルなサイドバー表示 | YoungYoung
以前「twitterのシンプルなサイドバー表示」という記事を書いたんですが、UR...
2011/05/08 15:40