Blogger にTwitter Follow Badge を導入する方法

このエントリの目次

1. Twitter Follow Badgeとは
2. コードを生成する
3. Bloggerに設置する
4. さいごに

1.Twitter Follow Badgeとは

←これのコトです。

クリックすると、その人のツイッターにアクセスできます。

前から他のブログでよく見かけていましたが、今回、ようやく当ブログに導入するコトにしました。

2.コードを生成する

Twitter "Follow" Badge for your site/blogにて、自動でコード生成できます。


上記サイトにてツイッターアカウント、「Follow me」などの文字列、背景色、左右のどちらに表示するか、などを入力していきます。

そして、キャプチャの「UPDATE CODE」ボタンをクリックします(赤丸で囲んだ部分)。

すると、貼り付けるべきコードが表示されます。
あとはBloggerに設置するだけ！

3.Bloggerに設置する

テンプレートのHTMLを直接編集して設置します。

まずは、Bloggerの設定ページで「テンプレート」を選択し、「HTMLの編集」ボタンを押します。


すると、下記のような画面になります。
「上級ユーザーにのみおすすめします」という怖い注意書きがありますが、いつでもデフォルトに戻せるので気にせず、「続行」ボタンを押します。


以下のようなHTMLエディタが表示されます。


いよいよコードの貼り付けです。
</body>というタグを見つけ、そのすぐ上に先ほどのコードをペタリと貼り付けるのですが…。

でもコードを二箇所だけ、修正する必要があります

Bloggerで使うには、ちょっと修正が必要です。

<script>タグの直後の<!--と</script>タグの直前の-->を、それぞれ&lt;!--と--&gt;に修正します。

具体的に言うと…。

修正前。

<script src="http://www.go2web20.net/twitterfollowbadge/1.0/badge.js" type="text/javascript">
<script charset="utf-8" type="text/javascript"><!--
tfb.account = 'ico_mob';
tfb.label = 'follow-me';
tfb.color = '#35ccff';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
-->
</script>

修正後。

<script src="http://www.go2web20.net/twitterfollowbadge/1.0/badge.js" type="text/javascript">
<script charset='utf-8' type='text/javascript'>&lt;!--
tfb.account = 'ico_mob';
tfb.label = 'follow-me';
tfb.color = '#35ccff';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
--&gt;
</script>

あとは、「テンプレートを保存」ボタンを押して、完了です！

4.さいごに

今更感はありますが、流行にのってみました。

よろしければフォローして下さい。
それでは。

参考にさせて頂いたサイト。
Twitter Follow BadgeをBloggerで使う方法 | 試行錯誤