IE7でTwitter公式ツイートボタンのカウント数が表示されなくなった


この記事は2011年6月に掲載されたものです。
状況が変わったり、リンク先が変わっている可能性があります。

数日前からIE7(IE8は未使用)で、Twitter公式ツイートボタンのカウント数が表示されなくなった。FireFoxでは問題ない。私が運営している複数サイトすべてで発生しており、WordPressだけでなく、Movable Typeでも起こっている。また、ネット上の異なるホスティング先でも同じ現象が起こっているのを確認した。

最初はプラグイン(WP Tweet Button)を疑ったが、バージョンと無関係に発生しているし、コードを直接記述しているMovable Typeでも起こっているので、呼び出しているJavaScriptに原因があると考えた。WP Tweet Buttonはヘッダーに次のJavaScriptを指定する。

<script type='text/javascript' src='http://platform.twitter.com/widgets.js?ver=1.1'></script>

WordPress+IE7だと、ブラウザのステータスバーに「実行しましたが、ページでエラーが発生しました」が表示される。この「ver=1.1」に問題があるのではないかと思い、WP Tweet Buttonを停止して、テンプレートに直接コードを書くことにした。当サイトではindex.php、page.php、single.phpに次のコードを入れた(マージンは投稿とページで異なるので微調整)。するとIE7でエラーが消え、カウント数が表示されるようになった。

<div style="float:right;margin:0 0 10px 10px;"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?> / <?php bloginfo('name'); ?>" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
対応前

対応前

対応後

対応後

Movable Typeは元々プラグインを使っていないので、直すべきところがない。エラーは表示されないが、記事によってカウント数が出たり出なかったりする。Movable Type+IE7で発生するなにかを、JavaScript側でしたとしか思えない。放置していたら、6月3日夜になって表示されるようになった。

IE6はもう対応しなくても仕方ないが、IE7ユーザはまだそれなりにいるのだから、こういうことは避けてほしいものだ。

(2011年7月10日追記)

これと同じタイミングだと思うが、文字コードがUTF-8以外のページで、Twitter公式ツイートボタンが表示されず、「Twitter」というテキストのみが表示されるトラブルも発生した。原因は呼び出しているJavaScriptがUTF-8にしか対応しなくなったためで、呼び出すときに文字コード

charset="UTF-8"

を指定すればいい。

<div style="float:left;margin:0 10px 10px 0;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="UTF-8"></script></div>

UTF-8が多いWordPressではこの障害は起こりにくいが、HTMLをSJIS(Shift_JIS)で書いている場合や、使っているブログサービスがSJISやEUC-JPの場合に発現する。公式ツイートボタン自身のページでもこの障害が発生し、長らくそのままだった。こうしたことを含め、6月から仕様変更があったのは間違いないと思う。詳細は「THE HAM MEDIA BLOG」がわかりやすい。


1件のコメント

  1. うちのサイトではもともとカウンタ表示なしのアイコン表示だったのが、アイコン表示がされなくなりました。ほんの数日前からです。関係ありそうな。javascriptとかが変わったのかなぁ・・・

    情報収集してこちらにいきあたりました。

Comments are closed.