Twitterのつぶやきを自サイトに表示させるツールはいろいろあり、本サイトでも最近の自分のつぶやきを表示にしています。

今回は自サイトのブログ記事について、その記事のURLを含んだつぶやきがあったらそのコメントをコメント主のアイコン付で自動表示するようにしてみました。

用意するもの

twitterer_anywhere.ja.js

MOONGIFTのなかのひとがこちらのページで公開してくださっています。
ブログにtwitterのつぶやきを表示する「twitterer anywhere」:MOONGIFT

また、これを使っているサイトのソースを参考にしました。
参考（マネ）させていただいたのはこちらのサイトです。
webDICE（「骰子の眼」の記事末尾部分）

改変後のjsファイルサンプル

function __twitterer_anywhere_receiver(json) {

    try {
	var html = "";

	var escapeHTML = function(str) {
	    str = str.replace("http://","");
	    str = str.replace("&","&");
	    str = str.replace("\"",""");
	    str = str.replace("'","'");
	    str = str.replace("<","&lt;");
	    str = str.replace(">","&gt;");
	    return str;
	}

	if(json.response.total == null) {
	    html += "<h3>Twitterの反応</h3>";
	    html += "<ul><li>";
	    html += "つぶやかれていません (ﾉД`)";
	    html += "</li></ul>";
	}

	else {
	    html += "<h3>Twitterの反応（<a class=\"twitterer_anywhere_go\" href=\"http://topsy.com/tb/"+escapeHTML(twitterer_anywhere_url)+"\" target=\"_blank\">"+json.response.total+"</a>）</h3>";

		html += "<ul>";

	    for(var i = 0; i < json.response.list.length; ++i) {
		var jt = json.response.list[i];
		    html += "<li><div class=\"tweet_box\"><div class=\"tweet_box_left\"><img width=\"48\" height=\"48\" src=\""+jt.author.photo_url+"\" /></div><div class=\"tweet_box_right\"><p><a class=\"twitter_name\" href=\""+jt.author.url+"\" target=\"_blank\">"+jt.author.name+"</a><a class=\"twitter_posttime\" href=\""+jt.permalink_url+"\" target=\"_blank\">"+jt.date_alpha+"</a></p><p>"+jt.content+"</p></div></div></li>";
		}

		html += "</ul>";
	}

	var wrap = document.createElement("div");
	wrap.innerHTML = html;
	document.getElementById("twitterer_anywhere").appendChild(wrap);
    } catch(e) { }
}

function __twitterer_anywhere_loade() {
    try {
	if((typeof document.getElementById("twitterer_anywhere"))!="undefined") {
	    var script = document.createElement("script");
	    script.setAttribute("type","text/javascript");
	    if((typeof twitterer_anywhere_url)=="undefined") twitterer_anywhere_url = location.href.replace(/#.*/,"");
		script.setAttribute("src","http://otter.topsy.com/trackbacks.js?url="+twitterer_anywhere_url+"&callback=__twitterer_anywhere_receiver");
	    document.body.appendChild(script);
	}
    } catch(e) { }
}

try {
    if(window.addEventListener) {
	window.addEventListener("load", __twitterer_anywhere_loade, false);
    }
    else {
	window.attachEvent("onload", __twitterer_anywhere_loade);
    }
} catch(e) { }

上記jsファイルをheaderで読み込ませます。
あとはTwitterコメントを表示したい部分に下記を挿入すればOKです。

<div id="twitterer_anywhere"></div>

相変わらずJavaScriptは全然わからないので、書いては消し、書いては消しの作業でした。おかしな挙動をする可能性もありますのでご注意ください (；´Д`)

前年比1,382%って尋常じゃない勢いでユーザー人口が増えまくっているtwitterですが、私もやっとfollowが増えてきておもしろくなってきました。せっかくだからこのブログのサイドバーに最近のつぶやきを表示したい！って思っていろいろ探してみましたが、いまいちこれだ！ってツールが見つかりませんでした。

イメージはTwitter badgesのDisplay-only widgetが一番近いんだけど、ベースカラーの選択しかできないのが微妙でした。

次のような機能が理想

• 自分のつぶやきのみを最近の1件のみ表示
• ページ送りで次のつぶやきを順次表示
• アイコンは表示しない

んで、いろいろ探した結果、
Twitterをブログに表示！ページ送り付き★ – Not satisfied!!
を参考にマネすることにしました。簡単2STEPです。

STEP.1 javascript

javascriptは全然わからないのでほぼコピーw
twitter.jsとして外部ファイルにします。

twdata =new Array();
var page = 0;
var fin = 0;
var end = 0;
var kazu = 10;
function relative_time(time_value) {
  time_values = time_value.split(" ");
  time_value = time_values[1]+" "+time_values[2]+", "+time_values[5]+" "+time_values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset()*60);
  var dt = new Date();
  dt.setTime(dt.getTime() - (delta*1000));
  yy = dt.getYear();
  mm = dt.getMonth() + 1;
  dd = dt.getDate();
  dy = dt.getDay();
  hh = dt.getHours();
  mi = dt.getMinutes();
  ss = dt.getSeconds();
  if (yy < 2000) { yy += 1900; }
  if (mm < 10) { mm = "0" + mm; }
  if (dd < 10) { dd = "0" + dd; }
  dy = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")[dy];
  if (hh < 10) { hh = "0" + hh; }
  if (mi < 10) { mi = "0" + mi; }
  if (ss < 10) { ss = "0" + ss; }
  return yy+"."+mm+"."+dd+" ( "+hh+":"+mi+" )";
}

function twitterCallback(obj) {

	var i = 0;
	var j = 0;
	while (i < obj.length && j < kazu ){
	if(obj[i].text.substr(0, 1) != '@'){
		twdata[j] = obj[i];
		j++;
	}
	i++;
	}
	fin = j;

	hyouji();
}

function hyouji(){
	var tw = document.getElementById('twitter');
	var dsp = 1; //１ページに表示する数
	var cnt = 0;
	end = 0;

	for ( i= page * dsp ; cnt<dsp ; i++) {
		tw.innerHTML += '<p class="tw_text">'+twdata[i].text+'</p><p class="tw_day"> '+relative_time(twdata[i].created_at)+'</p>';
		cnt++;
		if(fin-1 == i){
		end = 1;
		}

	}

}

function twbtn(flg){
var tw = document.getElementById('twitter');
	if(flg=='next' && end == 0){
	tw.innerHTML ='';
	page++;
	hyouji();
	}
	else if(flg=='back'&& page > 0){
	page--;
	tw.innerHTML ='';
	hyouji();
	}
}

document.write(
'<scr'+'ipt '
+'type="text/javascript" '
+'src="http://www.twitter.com/statuses/user_timeline/ユーザー名.json?callback=twitterCallback&count=10">'
+'</scr'+'ipt>'
);

STEP.2 html

つぶやき表示用タグとページ送り用ボタンをhtml側に追記します。

<div id="twitter"></div>
-
-
<a href="javascript:twbtn('next');">next</a>
<a href="javascript:twbtn('back');">back</a>

あとはお好みにcssで微調整してできあがり！特定のつぶやき（＠付）が反映されないけどあとは気に入ってます。（サイドバー右上にいます）

twitter.jsの呼び出しをheader側でやったら1件目のつぶやきがうまく表示されなかったのでfooter側にしたらちゃんと動作しました。他にも未知の不具合があるかもしれません （;´Д｀）