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

2013 10/10

2013年10月10日 2015年11月10日

自分のホームページにはてなブックマークボタンを設置したいと思ったら、はてブ公式からブックマークボタン用のソースコードを取得して、それを自分のサイトのボタンを設置したい場所に貼り付ければOKです。

ただし、WordPressの場合は取得したコードをそっくりそのままコピペしてもボタンとして機能しません。はてブボタンのソースコード作成時にページのアドレスとページのタイトルを入力する欄がありました。ここに自分のブログのトップページURLとブログ名を入れてしまうと、毎回自分のブログのトップページとブログ名がはてブされてしまうことになります。どうせボタンを設置するなら各ブログ記事ごとに、その記事のタイトルをつけてはてブして欲しいと思いませんか？

ブログの記事を新しく書く度にはてブ用ソースコードを取得して、投稿画面に貼り付けるのも面倒です。それでは一体どうしたらよいでしょうか？

この記事では、プラグインを使わず自分のWordPressにはてブボタンを設置するためのソースコードの取得、修正方法を簡単にご説明します。

取得したソースコードを一部修正する必要があった！

はてなブックマークボタン（公式）

ものは試しにこのブログの情報を正直に入力してみます・・・「サイト名」、ブログURLなどそのまま記入。

ただし、このままだと先ほども言いましたが、はてブボタンを押してブックマークしてくれた人が毎回ブログの「トップページ」と「ブログ名」をはてブすることになります。

そういうボタンを望んではいませんよね？やはり、ブログの各記事のタイトルとURLがキチンとボタンに反映されるようなソースが欲しいです。

だからといって、毎回ブログを書く度に……このはてブボタンのソースコードを取得して個別の記事に貼り付けるのも面倒くさいです（笑）

とりあえず取得したはてブボタン用ソースコードの一部をWordPressテンプレートタグで置き換える作業が必要

[html]
<a href="http://b.hatena.ne.jp/entry/taccuma.com" class="hatena-bookmark-button" data-hatena-bookmark-title="taccuma note" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" 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>
[/html]

とりあえず取得してみた上のコードの中で、ピンク色のマーカーで印をつけた2カ所をWordPressのテンプレートタグで置き換えます。

[html]
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php wp_title(‘ | ‘, true, ‘right’); ?><?php bloginfo(‘name’); ?>" data-hatena-bookmark-layout="vertical-balloon" 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></script>
[/html]

前半の<?php the_permalink() ?>ですが、これはブログの記事のパーマリンク（URL）をはき出すテンプレートタグです。

後半の<?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?>ですが、これは…例えば今あなたがご覧になってるこの記事をあなたがブックマークしたとして、そのブックマークのタイトルを「WordPressにはてなブックマークボタンを設置する方法 | taccuma note」と表示させるためのモノです。

以上の2カ所を修正さえすれば、OKです！！