Web ページに Twitter のツイートボタンを設置する

Twitter では、自分の Web ページに設置できるツイートボタンが利用できるようになっています。

これを自分のホームページの好きなページに設置することで、そのページを見てくれた方が簡単に、自身の Twitter につぶやきを投稿することができるようになります。

 

ツイートボタンを設置するには Twitter - 素材 ページにアクセスして、そこから「ツイートボタン」を選択します。

ここで、必要な項目を設定して行きます。

ここで、表示したいツイートボタンの形状を選択します。

 

続いて、このツイートボタンを使ってつぶやきを投稿してくれた人に、フォローを促すおすすめユーザーを通知することができるようになっています。

ここでは 2 つまでのアカウントを、おすすめとして表示させることができるようになっていました。

 

これらの項目を入力したら、その下に Web ページに張り付けるためのソースコードが自動生成されています。

　左側のプレビューのところには、本来は貼り付けられるボタンの様子が表示されるはずだと思うのですけど、平成 23 年 7 月 1 日現在、なぜか設定を調整すると というイメージが表示されてしまうようになっていました。

そしてこのプレビューをクリックしても、やはりサンプルに出ている通りで、期待通りの動きを見せてくれない感じでした。

 

右側に表示されたソースコードを、試しに自分の Web ページ内に張り付けてみたのですけど、最初はやはりプレビューの通りになってしまって、これは何かが未対応なのかとも思ったのですけど、IE9 だけでなく Safari や Google Chrome, Firefox でも同じようになってしまったので、どれかのブラウザーに依存するものではないようです。

ソースコードを分析したりしていろいろ可能性を探っていたら、この問題を解決する方法が見つかりました。

どうやら Web ページの文字コードが UTF-8 ではない場合には、"widgets.js" を読み込む際に "charset" を "UTF-8" に指定する必要があるようでした。

たとえば、上記で自動生成されたソースコードが次のようになっていたとします。

このとき、<script> タグの属性値として charset="UTF-8" を追加してあげることで、正しく動作してくれるようになりました。

こうすることで、指定した通りのツイートボタンが Web ページに表示されるようになります。

もっとも、Twitter のツイッターボタン生成ページ自体の文字コードが UTF-8 になっているようですので、もしかすると UTF-8 で作成したページでも charset の指定は必要になるかもしれません。

もし、ツイートボタンを貼ったところが "Twitter" とだけ表示されるような場合には、上記のように "charset" を追記してみると上手く行くかもしれないです。