YoungYoung

サイトトップ横、「Author's voice」の部分の表示はtwitter badgeを使ってるんですが、使っていくうちに「URLを貼り付けた際デレーっと文字列がそのまま出ちゃう」「@から始まる個人宛のレスも表示しちゃう」ってところで悩んでて、

・グラフィカルなブログパーツをつかわずシンプルにtwitterを表示したい
・URLはリンク付きの状態で短く表示したい
・@から始まる返信は表示しない

というのが出来ないか調べていたら、まさに！という感じでカスタマイズ方法が。
Twitterのつぶやき取得方法変更(RSS→JSON)
おおお感謝感謝。
あと他にも参考にしたサイトがあったんですがそっちはリンク貼っていいのかわからんかったので；
他にもネット上で悩んでる人がいるかもしれないのでカスタマイズについて書いておきます。

<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 + '&amp;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>

はあ、これですっきり！

感動的なくらい求めていたカタチに辿り着けました。ありがとうございました。最高！

いえいえお役に立てたようならなによりです！

» twitterをReply投稿抜きでサイドバーに表示

このブログのサイドバーに貼ってあるtwitterのつぶやきについて何件か 質問をいただきましたので、表示方法を紹介しますね。 以前はtwitterのオフィ...