Twitterの「このツイートをサイトに埋め込む」の文字化けを発生させない方法

Twitterには便利な機能がどんどん追加されていて、今年に入ってからはツイートを簡単に引用できる「このツイートをサイトに埋め込む」という機能が追加された。例としては以下のようなもので、HTMLタグ版ならJavaScriptがONの環境ではFollowボタンなどが表示されてリッチに、そうでなくても引用（blockquote）タグでツイートが表示されるようになっている。

ところがこれ、環境によっては各種ボタンが文字化けして表示されてしまう。具体的には下の画像のような状態。文字化けの文字自体はブラウザによって表示されるものが違うのだけど、なぜか「文字化けする」という事実は変わらなかったりする。

文字化けしている各種ツイートボタン

この「文字化け」はもちろん自分の環境だけじゃなくて、ブログがUTF-8以外の文字コードだと結構よく起こってしまう様子。少なくともFC2とSeesaaブログでは自分でも確認している。

余談ですが冒頭のツイートの引用、最初 Twitter の「このツイートをサイトに埋め込む」機能を使おうとしたら、文字コードの違いのせいだか Javascript による表示部分が文字化けしてしまい、Javascript コードを削除して載せました。FC2ブログでは使えないのかな。

ネスカフェ バリスタについてツイートしてから5ヶ月間の迷走 | Channel 77

上記のブログではJavaScriptコードを削除して対応しているけど、実はそうしなくても解決する方法がある。文字化けしない言語に変えてしまえばいい。例えば最初に引用したツイートのコードは以下のようになっている。

<blockquote class="twitter-tweet" lang="ja">
<p>GmailがAmazonギフト券を迷惑メール判定する問題への対処方法 <a href="http://t.co/DWmL21VH" title="http://bit.ly/wFuGll">bit.ly/wFuGll</a></p>
&mdash; web memo Ver.2さん (@webmemo_v2) <a href="https://twitter.com/webmemo_v2/status/177469142314663936" data-datetime="2012-03-07T19:01:55+00:00">3月 7, 2012</a>
</blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

このコードはblockquoteタグで「lang="ja"」属性が設定されているが、実はこの属性によって引用ツイートに表示されるボタンの言語が決まっている。これを文字化けしない言語、要するに英語の「en」に変更してしまえばよい。

<blockquote class="twitter-tweet" lang="en">
<p>GmailがAmazonギフト券を迷惑メール判定する問題への対処方法 <a href="http://t.co/DWmL21VH" title="http://bit.ly/wFuGll">bit.ly/wFuGll</a></p>
&mdash; web memo Ver.2さん (@webmemo_v2) <a href="https://twitter.com/webmemo_v2/status/177469142314663936" data-datetime="2012-03-07T19:01:55+00:00">3月 7, 2012</a></blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

たったこれだけ。まあこれによって「フォローする」や「返信」などが英語の「Follow」や「Reply」になってしまうのだけど、ほとんどの人は読めるだろうし、一番重要なツイートの中身自体は影響を受けないので特に問題はないと思う。文字化けが気になる人はお試しあれ。