BloggerにSNSボタンを設置する

Katana Test ShotBloggerの記事末尾にSNSボタンを設置する方法を紹介します。
photo credit: mazgrp


まず、忍者おまとめボタンのページにて、アカウント登録を終えてください。そして、以下の様な手順を踏みコードを発行します。





そして、管理画面にてテンプレート > HTMLの編集 > 続行 > `ウィジェットのテンプレートを展開`と進みます。



そこで、div class=’post-footer’という文字列を検索し、最初にヒットした<div>タグ内にコードを挿入し、編集を保存します。

<div class='post-footer'>

<!--###ここから###-->
<div class='ninja_onebutton'>
<script src='http://omt.shinobi.jp/xxxxxxxx' type='text/javascript'/>
<span class='ninja_onebutton_hidden' style='display:none;'><data:post.url/></span><span class='ninja_onebutton_hidden' style='display:none;'><data:post.title/></span>
</div>
<!--###ここまで###-->
<div class='post-footer-line post-footer-line-1'><span class='post-icons'>


忍者おまとめボタンは遅くなりすぎるので、公式ボタンを使ってみる

忍者おまとめボタンは遅くなりすぎるので、公式ボタンを使ってみます。例えば、Bloggerの各種記事をブックマークしてもらうには、個別記事のURLを表現するdata:post.urlと個別記事のタイトルを表現するdata:titleを使います。


また、<b:if cond='data:blog.pageType == "item"'></b:if>で囲むことで、トップページに表示しないように出来ます。

<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>


以上のタグを上で説明した場所に追記すると、はてなブックマークの公式ボタンを使用できます。