@soraiyのjquery.twitterTrackback.jsを改良してみた。

• Twitter で記事について言及したツイートを30秒で誰でも簡単に取得して一覧にできる jQuery プラグインを書いてみたよ

で公開されていたスクリプトを導入して使わせていただいているのだけれど、なぜかFirefox3.5とiPhoneでうまく表示されなくて困っていました(ちなみに全ブラウザで動作確認したわけではありませんが、IE8、Firefox4、Safariでは動いていました)。

いろいろと調べていると、Twitterの公式ツイートボタンと関係があるっぽい。ツイートボタンを消してみたり、ツイートボタンより上にtwittertrackbackを表示させる要素を動かすと表示されたので、コンフリクトしてるのかな？

だけど、デザインとか変えたくなかったので、jQuery名前空間に関数を定義してプラグイン化したらどうだろうと思い試したところ、Firefox3.5とiPhoneでも表示されるようにできました。

以下ソース。

jQuery(function(){
	jQuery.fn.twitterTrackbackList = function(post){
		var topsyOtterapi = 'http://otter.topsy.com/trackbacks.js';
	
		var dispId = this;
		var tweetHtml = '';
	
		jQuery.ajax({
			type: 'GET',
			url: topsyOtterapi,
	    	cache: false,
			dataType: 'jsonp',
			data: {
				perpage: '100',
				order: 'date',
				url: post.url
			},
			success: function(trackbackData)
			{
				tweetHtml += (
					'<h3>このエントリーの Twitter からのトラックバック<span class="entryTracbackNum"> (' + trackbackData.response.list.length + ') </span>' +
					'<span class="entryTrackback"><a href="' + trackbackData.response.topsy_trackback_url + '">' +
					'トラックバックページへ飛ぶ</a></span></h3>'
				)
				if(trackbackData.response.list.length == 0) {
					tweetHtml += ('<p>このページにはまだ Twitter からのトラックバックはありません。</p>');
				} else {
					jQuery.each(trackbackData.response.list, function(n)
					{
						tweetHtml += (
							'<li class="tweet' + n + '">' +
								'<a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a>' +
								'<ul class="section">' +
									'<li class="nick"><a href="' + this.author.url + '">' + this.author.nick + '</a></li>' + 
									'<li class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</li>' +
									'<li class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></li>' + 
								'</ul>' +
							'</li>'
						);
					});
				}
				jQuery(dispId).append('<ul>' + tweetHtml + '</ul>');
			},
			complete: function() {
			}
		});
	};
});

で、以下のような感じで実行（#twitterTrackback内に表示する場合）。

jQuery(function(){
	jQuery('#twitterTrackback').twitterTrackbackList({
		url: '<?php the_permalink(); ?>'
	});
});