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, 小技集

執筆者:

関連記事

MovableTypeでカテゴリーを整理した一部始終

先日、ブログデザイン勉強会に参加したこともありますが、本格的にリニューアルを考えています。 勉強会ではブランディングとかデザインによるイメージ作りがメインになりそうなので、それとは別に機能的な部分のリ …

どれだけMacを開いていたかが丸わかり!?Macでスリープ・解除の履歴を確認するコマンド

どもども、お疲れ気味のヤガー@yagerです。 忙殺されていると、なかなか自分がどのくらい働いているかも分からなくなってくる場合がありますが、月末月初は勤怠報告などで自分の稼働時間を泣きながらまとめて …

表紙で探すプログラマーっぽい写真

ブログデザイン勉強会 第3回を経て、このブログを的確に表現できる写真選びを進めています。が、ハッキリ言っていままで撮りためているストックの中には無いんじゃないかと思っています。ボクがよくカメラを向ける …

4マイク+5ヘッドフォンの音声収録機材

完全に自分用の備忘録ですが・・・(汗) Ustreamなどインターネットを使った動画生配信を何度か実施していて、地方からリアルタイムコンテンツを発信する良い媒体だと思っているので、少しずつでもできるこ …

第1回:CSSで画像にborderをつけてみる

記念すべき初回のエントリーはCSSによるborderのスタイルを色々試してみます。やっぱりフォトサイトで一番気を遣うのは写真(画像)を表示するための <IMG>タグ だと思います。で、bo …

スポンサードリンク

スポンサードリンク