ブログの記事をTwitterに投稿するボタンと被RT数を表示するためのjavascript

　ブログの記事をTwitterに投稿するボタンと被RT数を表示するのに「Tweetmeme」を使っていたのですが、過去7日間の投稿しか見られないというビミョーな仕様だったので、同じようなサービスの「TOPSY」に切り替える事にしました。
　さて、「入れ替えるだけだから簡単に切り替えられるかな」と思ってなんとなく始めたら、これが結構な違いがありまして、なんだかんだで結局javascriptを書くことになってしまったので記録しておきます。。

　完成図はこんな感じ。

右端にある「tweet」がtwitterに投稿するボタンで、「0 RT」が被RT数です。RTがないので「0 RT」となってますが、RTされているのをTOPSYが発見出来れば「1 RT」等になります。

コード

　とりあえずコードをどうぞ。
　なにか仕様が固まってない感じがすると思いますが、実際、ゆるゆるです。適宜自分の環境に合うように直したりブラッシュアップしたりして使って下さい。
　ベースをがつっと作って、後からちょいちょい変えていったり最適化してくのが好きです。(icoro自体そういうところがありますね。)

javascript

　というわけで、まずはJavascript。要jQuery。tweet_linkの中に「RT @icoro」となっている部分がありますが、ここは適宜書き換えて使って下さい。変数名が長いですが、どうせYUI compressorなんかで圧縮かければ短くなりますから。

(function($){
  $.fn.setTweet = function(topsy_url,topsy_title){
    var tweet_link = 'http://twitter.com/home?status=RT @icoro ';
    tweet_link += topsy_title + ' ' + topsy_url;
    var id = this.attr("id");
 
    $('#' + 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){
      var url = '<a href="' + json.response.topsy_trackback_url + '" class="tweets">' + json.response.trackback_total + ' RT</a>';
      $('#' + id).append(url);
 
      $('#' + id + " .tweets").click(function(){
        window.open(json.response.topsy_trackback_url);
        return false;
      });
 
    });
  };
})(jQuery);

HTML

　続いてHTML。ボタンと被RT数を表示したい場所に以下のHTMLを書きます。
　WordPressのテンプレートタグを使用しているので、他のブログツールやCMSで使う場合は書換が必要です。使用しているテンプレートタグはthe_ID(記事のID)、the_permalink(記事のパーマリンク)、the_title(記事のタイトル)の3つです。

<!-- topsy -->
<span id="topsy-<?php the_ID(); ?>"><a href="http://twitter.com/home?status=RT @icoro <?php the_permalink(); ?>" class="rt">tweet</a></span> 
<script type="text/javascript">
  jQuery(function($) {
  var s = '#topsy-<?php the_ID(); ?>';
  var u = encodeURIComponent("<?php the_permalink(); ?>");
  var t = encodeURIComponent("<?php the_title(); ?>");
  $(s).setTweet(u,t);
});
</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;
}

編集後記

　最初、TOPSYで配布されているボタンやWordPressのプラグインを使ってみたのですが、要素にfloatが指定されているらしく、Tweetmemeと同じような表示にするのに一苦労。Tweetmemeのボタンはiframeであるのに対して、TOPSYのボタンはちゃんとdiv要素などで組まれているため、どうしても要素が増えてしまうんですね。あんまりiframeが好きではないのでモノとしてはTOPSYの方が好みなのですが、要素が増える分、調整しなければいけない要素も増えるわけで。

　また、設置されているボタンの数だけscriptを外部参照するようで(これはTweetmemeも基本的には同じ)、ボタンの数が多いindexページやarchiveページは全体が表示されるまですごく(3、4秒くらい)時間がかかります。。

　これはどうも実用的ではないということで、結局、javascriptをいじることになってしまいました。ポイントはHTMLの読み込みとTOPSYからの被RT数の読み込みを分けたところです。HTMLの読み込みが完了したあとに、JSONPで被RT数を読み込んでいます。jQueryだとこの辺が簡単にできて良いですよねぇ。
　てかいっそ、TOPSYがはてブなんかと同じように被RT数を画像で出してくれると簡単で良いんですけど。。

　Twitterに投稿するボタンは以前にも作って設置したことがあります。

• icoro : icoroの記事をTwitterに投稿するボタンを置いてみた

　が、ぶっちゃけ、今回は全然参考にしていないです。。てか、この記事の存在を忘れていました。。

参考

• このサイトの「Twitter に送る（ReTweet ボタン）」が出来るまで :: gerenuk.crazyphoto.org/
• Topsy API を使ってブログに「つぶやかれ数」を自由にレイアウトする [C!]
• otterapi – Project Hosting on Google Code

追記

2010/05/01

　javascriptが動作しない環境でもそれなりに機能するように、ちょっとコードを書き換えた第二版を書きました。

• icoro : TweetボタンとRT数を表示するJavascript – 第二版