Bloggerの個別記事にに新しいHatenaブックマークボタンを貼付けてみる

Bloggerの個別記事にに新しいHatenaブックマークボタンを貼付けてみる

使いやすくなりました! はてなブックマークボタン
http://b.hatena.ne.jp/guide/bbutton

ということなので、ブックマークボタンを貼り直してみた。



以下のタグをコピー&ペーストしても、個別の記事をブックマークできない。

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

理由は、bloggerの個別記事urlとか渡してないから。
すぐググって答えを見えるのはつまんないのでちょっと考えてみる。

レイアウト用ウィジット タグ - Blogger ヘルプ
http://www.google.com/support/blogger/bin/answer.py?hl=jp&answer=46995

レイアウト データ タグ - Blogger ヘルプ
http://www.google.com/support/blogger/bin/answer.py?hl=jp&answer=47270

を参考に、個別記事urlを渡すように書き換えてみたけどうまく動かない。

正解を調べてみた。

見つけた正解はこの記事。
SMAC: Diary: 新しいはてなブックマークボタンをBloggerに貼り付ける
http://smac.catphoto.net/2010/11/blogger.html

以下のスクリプトを参考に

<b:if cond='data:blog.pageType == "item"'>  
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'  
     class="hatena-bookmark-button"  
     expr:data-hatena-bookmark-title='data:post.title + " : " + data: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>  
<b:if cond='data:post.isFirstPost'>  
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>  
</b:if>  
</b:if>  

自分のサイトに貼付けたスクリプト

<b:if cond='data:blog.pageType == &quot;item&quot;'>      
 <a  expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'  
 class="hatena-bookmark-button"  
 expr:data-hatena-bookmark-title='data:post.title + " : " + data: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>  
 <b:if cond='data:post.isFirstPost'>  
  <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js"  charset="utf-8" async="async" ></script>   
 </b:if>  
</b:if> 

自分で考えたのが動作しなかったのは expr を使っていなかったから。

exprとは何か調べた。

exprの使い方の英語情報を発見
New Blogger: expr - how to convert template tags to data tags for social bookmarking badges etc - A Consuming Experience
http://www.consumingexperience.com/2007/01/new-blogger-expr-how-to-convert.html

Remove labels from post headings - Blogger Help
http://www.google.com/support/forum/p/blogger/thread?tid=585ce4f6ac4eb980&hl=en

exprの使い方の日本語情報
Blogger in Draft投稿エディタへのリンクを示すデータ タグは存在するのでしょうか？ - Blogger 公式ヘルプフォーラム
http://www.google.com/support/forum/p/blogger/thread?tid=6b0c95cc82996a26&hl=ja

htmlタグ内のシングルクォートで囲まれている要素に、Bloggerのデータタグを埋め込むときに使えるらしい。