Blogger ブログテンプレートに新「はてなブックマークボタン」を追加する

新「はてなブックマークボタン」公開記念キャンペーンなんてのをやっていたんだなぁ。

• はてなブックマーク日記: 新「はてなブックマークボタン」をリリースしました。

ということで、少し時期をはずした感有りだけど、新「はてなブックマークボタン」を追加してみた。

元々、旧「はてなブックマークボタン」を追加していたので、それを差替えることになる。

その元々の設定というのは、こちらを参考にして設定したものなので、今回の差替えも、それがベースになる。

自 Blogger ブログの デザイン > HTML の編集 を選択し、表示されたテンプレートの内容から、「post-header-line-1」を検索し、

次の修正を行う（スタンダードタイプボタンの例、バーティカルタイプは data-hatena-bookmark-layout 属性に 'vertical'、シンプルタイプは 'simple' を設定する）。

view plainprint?

1. ...  
2.     <!-- <div class='post-header-line-1'/> -->  
3.     <div class='post-header-line-1'>  
4.       <!-- 新はてなブックマークボタン -->  
5.       <span>  
6.         <a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'>  
7.           <img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/>  
8.         </a>  
9.         <script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>  
10.       </span>  
11.     </div>   
12. ...  

...
    <!-- <div class='post-header-line-1'/> -->
    <div class='post-header-line-1'>
      <!-- 新はてなブックマークボタン -->
      <span>
        <a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'>
          <img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/>
        </a>
        <script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
      </span>
    </div> 
...

「テンプレートを保存」後、テストしてみると

はてなブックマーク登録は問題ないみたいだが、ブックマーク数の反映にタイムラグありか？

2012.03.12 追記:
どうやら、行動情報が取得されているらしいな！

• NAVER まとめ: はてなブックマークボタンのトラッキング問題で高木浩光先生が決別ツイートをするに至った経緯まとめ

行動情報非取得版があるので、そちらを使用する場合は、

view plainprint?

1. ...  
2.     <!-- <div class='post-header-line-1'/> -->  
3.     <div class='post-header-line-1'>  
4.       <!-- 新はてなブックマークボタン(行動情報非取得) -->  
5.       <span>  
6.         <a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'>  
7.           <img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/>  
8.         </a>  
9.         <script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button_wo_al.js' type='text/javascript'/>  
10.       </span>  
11.     </div>   
12. ...  

...
    <!-- <div class='post-header-line-1'/> -->
    <div class='post-header-line-1'>
      <!-- 新はてなブックマークボタン(行動情報非取得) -->
      <span>
        <a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'>
          <img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/>
        </a>
        <script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button_wo_al.js' type='text/javascript'/>
      </span>
    </div> 
...

変更点は、

view plainprint?

1. -        <script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>  
2. +        <script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button_wo_al.js' type='text/javascript'/>  

-        <script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
+        <script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button_wo_al.js' type='text/javascript'/>

自分で設定したのは、これで変更できるけど、zenback からのはどうなるかな？