2009年12月16日水曜日

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

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

たまに見かけるブログの横にある 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>

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

10コメント:

Bookzz さんのコメント...

このエントリーで、あきらめかけていたバッジをサイトにつけることができました。ありがとうございました!!

☆ふじっこ☆ さんのコメント...

Twitterを始めたら付けたいと思っていましたが表示されずあきらめかけていました。
ありがとうございました。

syo5 さんのコメント...

助かりました!ありがとうございます。とてもグッドなエントリーですね!

ari さんのコメント...

私もFollow meボタンをつけることができました。
ありがとうございました。

匿名 さんのコメント...

わたしもつけることができました!
ありがとうございました!

KIBOKO さんのコメント...

今朝から全然表示されず困り果てていたところ、
コチラのブログにたどり着きました!
そして、無事に表示されました!
役立つ情報どうもありがとうございます!!

passeggiata さんのコメント...

ありがとうございました。感謝感激です(^o^)

tsunet さんのコメント...

役に立ちました!リンク付きで紹介させてもらいました→http://blog.elephancube.jp/2011/01/follow-us-blogger.html

310kyoto さんのコメント...

ありがとうございます。付けられました。

Unknown さんのコメント...

参考にさせていただきました。備忘録としてBLOGに投稿してあります。
http://taka1028.blogspot.com/2011/10/twitterfollowblog.html