Blogger記事に「はてなブックマーク」ボタンを設置する方法 | Asterlist公式ページで発行した最新の埋め込みタグ(https対応版)とマージして微調整した、以下のタグを埋め込むことにしました。
http://blog.asterlist.com/2012/11/1001.html
<div class='goog-inline-block'> <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' class="hatena-bookmark-button" expr:data-hatena-bookmark-title='data:post.title' data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"> <img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /> </a> <script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"> </script> </div>
ただ、参考記事のように `「data:post.body」の直下に記述` だとうまく表示されませんでした。
テンプレートは「シンプル」を使っています。
そこで、Googleが元々提供しているSNSボタンがあるので、並べるような形で以下の位置に埋め込んでみたら、いい感じに馴染んでくれました!
1466行目~
- 変更前
<b:includable id='shareButtons' var='post'> <b:if cond='data:top.showEmailButton'> <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'> <span class='share-button-link-text'> <data:top.emailThisMsg/> </span> </a> </b:if>
- 変更後
<b:includable id='shareButtons' var='post'>
<div class='goog-inline-block'>
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='simple-balloon' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' title='このエントリーをはてなブックマークに追加'>
<img alt='このエントリーをはてなブックマークに追加' height='20' src='https://b.st-hatena.com/images/entry-button/button-only@2x.png' style='border: none;' width='20'/>
</a>
<script async='async' charset='utf-8' src='https://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'>
</script>
</div>
<b:if cond='data:top.showEmailButton'>
<a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'>
<data:top.emailThisMsg/>
</span>
</a>
</b:if>