Twitter公式ウィジェットのヘッダーでボタンが重なる！

Twitter API が変更されて、サイトにTwitterのタイムラインを埋め込むためにこれまで使われていたスクリプトが使えなくなることから、Twitter公式ウィジェットが話題になっています。

ところが先日、クライアントのサイトに公式ウィジェットを設置しようとして問題が発生しました。

左のように、「ツイート」の文字と「フォローする」ボタンが重なってしまうのです。

ブラウザのデフォルトテキストが「メイリオ」などの幅が広いフォントを使用していて、アカウント名が長い場合、このようになります。

Twitter公式ウィジェットは、iframe になっており、設置サイトとはドメインが違うので、スタイルシートやJavaScriptで操作することができません。

どうしようもないのかと、うろうろとネットをさまよっていたところ、思わず解決方法を発見してしまいました。

左の画像を見てください。

「フォローする」ボタンにアカウント名が入っていません。

ネットをさまよっていたときに、たまたまサイドバーに設置されている例を見かけて、「フォローする」ボタンが違うことに気づいたんです。

上と下、何が違うかわかりますか？

ウィジェットのコードをサイトに設置する際、そのまま貼り付けると親要素の幅いっぱいになります。

ここで、ウィジェットのコードの1行目にあるaタグに width属性を追加すると幅を決めることができます。

<a class="twitter-timeline" width="249" href="https://twitter.com/...

ここがポイントで、

• width=250 以上：ボタンにアカウント名が入る
• width=249 以下：「フォローする」のみ 

という仕様になっているようなのです。

アカウント名が長くて困っている方、思い切って幅を249px以下にしてみてください。
幸せになれるかもしれませんよ。