Blogger でサイドに Twitter の Follow me のバッジを付ける

1. Twitter の Follow me バッジをつけたい

Twitter "Follow" Badge for your site / blog
via kwout

たまに見かけるブログの横にある Twitter の Follow me のバッジ。どこのサービスを利用しているのだろう？

ブログの横に「Follow me」バッジをつける方法・・・ - IDEA*IDEA ～ 百式管理人のライフハックブログ によると、

このバッジをつけるツール、たくさんあるかと思いきや、探してみたらGO2WEB20のものしかないようですね・・・。

 

2. コードの生成とテンプレートの編集

早速、Twitter "Follow" Badge for your site でコードを生成。

• Blogger のダッシュボード > レイアウト > HTML の編集 の「テンプレートの編集」

において、</body> タグの前に貼り付けた。

しかし、バッジが表示されず。 (+_+)

 

3. <> を HTML の特殊文字に置き換える

Blogger Buster: 16 Useful Twitter Tools for Blogger によると、Blogger で表示させるには、上記のコードを HTML/JavaScript のウィジェットとして追加するか、または、

Replace <-- and --> in the generated code with &lt;-- and --&gt; (this enables the script to function correctly and display the badge in your page)

script タグ内の < > を HTML の特殊文字 に置き換えることによって動作するようだ。

先ほど生成されたコードの中の

<script  … ><!--

…

--></script>

を

<script  … >&lt;!--

…

--&gt;</script>

に変更することで、バッジが表示されるようになった。