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

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

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

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

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

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

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

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

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

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

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

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

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

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

ここがポイントで、

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

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

川井昌彦: FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数