Blogger で Topsy ボタンを追加する

Blogger で Topsy ボタンを追加する方法です。

まず初めに、すぐに忘れる脳みそのためのメモ：Blogger に Twitter のつぶやくボタンを設置を参考に設置。残念なことに「Retweet」ボタンを押すと、タイトルの日本語が文字化けしてしまうことがわかりました。

次に、Blogger Tips & Tricks：How To Add Topsy Retweet Counter Buttons For Blogger を参考に設置。個々の記事詳細ページでは動作するのですが、トップページ（記事表示が複数ある場合）では旨く動作しないようです。

以下のように設置して解決しました。

「デザイン」＞「HTMLの編集」へ進み、「ウィジェットのテンプレートの展開」をチェック。テンプレート編集の前には必ずバックアップ！
class=”post hentry”を探し以下のコードを埋め込む。YOUR_TWITTER は自分の twitter アカウントに置き換え。

<div style="float: right; padding: 4px;">
  <script expr:src="&quot;http://button.topsy.com/widget/retweet-big?nick=YOUR_TWITTER&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" type="text/javascript"></script>
</div>

url と title を明示的に指定してあげることがポイントです。

なお、b:includable id=”post” var=”post” を含むタブで囲まれた箇所ならばどこにでも埋め込めるはずですので、デザインに合わせて設置してください。