■1.スクリプトを読み込ませる
まずは以下のスクリプトタグを、Bloggerテンプレートの<head>要素内に設置します。
<script src='http://ejohn.org/files/retweet.js'/>
■2.ボタンを配置する
スクリプトタグを置いたら、後はボタンを好きな場所に置くだけです。以下のソースを任意の場所にコピペしてあげてください。
<a class='retweet' expr:href='data:post.url' expr:title='data:title + ": "+ data:post.title' />たったのこれだけでretweetボタンを配置することができます。いやー便利。
■トラブルシューティング
(1) もし上記のソースをコピペしても動かない!という場合には・・・
コピペする際にソースコード中の
"を
& quot;要するにHTMLの文字実体参照に差し替えてください。
※残念ながら、Bloggerの本文中にこの記号が含められないのです・・・
(2) もしボタンを配置する場所が分からない場合には・・・
コメント欄でご指摘いただいたのですが、Bloggerのテンプレートは長くて複雑で、初めての人には何処に何を置けばいいのか分かりづらいです。ということで、各投稿のフッター欄(post-footer-line)にRetweetボタンを配置するサンプルソースを書いてみました。
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-ほげほげ'>
<!-- ここになにやら難しい記述がたくさん -->
</span>
<!-- post-footer-line post-footer-line-1の一番最後に追加 -->
<a class='retweet' expr:href='data:post.url' expr:title='data:title + ": "+ data:post.title' />
</div> <!-- post-footer-line post-footer-line-1 ここまで -->
<div class='post-footer-line post-footer-line-2'>
<!-- ここになにやら難しい記述がたくさん -->
</div>
<div class='post-footer-line post-footer-line-3'>
<!-- ここになにやら難しい記述がたくさん -->
</div>
</div>
</div>
</b:includable>
■ちょっとだけ補足説明
http://ejohn.org/blog/retweet/に記載されているコードをそのまま何も考えずに貼り付けると、Retweet先が現在ロケーションバーに表示されている先になってしまいます。
このコードを貼り付けて自分のBlogのトップページなどからRetweetボタンを押してみると、すぐに変だと気づくはずです <a class='retweet self' href='' />そこでBloggerのテンプレートXMLの記法を利用して、現在の記事のタイトルとURLを正しく指定してやります。具体的にはexpr:hrefとかdata:post.urlとかです。どうやら、expr:をhtmlの任意の属性に付けてやると、data:post.urlとかdata:titleとかが利用可能になるっぽいです。expr:を付けた属性の中で任意の文字列リテラルを利用したいときは
& quot;で文字列を囲み、+で文字列を結合してやることができるみたいです。