YouTubeやってます!
Categories未だ未分類

TweetボタンとRT数を表示するJavascript – 第三版

Date 2010/05/04 10:46  Modified date 2015/04/05 Author Yutaka  Tags javascript jQuery twitter web service WordPress

 ブログの記事をTwitterに投稿するボタンと記事がRTされた数を表示するためのJavascriptの第三版です。RT数の取得にTOPSYのAPIを利用しています。jQueryを使用しています。基本的にWordPress仕様です。

 先日、第二版をあげたばかりですが、やっぱりhtmlの中にjavascriptのコードがあるのは美しくないなぁ、と思って書き直しました。。自分的にはほぼ最終形。

 第二版との違いは以下の通りです。

  • HTMLにjavascriptを記述しなくても良いようにした。
  • クラス名を変えた。

相変わらず、見た目も機能もこれまでのものと変わりません。

コード

javascript

 まずはjavascript。基本的にはこのまま使えます。

(function($){
	/* for twitter with topsy */
	$.fn.setTopsy = function(){
		$(this).each(function(){

			var href = $(this).attr("href");
			var regex = new RegExp("(http|https)%3A%2F%2F[a-z0-9_\.%]+$","gi");
			var url = href.match(regex);
			var self = this;

			$(this).click(function(){
				window.open(href);
				return false;
			});

			var src  = 'http://otter.topsy.com/urlinfo.js?url=' + url + "&callback=?";
			jQuery.getJSON(src, function(json){
				if ( !json.response ) return;
				var res = json.response;
				if (res.trackback_total < 1) return;
				var unit = (res.trackback_total == 1) ? 'tweet' : 'tweets';
				var atag_str = '<a href="' + res.topsy_trackback_url + '" class="topsy_rt">' + res.trackback_total + unit + '</a>';
				var atag = $(atag_str).click(function(){
					window.open(res.topsy_trackback_url);
					return false;
				});
				$(self).after(atag);
			});

		});
	};
})(jQuery);

jQuery(function($){
	// Topsy
	$("a.topsy").setTopsy();
});

HTML

 続いてHTML。
 ボタンと被RT数を表示したい場所に以下のHTMLを書きます。「@icoro」となっているところは適宜書き換えて下さい。

 WordPressのテンプレートタグを使用しているので、他のブログツールやCMSで使う場合は書換が必要です。使用しているテンプレートタグは the_ID(記事のID)、get_permalink(記事のパーマリンク)、get_the_title(記事のタイトル)の3つです。  また、記事のパーマリンクとタイトルをURIエンコードするのに、PHPのrawurlencode関数を使っています。

<!-- topsy -->
<a href="http://twitter.com/home?status=RT @icoro <?php echo rawurlencode(get_the_title()); ?> <?php echo rawurlencode(get_permalink()); ?>" class="topsy">retweet</a>

CSS

 ついでのCSS。クラス名を変更したので、第二版からの移行の場合は注意して下さい。クラス名が変わった以外は第二版と全く同じです。

/* twitter with topsy */
/* 旧 a.rt */
a.topsy {
	padding: 0 3px;
	color:#fff;
	border:1px solid #369;
	font-size: 11px;
	font-family:Arial,Tahoma,Helvetica,sans-serif;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	background:#369;
}

/* 旧 a.rt:hover */
a.topsy:hover {
	color: #fff;
	background:#58b;
}

/* 旧 a.tweets */
a.topsy_rt {
	padding-left: 2px;
	font-size: 11px;
	color: #666;
	text-decoration: underline;
}

/* 旧 a.tweets:hover */
a.topsy_rt:hover {
	color: #f63;
}

補足

 第三版では、javascriptでaタグのhref属性を見て、その中に含まれている記事のURLを取り出すようにしています。そのため、hrefのフォーマットを変更すると、機能しなくなる可能性があります。その場合は、適宜、javascriptを書き換えて下さい。

 ちなみに、hrefのフォーマットは以下のようになっています。

http://twitter.com/home?status=RT @icoro (記事のタイトル) (記事のURL)

 記事のURLが一番最後に記述されてさえいれば、その前がどんな形になっていても機能すると思います。逆に、記事のURLを一番前に持ってきたい、真ん中に持ってきたい、と言った場合は、javascriptを書き換える必要があります。7行目にある以下の正規表現を書き換えて下さい。
 何か上手く機能しない場合も7行目をチェックして下さい。

var regex = new RegExp("(http|https)%3A%2F%2F[a-z0-9_\.%]+$","gi");

編集後記

 第三版で、ついにjavascriptをHTMLから追い出すことが出来ました。URLの取得方法がちょっと確実性に欠けますが、まあ、普通に使う分にはこれでも問題ないかと思います。

 idにURLを記述してしまう方法も考えたのですが、そうすると、aタグのhrefにもURLが含まれるので、かぶってるデータが増えてしまうことになります。というわけでhrefから取得する方法を採っています。

 もし、RTにURLを含めたくない場合は(あんまりいない気がしますが)、aタグのidにURLを埋め込んで、それを取得するようにすれば良いと思います。

 自分的にはこの第三版がほぼ最終形です。
 今後、第四版を出すとしても、bit.lyに対応させるとか、コードをもっとシンプルにするとか、そんなところでしょうか。

参考

追記

2010/05/18

 コードに以下の変更を加えました。

  • htmlのretweetボタンの表示を「tweet」から「retweet」に変更した
  • javascriptの被tweet数の単位を「RT」から、被tweet数が1つの場合は「tweet」と、複数の場合は「tweets」と表示するように変更した
Back to Top