新はてなブックマークボタンを貼り付ける

新はてなブックマークボタンが公開されていたので、このブログのボタンを張り替えることにしました。
使いやすくなりました! はてなブックマークボタン
キャンペーンが去年末に終了しているのをみると、そう新しい事でもないですね。

さて、上記のページより、このブログのトップページのブックマークボタンを作成します。結果は以下のとおりです。このコードをブログに貼り付けるだけです。簡単ですね。

<a href="http://b.hatena.ne.jp/entry/http://helog.jp" 
 class="hatena-bookmark-button" 
 data-hatena-bookmark-title="helog – Webに悩む人のネタ帳" 
 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>

ここで前回と同様にWordPressに対応させます。すると以下のようになります。

<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>

ちなみに、以下がこれまでに埋め込んでいた旧はてなブックマークのコードです。設定部分が少ない分、比較的シンプルになったのかな。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>">
<img src="/images/append.gif" 
 width="16" height="12" 
 style="border: none;" 
 alt="このエントリーをはてなブックマークに追加" 
 title="このエントリーをはてなブックマークに追加" />
<img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" 
 alt="はてなブックマーク - <?php the_title(); ?>" 
 title="はてなブックマーク - <?php the_title(); ?>">
</a>

押してみてもらえると分かるとおり、機能面でいうとだいぶ改善され、使いやすくなったように思います。