新はてなブックマークボタンをFC2ブログに設置する

はてなブックマークの新しいボタンが公開されて各所で移行が進みつつあるようなので、このブログのはてブボタンも新しいものに変更することに。

上のリンク先からかなり簡単にタグは作れるけど、せっかくなのでコピー&ペーストでそのままテンプレートに設置できるコードを紹介。さらにHTMLの文法が気になる人向けに、FC2ブログ版の文法エラーが出ないコードも最後に乗せておきますよ。

FC2ブログ対応版新はてなブックマークボタン

使い方は各種FC2ブログのテンプレートにある<!--topentry-->から<!--/topentry-->の間の好きな場所に貼り付けるだけ。3種類あるのでそれぞれの動作デモも下に表示させときます。

スタンダード (標準タイプ)

<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" 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>

バーティカル (大きい正方形タイプ)

<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" 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>

シンプル (ブックマーク数が表示されないタイプ)

<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" 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>

HTMLの文法エラーが出ないコード

細かい話は下のリンク先を見てもらうとして、上記のコードは多くのページで使われているHTML 4.01やXHTML 1.0で文法エラーが発生してしまう。これは要するに定義されていない属性がタグに含まれているからなので、これを削ったり変更したりすればとりあえずエラーは出なくなる。(これらの属性はHTML 5では問題ないらしいものの、普及どころか使ってるところはまだほとんどないはず。)

ただこの方法は「タイプを選べずスタンダードしか設置できない」という問題があるので、どうしてもバーティカルなどを設置したいエラーを承知で使うしかないかと。

1. ヘッダにJavaScriptコードを貼り付け

新はてブボタンのJavaScriptコードは先に1回呼び出せば普通に機能するようなので、テンプレートのheadタグの間に以下のコードを書き込んでおく。(重いのが気になるようだったら最下部の</body>タグの直前に書き込む。)

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

2. 設置したい場所にタグを貼り付ける

先に書いた方法と同じように、ボタンを表示させたい場所に以下のタグを書き込む。前述のとおりタイプはスタンダードしか選べないので、その辺りは我慢。(見栄えは同じなのでデモは省略。)

<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="B!" width="20" height="20" style="border: none;" /></a>

defer="defer"について

「defer="defer"」は「async="async"」と非常によく似た属性で「ページの読み込み終了後にスクリプトを実行する」と指定するためのオプション。HTML 5で新たに追加されたasyncと違い、HTML 4.01やXHTML 1.0でもきちんと仕様として採用されているのでエラーにはならない。(HTML 4.01の場合は単にタグの中に「defer」書いてしまえばよい。)

ただしすべてのブラウザで対応しているわけじゃないようなので、スクリプトの重さが気になるならページの最後の方にスクリプトタグを書いておく方法と併用するのをおすすめしたい。