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

　ブログの記事を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」と表示するように変更した

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

コード

javascript

HTML

CSS

補足

編集後記

参考

追記

2010/05/18

関連する記事