THE HAM MEDIA BLOG

先日より、Twitter公式のフォローボタンがリリースされていましたけど、そのフォローボタンがリリースされたくらいから、ブログに導入をしていたTwitterのボタンが表示されなくなっていました。

しかし、このブログ意外のサイトでは普通に表示されているところが多いし、Google Chromeでみた時は普通に表示されるという状態・・・なぜ！？

もし同様の問題がある人がいるかと思ったので、この問題の解決方法をかいておきます。

問題の原因と対処法

このブログにTwitterの公式ボタンを配置していたのですが、Firefoxでは、なぜか表示されない。Firebugでみてみると、ツイートボタンやフォローボタンで利用されいてる「widget.js」がなにやらエラーになっていた。なぜ！？

結論から書くと、この今回の問題の原因は、文字コードにあった。このブログはseesaaブログを利用している都合上、文字コードがShigt_JISの指定なんですが、Twitterで公式に公開されているツイートボタンやフォローボタンで利用されいてる「widget.js」はUTF-8で読み込まないとエラーになるという。

つまり今回の問題の解決方法は、widget.jsを指定しているscriptタグに、 charset="utf-8"を追加するだけ！

<script type="text/javascript"
 src="http://platform.twitter.com/widgets.js"
 charset="utf-8"></script>

文字コードでの問題、なかなか気づきませんよね。

もしも、FirefoxやIEで、Twitterのボタンが表示されないよ〜などの自体になったときは、一度文字コードを確認してみてください。

余談：公式サイトでもエラー？

ちなみに、今回の原因にすぐに気づかなかった理由として、公式サイトでもエラーが発生していたこともあげられる。

ツイートボタン作成のページで、「水平方向にカウント数を表示」などの選択をすると、エラーになる。

エラーがでて、ボタンのリアルタム表示がされない様子

なぜエラーとなるのでしょうね？それは謎だったりします。