Twitterのバッジ(Go2web20.net製)をサイトに貼っているサイト管理者の方々へ。

上記URLで配布しているTwitterバッジ原因で、IE(Internet Explorer)のVer.7でのサイト閲覧時に、ブラウザごと強制終了で落ちる現象が起こっていました。

最初この現象について記事を書いて一時的に公開した時「配布スクリプトに不具合がありそうだ」みたいなことを言っていましたが・・・製作者さま、そして記事を見てパーツを外してしまったサイト管理者の方々、誠に申し訳ありません！私の記述ミスによって引き起こされたエラーでした。

今回のミスですが、海外サイトの配布パーツということもあり、うっかりすると私でなくとも起こしてしまいそうなエラーだと思いましたので、詳しく解説させて頂きます。まず掲載サイト(Twitter “Follow” Badge for your site / blog)をご覧頂きたいのですが、

(スクリーンショット。クリックで拡大画像を表示します。)

それぞれの設定値を入力して、コードを取得してコピペ！だけで設置できそうなのですが、完成コードのさらに下、最後までよく見るとこんな注意書きがります。

3行目に注目。

この一文を非常に軽く読んでしまったのがまずかったです。英語で最後の方に書かれているので、人によってはスルーしてしまうのではないでしょうか。

私の場合は軽く読み過ぎて、終了タグの直前にはアクセス解析のコード30行を挟んでしまい、さらにその前にTwitterバッジのコードを貼っていました。そのため~~コードの干渉が起き~~(*1)JavaScriptの実行にエラーが起き、IE7を叩き落とす凶悪サイトになってしまったというわけです。

ちなみにエラーが起きると具体的にどうなるかと言うと、下記が発生してブラウザごと落ちます。

強制終了時の現象: 「開けません、インターネットサイト http://.com. 操作は中断されました。(KB927917)」
(Microsoft サポートオンライン、機械翻訳)
“Why do I receive an “Operation aborted” error message when I visit a Web page in Internet Explorer?“
(同、英語原文)

(*1)については頂いたコメントを元に訂正しました。起こったのはコードの干渉ではなく、Twitterバッジのスクリプトの位置が原因で起きるエラーです。スクリプトにはコンテナの内容に変更を加える記述があり、スクリプトが子コンテナの位置から親コンテナの内容を変更しようとする事でエラーが発生します。

当WEB人の場合、エラー発生時は下記のような誤った記述になっていました。(ここではbodyが親コンテナとなり、divが子コンテナとなります。)

<body>
[親コンテナの内容]
<div>
[子コンテナの内容]
[Twitterバッジのスクリプト]
</div>
</body>

スクリプトが子コンテナに入っています。子コンテナのスクリプトが親コンテナの内容を変更する形。下記のような構造での記述が正解です。

<body>
[親コンテナの内容]
<div>
[子コンテナ内容]
</div>
[Twitterバッジのスクリプト]
<body>

スクリプトが親コンテナに入っています。これなエラーは起きません。

また、落ちない場合でもこの様な状態でした。

(スクリーンショット。クリックで拡大画像を表示します。)

このサイトの右端にも復活しているように、ちゃんと終了bodyタグの直前に貼れていれば、大人しくて控えめでお洒落なとても良い子です(笑)

今回のTwitterバッジですが他のサイトでも使っているところをよく見かけるので、もし同じように使っているサイト管理者様がいらっしゃれば今一度、記述位置のチェックをおすすめします。お騒がせしてしまい誠に申し訳ありませんでした！

教訓、ブログパーツやウィジェットの取り扱いは慎重に行いましょう。

追伸1: 最初にはてなブックマークのコメントでIE7のエラー落ちを指摘してくれたid:itboy(A Day In The Boy’s Life)さん、新たに記事へのコメントも頂きありがとうございました！
追伸2: コメントでご指摘＆解説を頂いた名無しさん、ありがとうございました！