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

執筆者:

関連記事

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

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

no image

PostgreSQLでCSVやTSV用に改行コードを取り除く方法

DBからCSV(カンマ区切り)やTSV(タブ区切り)でデータを出力するってことがたまにあるのですが、出力するデータに改行が入っているとCSVやTSVのフォーマットが崩れてしまってエクセルなどでうまく開 …

no image

第5回:twitter の JavaScript Badge を改造する

しつこく twitter ネタでまいります。 前回の記事で JavaScript の Badge がちゃんと動くようになりました。これで CSS を使えば自由にレイアウトできるようにはなったんだけど、 …

第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる

twitter 流行ってますね。みなさんも使っていますか? オレはというと…ポツリポツリと呟いています。 friends は2人しかいません orz twitter は SNS 的な使い方もできるツー …

Facebookの「Recommendations Bar」が端っこから微妙にズレる件の修正方法

Facebookソーシャルプラグインの1つRecommendations Barは、ソーシャルグラフを解析し見ているページに関連するオススメページをブラウザ画面の端っこに表示してくれる機能を持っている …

スポンサードリンク

スポンサードリンク