■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;
で文字列を囲み、+で文字列を結合してやることができるみたいです。