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

執筆者:

関連記事

Deliciousの被ブックマーク推移グラフを表示するURL見つけた

ボクは普段ソーシャルブックマークサービスはDeliciousを使っているんですが、ブログ用にブクマ数やグラフ、タグなんかを表示できるTagometerというブログパーツが用意されています。 With …

no image

第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法

SimpleAPIをはじめたくさんのサムネイルAPIサービス(もちろん無料)のおかげで、簡単にサイトのスクリーンショットをサムネイル画像として自分のブログに貼り付ける事ができるようになりました。すでに …

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

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

no image

第14回:JaikuのJavaScript BadgeをJSONから作ってみる

JaikuがGoogleに買収されるという事でにぎわっていますね。 Googleは、フィンランドのヘルシンキを拠点とするモバイルソーシャルネットワーキングプロバイダJaikuを買収する。Jaikuは、 …

ちょっとまった!→FeedBurner経由の分散したブックマークを一つにまとめる方法

つい先日、FeedBurnerのトラッキング用パラメーターを取り除くUserScriptというのを公開したのですが、FeedBurnerやTwitterFeedが勝手に追加してくるパラメーターがウザイ …

スポンサードリンク

スポンサードリンク