WordPressにはてなブックマークボタンを設置する方法

はてなブックマークのボタンをWordPressに設置する簡単な方法を紹介します。

はてなブックマークとは、オンラインでたくさんのブックマークを登録できるサービスです。
このボタンでブックマークされている数の確認、ブックマークへの追加、他にも
ブックマークに追加したユーザーからの設置したページに対するコメントを見ることができます。

あちこちでよく見かけるこれです。

それではこのはてブボタンを設置してみます。

はてブボタンのコードを取得する

ボタンを設置するためのコードは、はてブ公式サイトに記載されています。

http://b.hatena.ne.jp/guide/bbutton

２種類のボタンが表示されているので、まずはボタンのタイプを選びます。

ボタンのタイプを選んだら、次にページのURL、ページタイトルを入力しますが
後ほど編集する必要があるため、ここでは仮の文字を入力します。

あとから見てわかりやすければ何でもＯＫです。
例では「ページURL」「ページタイトル」と入力しました。
ブックマーク数の表示はお好みで。

以上の入力をしたことでコードが生成されました！
このコードをコピーします。

設置したい場所に生成したコードを貼りつける

例として今回は記事の個別ページに設置します。
現在使用しているテーマファイル内の single.php を用意します。

記事の本文より上に設置してみます。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!-- はてブコードここから -->

<a href="http://b.hatena.ne.jp/entry/ページURL" class="hatena-bookmark-button" data-hatena-bookmark-title="ページタイトル" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加">
	<img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

<!-- ここまで -->

<div class="entry">
	<?php the_content(); ?>
</div>

<?php endwhile; endif; ?>

貼りつけた後は、上で入力した仮の「ページURL」「ページタイトル」を
正しいものに置き換えます。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加">
	<img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

テンプレートタグを使用することで動的にURL、タイトルが指定されます。

これで完成です！

はてブのガイドページにもある通り、記事の一覧ページなど
記事ループ内で複数回コードが呼び出されるページでは

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

この <script> はループ外で呼び出すようにしましょう。