※弊社記事はたぶんにPRが含まれますので
話半分で受け取ってください。

deliciousの被ブックマーク数を表示するJavascript – 第二版

 deliciousの被ブックマーク数を表示するために書いたjavascriptの第二版です。jQueryを使用しています。基本的に WordPress仕様です。

 第一版からの変更点は以下の通り。主に内部的な変更なので、見た目や機能的にはほとんど同じです。

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

コード

javascript

 まずはjavascript。

(function($){
 
  /* for Delicious */
  $.fn.setDelicious = function(){
    $(this).each(function(){
 
      var href = $(this).attr("href");
      var url = $(this).attr("id");
      var self = this;
 
      $(this).click(function(){
        window.open(href, 'delicious', 'toolbar=no,width=550,height=550');
        return false;
      });
 
      var src  = 'http://feeds.delicious.com/v2/json/urlinfo/' + url + "?callback=?";
      jQuery.getJSON(src, function(json){
        if( !json[0] ) return;
        var res = json[0];
        if( res.total_posts < 1 ) return;
        var delicious_url = 'http://delicious.com/url/'  + res.hash;
        var unit = (res.total_posts == 1) ? ' user' : ' users';
        var atag_str = '<a href="' + delicious_url + '" class="delicious_posts">' + res.total_posts + unit + '</a>';
        var atag = $(atag_str).click(function(){
          window.open(delicious_url);
          return false;
        });
        $(self).after(atag);
      });
 
    });
  };
 
})(jQuery);
jQuery(function($){
 
  // delicious
  $("a.delicious").setDelicious();
 
});

HTML

 続いてHTML。被bookmark数を表示したい場所に以下のHTMLを書きます。

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

<!-- delicious -->
<a href="http://delicious.com/save?v=5&noui&jump=close&url=<?php echo rawurlencode(get_permalink()); ?>&title=<?php echo rawurlencode(get_the_title()); ?>" class="delicious" id="<?php echo md5(get_permalink()); ?>"><img src="<?php bloginfo(template_directory); ?>/images/delicious.gif" height="14" width="14" alt="Delicious" /></a>

CSS

 ついでのCSS。被bookmark数の色などはCSSをいじるだけで変えられます。
 第一版との違いはクラス名が変わった事だけで、内容は全く同じです。

/* for delicious */
/* 旧 a.delicious */
a.delicious_posts {
  padding-left: 2px;
  font-size: 11px;
  color: #666;
  text-decoration: underline;
}
 
/* 旧 a.delicious:hover */
a.delicious_posts:hover {
  color: #f63;
}

編集後記

 deliciousは、URLをMD5でハッシュする必要があります。で、ハッシュした値をどうやって取得しようか、とちょっと悩んだのですが、結局、aタグのidにMD5でハッシュしたURLを入れることにしました。
 javascriptでidに入ってるハッシュ値を取り出して、それを使って被ブックマーク数を取得しています。

 調べてみたら、javascriptでMD5ハッシュ出来るようにするライブラリもあったのですが、動作速度的にはやっぱりサーバサイド(php)でやってしまった方が早いかと思いまして。あと、ライブラリを入れるとなると、その分だけ、転送しなければならないファイルサイズが増えてしまいます。

 まあ、javascriptをHTMLから追い出すことが出来たので、とりあえずはこれで良しということにします。

関連する記事