WordPressにプラグインを使用しないで”はてブボタン”を設置する方法

ソーシャルボタンシリーズ最後は、はてブボタンです。

2012年3月13日に下記のような発表もされ、現在トラッキングは行われていないとのことです。
はてなブックマークボタンが取得した行動情報の第三者への送信を停止しました

ボタン設置のためのコードを取得

『はてなブックマークボタンの作成・設置について』にアクセスしてボタン設置のためのコードを取得します。
http://b.hatena.ne.jp/guide/bbutton

ボタンを設置するページの情報を入力

後で書き換える部分になりますが、仮の情報を入れておきます。
今回はURLに”http://planbworks.net/”、タイトルに”Plan B works”と入れました。

ボタンのタイプを選択

数字を非表示にしたいのでシンプルボタンを選択。

取得したコードを書き換える

取得したコードを書き換えます。
上の画像でマークした所がこれから書き換える部分です。
書き換え前のコードはこんな感じ。

<a href=”http://b.hatena.ne.jp/entry/http://planbworks.net/” class=”hatena-bookmark-button” data-hatena-bookmark-title=”Plan B works” 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>

黄色でマークした部分

仮に入れたアドレスをブログの記事ごとに変えられるよう、

<?php the_permalink() ?>

と書き換えます。

ピンクでマークした部分

記事のタイトル | ブログタイトル　と表示されるよう、

<?php the_title(); ?> | <?php bloginfo(‘name’); ?>

と書き換えます。

完成

完成したコードはこんな感じです。
このコードを配置したい場所に記述します。

<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink() ?>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”<?php the_title(); ?> | <?php bloginfo(‘name’); ?>” 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>

一時配布されていた、「オプトアウト版」は、現在配布されていないようです。
トラッキングを停止したということで、トラッキング版もオプトアウト版もあったもんじゃないですよね。
このブログもオプトアウト版から、元のコードに書き換えました。