10月 04

リンクの隣に「はてなブックマーク数」を表示する方法

JavaScript • WordPress • jQuery • プログラミング Add comments 423 PVs
Posted at 23:02 by Hiro

ブログ開設から１ヶ月しか経っていないので、自サイト内にはブックマークされているようなエントリはまだありませんが、はてなブックマークのヘルプページで「ブックマーク数を画像で取得するAPI」を見ながら、ブログ内にあるリンクの隣にはてブ数を表示させるようにしてみました。

外部サイトのリンクを別タブで開く方法のエントリで紹介したjQueryのコードを拡張していきます。

はてブ数のアイコンを表示させるには、

<img src="http://b.hatena.ne.jp/entry/image/エントリーのURL" />

というimgタグを使えばいい。

さらに、アイコンを該当するはてブにリンクさせるには、

<a href="http://b.hatena.ne.jp/entry/エントリーのURL">
  <img src="http://b.hatena.ne.jp/entry/image/エントリーのURL" />
</a>

とaタグで囲めばいい。

まずはここまでを実現するJavaScriptを書いてみます。

$(function() {
  $("a").each(function() {
    var url = $(this).attr("href");
    var hateb_api = "http://b.hatena.ne.jp/entry/";
    var hateb_icon = $("<img />").attr("src", hateb_api+"image/"+url);
    var hateb = $("<a></a>").attr("href", hateb_api+url).append(hateb_icon);
    $(this).after(hateb);
  });
 
  $("a:not([href^='<?php echo get_settings('home'); ?>'])").attr("target", "_blank");
});

おぉ、はてブ数がリンクの隣に表示されるようになった。外部サイトへのリンクを別タブで開くためのコードは、前半で作ったはてブへのリンクにも適用されます。

しかし、ブログ内のリンクというリンクすべてにはてブ数が表示されている…これは目障り。
さらに、Firebug（テストにFirefox 3を使っているので）のコンソールに「url is null」というエラーが。href属性を持たないaタグ（<a name=”top” />みたいなの）もあるからか？

ということで、エントリ内の外部リンクに限定するようにaタグのセレクタを変更して、url変数もチェックするようにします。

$(function() {
  $("div.entry a:not([href^='<?php echo get_settings('home'); ?>'])").each(function() {
    var url = $(this).attr("href");
    if(url) {
      var hateb_api = "http://b.hatena.ne.jp/entry/";
      var hateb_icon = $("<img />").attr("src", hateb_api+"image/"+url);
      var hateb = $("<a></a>").attr("href", hateb_api+url).append(hateb_icon);
      $(this).after(hateb);
    }
  });
 
  $("a:not([href^='<?php echo get_settings('home'); ?>'])").attr("target", "_blank");
});

さて、ここまでできると、エントリー内のリンク以外にも拡張したくなってきます。エントリーのタイトル部分やエントリーが一覧表示されるウィジェットなどなど。とりあえず、エントリーのタイトル部分にはてブ数を表示させてみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(function() {
 function appendHateb(v) {
    var url = $(v).attr("href");
    if(url) {
      var hateb_api = "http://b.hatena.ne.jp/entry/";
      var hateb_icon = $("<img />").attr("src", hateb_api+"image/"+url);
      var hateb = $("<a></a>").attr("href", hateb_api+url).append(hateb_icon);
      $(v).after(hateb);
    }
  });
 
  $("div.entry a:not([href^='<?php echo get_settings('home'); ?>'])").each(function() {
    appendHateb($(this));
  });
  $("h2 > a[rel='bookmark']").each(function() {
    appendHateb($(this));
  });
 
  $("a:not([href^='<?php echo get_settings('home'); ?>'])").attr("target", "_blank");
});

i3Themeではエントリーのタイトルが

<div class="title">
  <h2>
    <a href="エントリーのURL" rel="bookmark">エントリーのタイトル</a>
  </h2>
</div>

という構造をしているので、"h2 > a[rel='bookmark']"というセレクタを使っています。テーマによって違うと思うので、自分で使っているテーマに合わせてセレクタを変更してください。

ウィジェット内にあるエントリーの一覧など、他の部分にもはてブを表示させたい場合は、12～17行目のようにセレクタを追加していけばいいのですが、個人的にはappendHateb()という関数を使わずに、なんとか無名関数だけで実現したいところ。

で、最終的にはこんな感じになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(function() {
  jQuery.each(
  [
    "h2 > a[rel='bookmark']",
    "div.entry a:not([href^='<?php echo get_settings('home'); ?>'])"
  ],
  function(i, selector) {
    $(selector).each(function() {
      var url = $(this).attr("href");
      if(url) {
        var hateb_api = "http://b.hatena.ne.jp/entry/";
        var hateb_ico = $("<img />").attr("src", hateb_api+"image/"+url);
        var hateb = $("<a></a>").attr("href", hateb_api+url).addClass("hateb").append(hateb_ico);
        $(this).after(hateb);
      }
    });
  });
 
  $("a:not([href^='<?php echo get_settings('home'); ?>'])").attr("target", "_blank");
});

3～6行目の配列にセレクタを追加していけば、簡単に特定のDOM要素内のリンクにはてブ数を表示できるようになります。13行目で「addClass("hateb")」を呼んでいるのは、はてブ数のアイコンの表示方法をCSSで制御できるようにするためです。アイコンがリンクにぴったりくっつきすぎなのでパディングいれたりしています。

ウィジェット内でのはてブ数の表示は、実際にはてブがつくようになったら導入しようかと。

タグ: • • •

コメントをどうぞ