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用のブログパーツを探していたのですがシンプルな＠非表示物がなく諦めかけていた所、こちらの記事にたどり着きました。
おかげで無事に設置が出来ました。本当にありがとうございました！

コメントありがとうございました！
やっぱり@から始まるつぶやきの非表示はしたいですよね。
これ公式で対応して欲しいですねー；

参考にさせていただきました。
助かりました〜。
このあたりの…ていうかWEB全般の知識がゼロなものでして(；´Д｀)

ブログにリンク貼らせてもらったんですが、
マズかったですか？
マズイのであれば削除するのでお知らせください。

トラックバックが上手くいかなかったんですよ。
fc2ブログ、TBがうまくいかない……わたしだけかな…

リンクつきでご紹介あざーす！
YoungYoungはリンクはフリーなんでTOPページじゃなくても全然OKです。
画像直リンクとかじゃなければｗ

あーFC2は何故かトラックバックが上手く受信出来ないことが多々あるんですよね…。
ちょっとスパムフィルタゆるくしてみたんですがどうでしょうか？

はっ……！！いけましたトラックバック！
ありがとうございます！！つД｀)･ﾟ･｡･ﾟﾟ･*:.｡

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

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

» twitterをサイドバーに表示する（＠発言抜き）

twitterの自分発言（ツイート）をブログに表示するスクリプト（ブログパーツ？）設置メモ。返信（＠発言）は非表示。 java script + CSS ...

» 【自分用メモ】Twitter ブログパーツ

自分用備忘録です。すいません。 すーぐ忘れちゃうので。 Twitter活用術ページ Twitter / あなたのサイトにウィジットを貼りまし...