はてなブックマークボタンの設置方法

WordPressで作成したサイトに、はてなブックマークボタン設置する方法をご紹介します。はてなブックマークは、オンラインにブックマークを無料で保存できるソーシャルブックマークサービスです。

はてなブックマークボタンの機能

現在公開されている『はてなブックマークボタン』には、以下の機能があります。

  • ブックマークへの追加
  • ブックマーク数のカウンター表示
  • コメントやブックマークされたページの情報が集まるエントリーページへのリンク

デザインは3種類あり、お好みのボタンを選んで設置できます。

このエントリーをはてなブックマークに追加 スタンダード (B!+ブックマーク数を表示)
このエントリーをはてなブックマークに追加 バーティカル (大きめのサイズでB!+ブックマーク数を表示)
このエントリーをはてなブックマークに追加 シンプル B!のみ(ブックマーク数の表示なし)

『はてなブックマークボタン』についての詳細は、こちらのページで紹介されています。

はてなブックマークボタンのコード生成

はてなブックマークボタンを設置するためのコードは、こちらのページで作成できます。

はてなブックマークボタンのコード生成

ページ情報の入力

はてなブックマークボタンを設置するページの情報を入力します。項目は、URLタイトルです。

ここで注意すべきなのが、URLやタイトルに、トップページの値を入力してはいけないという点です。サイト訪問者があなたの記事を気に入ってブックマークに追加しようとしても、その記事ではなくトップページがブックマークされてしまうからです。

では、記事のURLやタイトルを入力するにはどうすればよいでしょうか?記事を書くたびにボタン設置用のコードを作成するのは、たいへん面倒です。

テンプレートタグを使う

そこで利用するのが、Wordpressのテンプレートタグです。テンプレートタグとは、Wordpressに対して何かを実行・取得させるときに使います。今回の例では、記事のURLやタイトルを取得・表示させる目的で利用します。

テンプレートタグは、index.phpやsingle.phpなどのテンプレートファイル内に記述します。

今回使うテンプレートタグは、下記の2つです。

  • URL:<?php the_permalink();?>
  • タイトル:<?php the_title();?>

これらをそのまま入力してコードを作成できれば便利なのですが、残念ながら問題が生じてしまいます。それは、一部のタグが特殊文字に変換されてしまう点です。

一部のタグが特殊文字に変換

なので、ここでは適当な文字を入力しておいて、コード生成後にテンプレートタグと置き換えるとよいでしょう。


コード生成が面倒な場合は、下記をお使いください。(ご利用は、自己責任でお願いいたします)

スタンダード (B!+ブックマーク数を表示)

このエントリーをはてなブックマークに追加

<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="standard"
 title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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>
バーティカル (大きめのサイズでB!+ブックマーク数を表示)

このエントリーをはてなブックマークに追加

<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="vertical"
 title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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>
シンプル B!のみ(ブックマーク数の表示なし)

このエントリーをはてなブックマークに追加

<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"
 title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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>

はてなブックマークボタンの設置方法

繰り返しになりますが、ここまでに紹介したコードはテンプレートタグを利用しているため、テンプレートファイルの中に記述する必要があります。テンプレートファイルについて、くわしくは下記ページをご覧ください。

では、コードはどのテンプレートファイルに記述すればよいのでしょうか。それは、サイト内のどのページにブックマークボタンを表示させるかによって決まります。

WordPressテーマの多くは、ページの種類(投稿、固定ページなど)によって異なるテンプレートファイルを利用しています。一般的には、投稿はsingle.php、固定ページはpage.phpが使われています。

このとき、投稿記事内だけにブックマークボタンを設置するなら、single.phpのみコードを記述すればいいわけです。


テンプレートファイルにコードを記述する方法がよくわからない場合は、プラグインを利用するといいでしょう。複数のソーシャルブックマークボタンを設置できるプラグインを、下記ページでご紹介しています。

関連ページ

2011年6月6日