ブログを運営していると、「この記事、もっとたくさんの人に届けたいな」と思う瞬間ってありますよね。そんなときに地味に効いてくるのが、記事ごとに置くはてなブックマークボタン（通称・はてブボタン）です。SNSのシェアボタンと並べて置いている方も多いと思います。
ところが、このはてブボタン。はてな公式のページで生成したコードをWordPressにそのままコピペすると、けっこうな確率で「あれ?」という落とし穴にハマります。
具体的には、どの記事のボタンを押してもサイトのトップページがブックマークされてしまうという現象です。個別記事をブックマークしてほしいのに、全部ひとまとめにトップページ扱い。これでは「この記事が何ブックマークされたか」がまったく分からなくなってしまいます。せっかく良い記事を書いても、評価が一カ所に吸い込まれてしまうわけで、これは本当にもったいない話なんです。
なぜこうなるかというと、公式の生成コードは「ある1つの決まったURL」を埋め込む前提で作られているからなんですね。トップページに1個だけ置くなら問題ないのですが、WordPressのように1つのテンプレートを使い回して何百記事も表示する仕組みとは、そのままだと相性が悪いんです。
この記事では、長年Web制作をしてきた運営者が、はてブボタンをWordPressの個別記事できちんと動くように設置する方法を、最新のボタンコードに合わせて一から解説していきます。昔この設定をした方も、当時のコードはすでに古くなっている可能性が高いので、ぜひこの機会に最新版へ入れ替えていきましょう。PHPがちょっと苦手という方でも、コピペで進められるように書いていますのでご安心ください。
そもそも「はてなブックマークボタン」って何?という方へ
まず簡単におさらいです。はてなブックマークボタンは、Webページに置けるボタン型のブログパーツで、訪問者がワンクリックでそのページを「はてなブックマーク」に登録できるものです。
このボタンを記事に置いておくと、いくつか嬉しいことがあります。
まず、そのページが何人にブックマークされているか（ブックマーク数）が数字で一目で分かるようになります。数字が伸びている記事は「人気記事なんだな」と訪問者にも伝わりますし、運営側のモチベーションにもなります。
そして読者側にとっても、わざわざはてなブックマークのサイトを開きに行かなくても、記事を読んだその場でサクッとブックマークできるのが便利なところ。あとで読み返したい記事を、ページから離れずに保存できるわけです。レイアウトによっては、他の人がどんなコメント(ブコメ)を付けているかを吹き出しで見られるタイプもあります。
はてなブックマークは日本ではまだまだ現役のサービスで、技術系やニュース系の記事だと、ここで話題になると一気にアクセスが伸びることもあります。だからこそ、設置するなら「個別記事できちんと動く」状態にしておきたいんですね。
2025年現在の公式ボタンコードはこうなっています
まずは土台となる、はてな公式の現行ボタンコードを確認しておきましょう。下記が、いまはてな公式の設置ページで生成される基本のコードです(レイアウトの選択によって細部は変わります)。
<a href="https://b.hatena.ne.jp/entry/"
class="hatena-bookmark-button"
data-hatena-bookmark-layout="basic-label-counter"
data-hatena-bookmark-lang="ja"
title="このエントリーをはてなブックマークに追加">
<img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png"
alt="このエントリーをはてなブックマークに追加"
width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
src="https://b.st-hatena.com/js/bookmark_button.js"
charset="utf-8" async="async"></script>ポイントをかいつまんで説明します。
ボタンの本体は class="hatena-bookmark-button" が付いた <a> タグです。最後に読み込んでいる https://b.st-hatena.com/js/bookmark_button.js というスクリプトが、このクラスの付いたリンクを見つけて、自動的にボタン化してくれる仕組みになっています。
昔の記事でよく見かけた http://b.st-hatena.com/... という「http://」始まりのURLや、古い画像パス（button-only.gif など）はもう古い書き方です。いまは https:// 始まりが基本ですので、過去に設置したまま放置している方は、ここだけでも更新しておくことをおすすめします。
そして今回いちばん大事なのが、1行目の href="https://b.hatena.ne.jp/entry/" の部分です。ここに「ブックマークしてほしいページのURL」を入れるのですが、公式が生成するコードにはあなたが入力した固定のURL(多くの場合トップページ)が入っています。これがそのまま個別記事問題の原因になります。
参考：はてなブックマークボタンの作成・設置について(はてな公式)
WordPressの個別記事で動かす書き換え方法
それでは本題です。先ほどのコードを、WordPressの個別記事(single)テンプレートで正しく動くように書き換えていきます。やることはシンプルで、固定のURLを、その記事のURLを自動で出力するPHPタグに差し替えるだけです。
1. href のURLを the_permalink() に置き換える
WordPressには、いま表示している記事のURLを出力してくれる the_permalink() という便利なテンプレートタグがあります。これを href のなかに埋め込みます。
書き換え後はこうなります。
<a href="https://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"
class="hatena-bookmark-button"
data-hatena-bookmark-layout="basic-label-counter"
data-hatena-bookmark-lang="ja"
title="このエントリーをはてなブックマークに追加">
<img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png"
alt="このエントリーをはてなブックマークに追加"
width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
src="https://b.st-hatena.com/js/bookmark_button.js"
charset="utf-8" async="async"></script>これで、ボタンが表示されるたびに the_permalink() がその記事のURLに置き換わるので、記事ごとに正しいURLがブックマークされるようになります。トップページ問題はこれで解決です。
2. タイトルを渡したいときは the_title() を使う
昔のコードには data-hatena-bookmark-title="タイトル" という、ブックマーク時のタイトルを指定する属性が入っていました。ここも個別記事のタイトルにしたい場合は、the_title() を使って次のように書きます。
data-hatena-bookmark-title="<?php the_title(); ?>"ただし、現在の公式コードではこの title 属性が省略されていることが多く、その場合は無理に追加しなくても大丈夫です。はてな側がページのタイトルタグなどを見て自動で判定してくれるためです。「昔のコードを引き継いで使っている」「どうしてもタイトルを明示したい」というとき以外は、基本的に href の書き換えだけで十分機能します。
3. 貼り付ける場所はテーマの single.php（または該当パーツ）
この書き換えたコードは、テーマファイルの中で「個別記事の本文が表示される位置」に貼り付けます。多くのテーマでは single.php や、本文を出力している content.php といったテンプレートパーツが該当します。記事タイトルの下や本文の末尾など、ボタンを置きたい場所に挿入してください。
なお、スクリプト(bookmark_button.js)の読み込みは1ページにつき1回あれば十分です。複数のボタンを並べる場合でも、スクリプトタグ自体はフッターなどにまとめて1回だけ書けばOKです。
テーマを直接編集するときは、アップデートで上書きされて消えないよう子テーマで編集するのを強くおすすめします。このひと手間を惜しむと、テーマ更新のたびに設定が吹き飛んで泣くことになります(経験者は語る、です)。
参考：はてなブックマークボタンの作成・設置について(はてな公式)
関連記事：WordPressの基本テンプレートタグ一覧｜初心者向けに現行仕様でやさしく解説
PHPを触りたくない人向けの選択肢
「テーマファイルを直接いじるのはちょっと怖い…」という方も多いと思います。その気持ち、よく分かります。そういう場合は、無理にPHPを書かなくても済む方法もあります。
ひとつはブロックエディタ(Gutenberg)で固定のボタンを置く方法。ただしブロックエディタにそのままHTMLを貼る場合、the_permalink() のようなPHPは動きません。エディタは記事ごとに開いているので、その記事のURLを直接 href に書いてしまえば個別記事のブックマークにはできますが、記事ごとに毎回URLを書き換える手間がかかります。テンプレートで自動化したいなら、やはり先ほどの single.php 方式が確実です。
もうひとつはSNSシェアボタン系のプラグインを使う方法です。多くのシェアボタン系プラグインは、はてなブックマークを含む主要サービスのボタンをまとめて設置でき、しかも各ボタンに自動でその記事のURLを渡してくれます。PHPを一切触らずに個別記事対応のはてブボタンを置けるので、「とにかく手軽に済ませたい」という方にはこちらが向いています。プラグインを増やしたくない・表示速度にこだわりたいという方は、先ほどのコード直書き方式のほうが軽くて確実です。
どちらが正解ということはなく、自分の運営スタイルに合うほうを選べばOKです。カスタマイズの自由度と軽さを取るならテーマに直書き、手軽さと管理のラクさを取るならプラグイン、というイメージで選んでみてください。
関連記事：Google+終了後のSNSシェアボタン設置方法【X・Facebook・LINE対応】
参考：はてなブックマークボタンの作成・設置について(はてな公式)
まとめ：URLの一行を変えるだけで、はてブは正しく機能します
お疲れさまでした。長く書きましたが、やっていることはとてもシンプルです。公式コードの href にある固定URLを the_permalink() に置き換える、たったこれだけで、はてブボタンはWordPressの個別記事で正しく動くようになります。
あらためてポイントを整理しておきます。公式コードをそのまま貼ると、どの記事のボタンを押してもトップページがブックマークされてしまう。これを防ぐには、href 内のURLを the_permalink() に書き換える。タイトルを明示したいときだけ data-hatena-bookmark-title に the_title() を使う。スクリプトは https:// 始まりの最新版を使い、読み込みは1ページ1回。そして編集は子テーマで安全に。この流れさえ押さえておけば、まず失敗しません。
昔この設定をしたまま放置している方は、当時の http:// 始まりの古いコードが残っている可能性が高いです。この機会にぜひ最新版へ入れ替えて、記事ごとのブックマーク数がきちんとカウントされる状態にしてあげてください。地味な作業ですが、あなたの良記事が正しく評価されるための、確かな土台になります。
それでは、あなたのブログのはてブ数がぐんぐん伸びていくことを願っています。設置できたら、ぜひ自分の記事のボタンを押して、ちゃんと個別記事が登録されるか確認してみてくださいね。
