Twitter Follow Badge を付けてみました

一昨年あたりからよく見かけるようになった Twitter Follow Badge を周回遅れになりながらもこのブログに導入してみました。今は雑多な内容しかありませんが、ぜひサイト右側のバッジから飛んでフォローしていただければと思います。

ところでこちらの Follow Badge ですが、ブログに埋め込む際、懐かしい感じの罠に引っかかったので備忘録的にどのような対処で乗り越えたかを残しておきます。

自分はいつも JavaScript のコードを head タグ内に書いていることもあって、自動生成された以下のコードも慣例通り head タグ内にそのまま書いてしまいました。

<!-- twitter follow badge by go2web20 -->
<script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'UnibaRD';
tfb.label = 'follow-us';
tfb.color = '#FF9e26';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->

そうしたらなんと動きません。デバッガで調べてみると DOM のロードが終わる前に JavaScript のコードが先に走ってしまって動作していないことがわかりました。jQuery ばかり使っているとつい忘れてしまいがちですね。こういう時の解決方法は何種類かあって

1. DOM の構築が終わっているであろう body タグの終端に JavaScript のコードを置く
   → 大抵のブラウザでも動作する古めかしい方法だがモダンでない。(つまりダサい！)
2. load イベントを使ってコードを実行する
   → ブラウザによっては画像を含むすべてのコンテンツがロードし終わるまで load イベントが着火しない。
3. DOMContentLoad イベントを使ってコードを実行する
   → DOM の構築が終了した瞬間イベントが着火するが IE が対応していない。 (IE9 で対応予定)

1, 2 あたりが正攻法になると思います。自分は jQuery が大好きで仕方がないので jQuery.ready メソッド (動作的には DOMContentLoad とほぼ等価でクロスブラウザ対応) で解決することにしました。イベントの実行タイミング以外にも HTML 的に invalid なところもあったので最終的に以下のようなコードに修正して無事完了！

<!-- twitter follow badge by go2web20 -->
<script src="http://www.go2web20.net/twitterfollowbadge/1.0/badge.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function()
{
    tfb.account = 'UnibaRD';
    tfb.label = 'follow-us';
    tfb.color = '#FF9e26';
    tfb.side = 'r';
    tfb.top = 136;
    tfb.showbadge();
});
</script>
<!-- end of twitter follow badge -->

長々と書いてしまいましたが UnibaRD の Twitter を宜しくお願いしまーす。