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 == 0) {
	    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は全然わからないので、書いては消し、書いては消しの作業でした。おかしな挙動をする可能性もありますのでご注意ください (；´Д`)