YoungYoung

サイトトップ横、「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 + '&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は何故かトラックバックが上手く受信出来ないことが多々あるんですよね…。
ちょっとスパムフィルタゆるくしてみたんですがどうでしょうか？

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

初めまして！リプライ非表示のウィジェットを探していた所、こちらの記事を知り、早速参考にさせて頂きました！

一つご報告があるのですが、Twitpicなどを始め、「URLの後にコメントが来るツイート」の場合、URLの後の部分が全て表示されず、設置したブログパーツ上ではURLの表示だけになってしまうようです。

こういったブログパーツのカスタマイズには詳しくないので、仕様でしたらすみません…！
一応ご連絡した方が良いのかな？と思い書き込みさせて頂きました。

それでは、失礼致します。
ずっとこういうHTML形式でリプライ非表示のプログパーツを探していたので大変参考になりました…！ありがとうございました！

ああっそこにツッコミが…！
すみません気がついていたんですが解決方法がわからなかったのでそのまま放置してました；
申し訳ないです。

もし解決方法が分かれば追記します！
もし分かる方見てたらこっそり教えて下さい；

お世話になっております。
先日からブログにTwitterを表示させていたのですが、＠返信が表示されて困ってました。
＠返信を表示させたくないと思い検索していたところこちらに辿りつきました。
私の需要にぴったりで無事設置できました。ありがとうございます！

コメントありがとうございました！
お役に立てたら何よりです～(´∀｀)

はじめまして。こちらの旧版を利用させてもらっています。
恐縮ながら１つだけ質問があるのですが、
設置するとページの読み込みが若干遅くなってしまうので、軽くしたいのです。
素人考えだと、ツイートを読み込む時間を調整出来れば軽く出来そうな気がするのですが、
宜しければ何かご教授くださいませ。

こちらのはJavascriptで読み込んでるので、どうしてもそこで一旦止まってしまい、読み込みが発生して表示が遅くなるかもです。

htmlは上から順に読んでいって表示するので、回避するなら、このソースを書き込む位置を、htmlの後ろのあたりにするとかですかね…？

回答ありがとうございます。
参考にさせてもらい、別の方法をということで、
インラインフレームを使って別のページに表示させるという方法で上手くいきました。
とてもいい感じのブログパーツを作ってくださりありがとうございました。

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

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

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

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

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

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