Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

JavaScript 小技集

「TwitterFollowBadge」がIEで見れない件の対応方法

投稿日:


なんか、近くで嘆きの声が聞こえた気がするので(w)さらっと書いときます。
TwitterFollowBadgeっていう、ブログのサイド(右か左)にはれるTwitter用のブログパーツがあるんだけど、これInternet Exploror(以下IE)で問題が発生する場合があります。
TwitterFollowBadge
↑こんなやつね。
特にIE7でブロウザの読み込みが止まっちゃうっていう現象がでてる場合がありますが、同じページはIE6だとBadgeが表示されていないと思います。つまり、IE系でサイトが見えてない可能性があります。
これについて、公式サイトの説明では、

Paste it on your site template right before the “BODY” end tag (</body>)

via: Twitter “Follow” Badge for your site / blog

コピーしたJavaScriptコードはbody閉じタグの直前に書いてくれって書いてます。一応それで、エラーはでなくなるのですが、使っているブログサービスによってはテンプレートの変更ができずbodyタグの直前に書けない場合もあると思います。ので、この問題の原因とちゃんとした対応を続きに書きます。

問題の部分

まずは、公式サイトで出力されるコードを見てみます。

<!-- twitter follow badge by go2web20 -->
<script src='http://files.go2web20.net/twitterbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'yager';
tfb.label = 'follow-me';
tfb.color = '#35ccff';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->

恐らくこんな感じになっていると思いますが、肝心のロジックはhttp://files.go2web20.net/twitterbadge/1.0/badge.jsに書いてあるので覗いてみました。
すると、tfb.showbadge関数のなかでこんな記述が。

document.body.appendChild(tfbMainDiv);
tfbMainDiv.innerHTML='〜HTML省略〜';

bodyに対してdiv要素を追加して、しかもその要素にinnerHTMLでHTMLを流しこんでいるのですね。これ、bodyのload後であれば問題ないのですが、そうでない場合IEで問題が発生する場合があります。(body閉じタグの直前に書けっていってるのはそういうこと)実際にtfb.showbadge関数を読んだあとにGoogle Analyticsとか他のコードが書いてあるとIEでエラーになる事があります。

修正方法

本家のJavaScriptを修正することはできないので、貼り付けるコードに少し工夫をしてやると対応ができます。
bodyが読み込まれた後に関数が実行されればいいのでイベントリスナーを使って書き換えてみます。

<!-- twitter follow badge by go2web20 -->
<script src='http://files.go2web20.net/twitterbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'yager';
tfb.label = 'follow-me';
tfb.color = '#35ccff';
tfb.side = 'r';
tfb.top = 136;
tfb.addEvent = function(element, type, func) {
if(window.addEventListener) {
element.addEventListener(type, func, false);
} else {
element.attachEvent('on' + type, func);
}
}
tfb.addEvent(window, 'load', tfb.showbadge);
--></script>

まあ、自分のブログで試してないのでアレですが・・・

まとめ

どうでもいいですけど、Twitterのブログパーツと言えばtwignatureTwitGIFなんてのもあるので、是非使ってみてくださいね。JavaScriptを使わないので簡単ですよ。
・・・とか、なぜか最後は宣伝っていうw

-JavaScript, 小技集

執筆者:

関連記事

no image

Ffmpegで60fps動画を30fpsにスローモーション変換する(映像、音声両方)

FFmpegのオプションはいつまで経っても覚えられないので使ったコマンドは書いとかないと絶対忘れますね。というわけで備忘録。 アクションカメラJVC ADIXXION GC-XA2を買ったのもあって動 …

Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

修正を重ねている「第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く」で作った関数ですが、ようやく完成系になったかもしれません。 今回は画像(IMGタグ)のonloadの扱い …

Re: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

[追記:2008/07/04] 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。 ・Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く …

Huluで「寝落ちワープ」しない方法

こんにちは、寝落ち王ヤガーです。 割りと夜遅くまで仕事(だったり他のPC作業)してるんですが、すでにちょっと眠いくせに一日の最後は何かお楽しみを・・・なんて考えてHuluを見たりします。Huluはみな …

PinterestをAPI化するYahoo!PipesとjQueryブログパーツサンプル

最近、TwitterやFacebookのタイムラインでPinterestの名前を目にすることが多くなり、とりあえずアカウント作って試してみました。 ・Takahito Yagami (takahito …

スポンサードリンク

スポンサードリンク