2010/11/27
Twitterの「ツイート」ボタンやFacebookの「いいね!」ボタンと比べてやや古い印象が拭えなかった「はてなブックマーク」ボタンですが、先日リニューアルされて洗練された印象に変わりました。
見た目だけでなく、画面遷移なしにその場でブックマークが可能になり、ユーザビリティが向上しています。
今までの画像アイコンによる手段も残しながら、既存のコードを少し変更するだけでリニューアルの恩恵が受けられるので当サイトでも導入しつつ、変更手順をまとめておきます。
JavaScriptコードをロード
専用のJavaScript外部ファイルを読み込む
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async">
コード変更
ブックマーク用URLは変更なし
ブックマーク数用画像の指定が不要に
ブックマーク用URLのアンカータグにclass指定(hatena-bookmark-button)とボタンの種類を指定する専用属性(data-hatena-bookmark-layout)を追加
(変更前)
<a href="http://b.hatena.ne.jp/entry/<対象URL>"> <img src="http://b.hatena.ne.jp/entry/image/<対象URL> alt="" /> </a>
(変更後)
<a href="http://b.hatena.ne.jp/entry/<対象URL>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard"> </a>
data-hatena-bookmark-layoutは以下の3種類が指定可能。
standard(アイコンとブックマーク数)
vertical(ブックマーク数を含む大きなアイコン)
simple(アイコンのみ)
ブックマーク用ボタンの挙動・見栄え制御
ボタンはiframe内にclass「hatena-bookmark-button-frame」を伴って生成されるので、これに対してJavaScriptやCSSで挙動や見栄えを制御できる。
関連資料・記事