ブログの記事をTwitterに投稿するボタンと記事がRTされた数を表示するためのJavascriptの第二版です。RT数の取得にTOPSYのAPIを利用しています。jQueryを使用しています。基本的にWordPress仕様です。
見た目も機能も以前のもの(第一版)とほとんど変わりません。ちなみに第一版との違いは以下の通りです。
- javascript非動作環境でも、Tweetボタンがjavascript動作環境と遜色なく機能するようにした。
- RT数が0の時はRT数を表示しないようにした。
- jsonのデータチェックを前よりもちゃんとするようにした。
- 出来るだけサーバサイドで処理。
出来るだけサーバサイドで処理することで、多少表示速度は上がるか？と思ったのですが、実際の所、あまり変わらないみたいです。むしろ、サーバサイドでURIエンコードすることで、出力する文字数が増えたかもしれない。(えー。)
ちょっと使って見て、もっと良い感じになりそうなら変更しようと思います。
第一版はこちらです。第二版はちょっと微妙という方も第一版は使いやすいかもです。んー、いじりやすさや使いやすさは第一版の方が優れているような気がしてきた…
コード
javascript
まずはjavascript。
第一版は書換が必要がでしたが、今回はこのままコピーして使えます。
(function($){
/* for twitter with topsy */
$.fn.setTweet = function(topsy_url){
topsy_url = encodeURIComponent(topsy_url);
var id = this.attr("id");
var tweet_link = $('#' + id + ' a').attr("href");
$('#' + id + " .rt").click(function(){
window.open(tweet_link);
return false;
});
var src = 'http://otter.topsy.com/urlinfo.js?url=' + topsy_url + "&callback=?";
jQuery.getJSON(src, function(json){
if ( !json.response ) return;
var res = json.response;
var unit = (res.trackback_total == 1) ? 'tweet' : 'tweets';
if (res.trackback_total < 1) return;
var url = '<a href="' + res.topsy_trackback_url + '" class="tweets">' + res.trackback_total + unit + '</a>';
$('#' + id).append(url);
$('#' + id + ' a.tweets').click(function(){
window.open(res.topsy_trackback_url);
return false;
});
});
};
})(jQuery);HTML
続いてHTML。ボタンと被RT数を表示したい場所に以下のHTMLを書きます。「@icoro」となっているところは適宜書き換えて下さい。
WordPressのテンプレートタグを使用しているので、他のブログツールやCMSで使う場合は書換が必要です。使用しているテンプレートタグはthe_ID(記事のID)、get_permalink(記事のパーマリンク)、get_the_title(記事のタイトル)の3つです。
また、記事のパーマリンクとタイトルをURIエンコードするのに、PHPのrawurlencode関数を使っています。
<!-- topsy -->
<span id="t<?php the_ID(); ?>"><a href="http://twitter.com/home?status=RT @icoro <?php echo rawurlencode(get_the_title()); ?> <?php echo rawurlencode(get_permalink()); ?>" class="rt">retweet</a></span>
<script type="text/javascript"><!--
jQuery(function($) {
$('#t<?php the_ID(); ?>').setTweet('<?php the_permalink(); ?>');
});
//--></script>CSS
ついでのCSS。これは第一版と全く同じです。ボタンや被RT数の色などは画像を使っていないので、CSSをいじるだけで赤色に変えたり出来ます。
/* twitter with topsy */
a.rt {
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 {
color: #fff;
background:#58b;
}
a.tweets {
padding-left: 2px;
font-size: 11px;
color: #666;
text-decoration: underline;
}
a.tweets:hover {
color: #f63;
}編集後記
DOMを使ってHTMLをすっきりさせたいなぁ、と思っているのですが(scriptタグが並ぶのはあまり美しくないと思うので)、それを実現するのはちょっとめんどくさい。2つばかり解決しなければならない課題があります。
1つは、ボタンのidを取得する方法。jQueryのセレクタで正規表現が使えればいいのですが、どうも使えないみたいです。正規表現を使えるように出来るpluginもあるっぽいのですが、ちょっと大げさかなぁ。filter関数を使って取得する手もあるみたいなので、それを調べてみようと思っています。
もう1つは、URLを取得する方法。普通にやるとすれば、「aタグのhref属性を取得して、正規表現を使ってURLを取り出す」と言う感じでしょうか。まあ、出来ないことはないと思うのですが、ちょっとめんどいかも。。
そして、これら二つを解決してそれが可能になったとしても、果たして、処理速度的にどうなんだろう、と。正規表現とか、結構処理速度遅くなりそうな気がするのですが、実際の所どうなんでしょう。
と言う感じです。bit.lyのapi使って、短縮URLに対応しようかとも思ったのですが、めんどくさそうなのでとりあえずやめました。
追記
2010/05/04
HTMLからjavascriptのコードを無くした第三版を書きました。
2010/05/18
コードに以下の変更を加えました。
- htmlのretweetボタンの表示を「tweet」から「retweet」に変更した。
- javascriptの被tweet数の単位を「RT」から、被tweet数が1つの場合は「tweet」と、複数の場合は「tweets」と表示するように変更した。