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

第15回:見ているページをAnother HTML-lintで文法チェックするブックマークレット

サイトを作ったら、見た目の確認も重要ですがマークアップの文法チェックも重要です。別にW3C信者という訳ではありませんがSEOの面でもstrictなHTMLの方が良さそうなのでできる限り対応した方が良い …

有名ブログのアクセス解析と比較して、自分のブログの特性を知る

2008年の総括はすでにエントリーしたのですが、ユルカン PC Lifeで[N]ネタフルさんのアクセス解析情報(Google Analytics)が公開されていたので、自分のとこと比較してみようと思い …

no image

第13回:URLエンコードとURLデコードを簡単にするブックマークレット

URLエンコードとURLデコードって頻繁には使わないけど、いざ使う時は適当にGoogleで検索して出てきた変換サイトを使っていたりしました。 この辺とか、 URLエンコードとデコードが行えるフォームで …

Googleドライブのフォーム機能は初期値をセットできる

とても便利なのにあまり知られていないらしいことが分かったのでエントリー。 Googleドライブのフォームは本当に便利で、アンケートやお問い合わせフォームが本当にサクッと数分でできちゃいます。以前書いた …

no image

AmazonはTwitterで自由にアフィリエイトして良いとは言ってないっぽい

via: Amazon アソシエイト・プログラム(アフィリエイト) 公式ブログ: 「Twitterで共有」、始まりました! Amazonがアソシエイト・バーで公式に「Twitterで共有」機能を提供し …

スポンサードリンク

スポンサードリンク