新型はてなブックマークボタンを速くする
新型はてなブックマークボタン使ってます？ぶっちゃけあんまり見ない気もしますが、↓みたいな感じで thickbox が開いたりして結構便利ですよ！
Twitter とか Facebook のボタンと似たような感じで今風なのも(･∀･)ｲｲ!!
つーことで、このブログにも新型はてブボタン置きたいなーと WordPress のテンプレいじくってたりしてたんですが、ブラクラかと思うぐらいに新型はてブボタンが遅かったので、もうちょいキビキビ動くように最適化してみました。
速くする
遅い原因も調べてますがとりあえずその辺は後述ということで、先に新型はてブボタンの動作を速くする方法から書いていきます。
まずはてブのボタン配信ページから貼り付けコードを取得します。こんな感じの HTML スニペットがもらえると思います。
<a href="http://b.hatena.ne.jp/entry/http://sakuratan.biz"
class="hatena-bookmark-button"
data-hatena-bookmark-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>
class="hatena-bookmark-button"
data-hatena-bookmark-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 タグ部分をボタンを置きたい箇所に、script タグ部分を HTML ファイルの末尾に分けて貼ります。
a タグ部分はこんな感じ。1ページに何個もはてブボタンを置きたい場合は、置きたい箇所それぞれに a タグのみを記述します。
<a href="http://b.hatena.ne.jp/entry/http://sakuratan.biz"
class="hatena-bookmark-button"
data-hatena-bookmark-title="さくらたんどっとびーず"
data-hatena-bookmark-layout="standard"
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
alt="このエントリーをはてなブックマークに追加"
class="hatena-bookmark-button"
data-hatena-bookmark-title="さくらたんどっとびーず"
data-hatena-bookmark-layout="standard"
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
alt="このエントリーをはてなブックマークに追加"