twitterのシンプルなサイドバー表示
サイトトップ横、「Author's voice」の部分の表示はtwitter badgeを使ってるんですが、使っていくうちに「URLを貼り付けた際デレーっと文字列がそのまま出ちゃう」「@から始まる個人宛のレスも表示しちゃう」ってところで悩んでて、
・グラフィカルなブログパーツをつかわずシンプルにtwitterを表示したい
・URLはリンク付きの状態で短く表示したい
・@から始まる返信は表示しない
というのが出来ないか調べていたら、まさに！という感じでカスタマイズ方法が。
Twitterのつぶやき取得方法変更(RSS→JSON)
おおお感謝感謝。
あと他にも参考にしたサイトがあったんですがそっちはリンク貼っていいのかわからんかったので；
他にもネット上で悩んでる人がいるかもしれないのでカスタマイズについて書いておきます。
【2011/05/09 追記】この記事の改訂版をアップしました。
→続・twitterのシンプルなサイドバー表示
<script type="text/javascript">
function twitterCallback(result)
{
var item_max = 表示件数;
var timeline_list = new Array();
var out = '<ul>\n';
var cnt = 1;
for (var i = 0; i < result.length; i++)
{
var text = result[i]['text'];
if (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);
date.setHours(date.getHours() + 9);
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;
url_pos = text.indexOf("http",1);
url_html = '[<a target="_blank" href="' + text.substr(url_pos,256) + '">URL</a>]';
text = text.replace(/http.*/, url_html);
text = text + ' ';
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 + '&lang=ja">' + hash_tag + '</a>';
text = text.replace(hash_tag, hash_url);
}
}
out += ' <li>' + text + '</li>\n';
// out += ' <li>' + text + '<span class="period"> ... ' + out_date + '</span></li>\n';
}
out += '</ul>\n';
document.getElementById('twitter').innerHTML = out;
}
</script>
<div id="twitter"></div>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/ユーザー名.json?callback=twitterCallback"></script>
太字の部分は書き換えて下さい。
表示件数とユーザー名だけ書き換えれば動くはず（多分）。
上のは別ファイルが置けないレンタルブログなどを想定して書いてますが、
中身をtwitter.jsとか別ファイルにしてサーバーに置いて
<div id="twitter"></div> <script type="text/javascript" src="外部JavaScriptファイルのURL"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザー名.json?callback=twitterCallback"></script>
として呼び出した方がソース的に美しいかもしれません。
はあ、これですっきり！