はてなブックマークボタンリニューアル

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で挙動や見栄えを制御できる。

関連資料・記事