はてなブックマークボタンが新しくなった! WordPressに新はてブボタンを導入する方法

12年前

当ブログでも設置している、はてなブックマークのはてブボタンが、装いを新たにバルーンスタイルのデザインに切り替わっていました。

というわけで、早速ブックマークボタンのコードを入れ替え。バルーンスタイルになって他サービスとの調和が取れましたね。

ボタンを押したときに表示されるコンテンツの表示速度を改善しました。ブックマークしたユーザーさんの感想などを素早くチェックできます。

via. はてなブックマークボタンに新しいデザインを追加し、表示速度を改善しました – はてなブックマーク日記 – 機能変更、お知らせなど

というわけで、表示スタイルのみならず表示速度の改善も図られているそうです。これは新しいブックマークボタンにせざるを得ませんね。

導入に関しては、以前のブックマークボタンと同じ。
はてなブックマークが用意している作成ページで、コードを取得することができます。

[外部リンク] はてなブックマークボタンの作成・設置について

表示スタイルは、TwitterやFacebook、Google+のソーシャルボタンと同じバルーンスタイル。
シンプル(ボタンのみ)、シンプル(ブックマーク数あり)、スタンダード、バーティカルの4種類が用意されていますよ。

一応、WordPressな人向けの導入コードを種類別に書いておきます。

シンプル

シンプルは、正方形に近い形のアイコンのみのスタイルか、それにプラスしてブックマークのカウントがバルーンで表示されるスタイルかを選ぶことができます。

ボタンのみ

<a href="https://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" 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>

ブックマーク数あり

<a href="https://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="simple-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="async"></script>

スタンダード

スタンダードボタンは、他サービスのボタンでも採用されているオーソドックスなスタイルといった感じですかね。
ただ、やや他サービスと比較して横幅が広め。
横一列に並べて表示する場合は、若干CSSの調整が必要になると思います。

<a href="https://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard-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="async"></script>

バーティカル

こちらは縦一列表示などでよく使われる印象がある縦型ボタン。
ブックマーク数がラベルの上に表示され、数字も大きく見やすいスタイルですね。
やはり横幅が広めなので、ちょっと調整が必要でしょうか。

<a href="https://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" 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="async"></script>

なお、今度の新はてなブックマークはjavascriptを利用したものになっています。
すべてのコードにjavascriptのコードが含まれているのですが、個人的にこれはheadタグの中に入れてしまえばいいかなと思います。

まぁそのあたりは個人の裁量次第なので、お好きなやりかたでどうぞ。

入れ替えてみたところ、確かに表示も速くなったような気がします。デザイン的にもしっくりくるし、やっぱり新しいことはいいことですね。

なお、これまでのはてなブックマークボタンも問題なく使えるそうです。新ボタンよりも旧ボタンのほうがいいよっていう人は、以下のページで旧ボタンの作成もできるようになっています。

[外部リンク] はてなブックマークボタンの作成・設置について

シンプル

スタンダード

バーティカル

関連記事