2011年1月7日(金曜日)

はてなのブックマークボタンが使いやすく……?

公開: 2011年1月10日16時35分頃

お仕事で、とあるサイトに「はてなブックマーク」の「B!」ボタンをつけたいというお話があり。普通に実装しようと思ったら、いつの間にかボタンが新しくなっていたのですね。

使いやすくなりました! はてなブックマークボタン (b.hatena.ne.jp)

で、コードを生成して貼って終了……と思いきや、問題が発生。生成されたコードをよく見ると、こんな感じになっています。

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

a要素に data-hatena-bookmark-layout という属性がついています。これはHTML5で検討されているカスタムデータ属性です。

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

以上、3.2.3.8 Embedding custom non-visible data with the data-* attributes より

script要素のasync属性もHTML5ですね。

The async and defer attributes are boolean attributes that indicate how the script should be executed. The defer and async attributes must not be specified if the src attribute is not present.
There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available.

以上、4.3.1 The script element より

XHTML1.0などを使っている場合、これらの属性はありませんので、validになりません。asyncは消しても問題ありませんが、data-hatena-bookmark-layoutは消すと動作が変わってしまいます。

個人サイトならHTML5にしてしまうとか、invalidでも気にしないとかいう選択肢もあるのでしょうが、業務で作っている場合は困ります。はてなの提供するコードを無視して実装し直す、という選択がいちばん現実的なのかも……。

「はてなのブックマークボタンが使いやすく……?」にコメントを書く