THE HAM MEDIA BLOG

Twitterの公式ツイートボタン・フォローボタンがFirefoxなど特定のブラウザだけ表示がされない場合の対処法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
twitter
Firefox
バグ
ボタン

先日より、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のボタンが表示されないよ〜などの自体になったときは、一度文字コードを確認してみてください。

余談:公式サイトでもエラー?

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

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


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

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

この記事へのコメント
最近、僕のホームページ(15年前からある)のtwitter窓が、最新版のFirefoxで突然表示されなくなって困っていたですが、この記事を見て解決しました!

当初からメモ帳でHTML直接編集していてShift-JISのままだったのですが、これはなかなか気づかないですよね。

そもそもtwitter本家が吐き出すウィジェットコードの段階で、charset 省略せずにちゃんとつけてくれればいいのに! って思いました。

ありがとうございました!
Posted by @きよし(Akiyoshi) at 2011年11月01日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/207729817
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。