bkブログ

JavaScript ではてなブックマーク数を表示

はてなブックマークのブックマーク数は人気の指標として参考になります。このブログでは各エントリの末尾に、ブックマーク数を画像で取得する API を使って、ブックマーク数を表示するように設定しています。

ブログシステムのようにテンプレートを使える場合は、ブックマーク数を表示する HTML をたくさんのページに貼り付けるのは簡単ですが、そうでない場合はなかなか面倒です。そこで、ここでは JavaScript を使ってはてなブックマーク数を表示する方法を紹介します。

 

やり方

まず、次のような JavaScript を hatena-bookmark.js として保存してウェブに置きます。

function makeHatenaBookmarkLinks() {
  return ("<a href='http://b.hatena.ne.jp/entry/" +
          escape(document.URL) + "'>" +
          "<img src='http://d.hatena.ne.jp/images/b_entry.gif'" +
          "  width='16' height='12' style='border: none;'" +
          "  align='absmiddle'" +
          "  alt='このエントリーを含むはてなブックマーク'" +
          "  title='このエントリーを含むはてなブックマーク'" +
          "/></a>" +
          "&nbsp;" +
          "<a href='http://b.hatena.ne.jp/entry/" +
          escape(document.URL) + "'>" +
          "<img align='absmiddle'" +
          "  src='http://b.hatena.ne.jp/entry/image/" +
          escape(document.URL) + "'/></a>");
}

function insertHatenaBookmarkLinks() {
  var element = document.getElementById("hatena-bookmark");
  if (element) {
    element.innerHTML = makeHatenaBookmarkLinks();
  }
}

insertHatenaBookmarkLinks();

次に、ブックマーク数を表示したいHTMLファイルの中の好みの位置に次の2行を追加します。 hatena-bookmark.js への URL は適当に変更してください。

<div id="hatena-bookmark"></div>
<script src="/hatena-bookmark.js" type="text/javascript"></script>

以上で完了です。元のページを書き換える必要がありますが、10行くらいの HTML のかたまりを貼り付けて、http://b.hatena.ne.jp/entry/... のところに個々のページの URL を設定していくのと比べれば、2行の追加で済むのはだいぶましです。ページのURLの設定には JavaScript の document.URL を使っています。

makeHatenaBookmarkLinks() 関数を修正すれば、hatena-bookmark.js を使っているすべてのページに変更を反映できるのもポイントです。

実際の例

0xcc.net のトップページや バッドノウハウのページ の右側にブックマーク数を表示してみました。

これらのページでは元の HTML から sidebar-ja.js という JavaScript を読み込み、 さらにその中から document.write() を使って hatena-bookmark.js を読み込むというやや複雑なことを行っています。 そのため、sidebar-ja.js を変更するだけで、 sidebar-ja.js を使っているすべてのページに、ブックマーク数の表示が適用されます。

まとめ

はてなブックマーク数を JavaScript を使って表示する方法を紹介しました。 この方法は、特にはてなブックマークに特化しているわけではないので、他の用途にも応用できます。テンプレートシステムが使えない場合のごまかしテクニックとして使えるのではないかと思います。

補足

hatena-bookmark.js では document.write() ではなく innerHTML を使って HTML を挿入しています。 これは前述のように、私の場合は .js の中から document.write() を使って別の .js を呼ぶというややこしいことをやっているためです。

document.write() の中から別の .js を読み込んだ場合、読み込まれた .js 内の document.write() がどのタイミングで呼ばれるかはブラウザによって異なるため、このような場合において、意図する場所に HTML を挿入するには innerHTML の方が信頼性が高いようです。こんな複雑なことをしないなら、普通に document.write() を使えばいいと思います。

投稿者 satoru |