またまた寄稿が増えました!家事代行とか新鮮な響き……!
Categories情報処理

deliciousの被bookmark数を表示するJavascript

Date 2010/05/02 06:50  Modified date 2021/04/22 Author Yutaka  Tags javascript jQuery web service WordPress

 deliciousの被bookmark数を表示するためにjavascriptを書いたのでメモ。jQueryを使用しています。基本的にWordPress仕様です。

 del.icio.usからdeliciousに変わってから、被bookmark数を画像で表示する機能がなくなったみたいなので、javasciriptを書きました。RT数を表示するjavascriptを流用して割と簡単に作れました。

コード

 そんなわけでコードをどうぞ。

javascript

 まずはjavascript。

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

HTML

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

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

<!-- delicious --> <span id="d<?php the_ID(); ?>"><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="bm"><img src="http://static.delicious.com/img/delicious.gif" height="14" width="14" alt="Delicious" /></a></span>
<script type="text/javascript"><!--
jQuery(function($) {
  $('#d<?php the_ID(); ?>').setDelicious('<?php echo md5(get_permalink()); ?>');
});
//--></script>

CSS

 ついでのCSS。被bookmark数の色などはCSSをいじるだけで赤色に変えたり出来ます。

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

編集後記

 被RT数を表示するjavascript流用すれば簡単にできるかな、と思って始めたら、ホントに簡単にできちゃいました。jsonのレスポンス例がなかったので、そこがちょっと分かりにくかったですが、それくらいです。
 あとbookmark数を表示する際の単数形と複数形(userとusers)の切替に三項演算子を使ってみました。三項演算子って今までまともに使ったことなかったのですが、これ、便利ですね。

参考

追記

2010/05/05

 HTML中にjavascriptを書かなくてもいい、第二版を書きました。

Back to Top