はてなブックマークボタンとブックマーク数を設置する

ブログでよく見かける「↑B」ボタンと「B!」ボタンの設置方法です。

違いが分からなかったのですが、「↑B」はエントリーを含むページへのリンクで、「B!」はこのページをはてなブックマークに追加するという意味があるようです。

さて、そのはてなブックマークボタンを私のブログにも設置しようと調べたのですが、公式サイトでWordpressについてのマニュアルがないんです。
自分のブログに「↑B」「B!」アイコンを表示する

ただ、しくみとしてはそれほど難しくなかったので、Wordpressへの設定方法をメモしておきます。

「↑B」「B!」ボタン画像取得

２つの画像をダウンロードし、自身ブログのサーバにアップロードします。
http://b.hatena.ne.jp/images/append.gif
http://b.hatena.ne.jp/images/b_entry.gif

リンクを設置

例えば、このブログのトップページのエントリーを含むはてなへのリンクは以下のように設置します。

<a href="http://b.hatena.ne.jp/entry/https://helog.jp/">
<img src="b_entry.gif" width="16" height="12" style="border: none;" 
   alt="このエントリーを含むはてなブックマーク" 
   title="このエントリーを含むはてなブックマーク" />
</a>

つまり、各ページに以下のようなWordpressのコードを組み込めばよいのです。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>">
<img src="b_entry.gif" width="16" height="12" style="border: none;" 
   alt="このエントリーを含むはてなブックマーク" 
   title="このエントリーを含むはてなブックマーク" />
</a>

同じようにして、この記事をはてなブックマークに追加するボタンは以下のように設置します。

<a href="http://b.hatena.ne.jp/entry/add/<?php the_permalink(); ?>">
<img src="append.gif" width="16" height="12" style="border: none;" 
   alt="このエントリーをはてなブックマークに追加" 
   title="このエントリーをはてなブックマークに追加" />
</a>

ブックマーク数「○○users」を表示する

こちらも、公式サイトにマニュアルが存在しますが、Wordpressの方法は記載されていません。
自分のブログに「○○users」を表示する
しかし、これも単純にリンクを設置してあげればよいだけです。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>">
<img src="b_entry.gif" width="16" height="12" style="border: none;" 
   alt="このエントリーを含むはてなブックマーク" 
   title="このエントリーを含むはてなブックマーク" />
<img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" 
   alt="はてなブックマーク - <?php the_title(); ?>" 
   title="はてなブックマーク - <?php the_title(); ?>">
</a>

実際に、ここの下に追加してみました。
今やスタンダードとなりつつある「はてなブックマーク」ボタン。ブログへの設置がまだの方は是非。