saketorock

WordPress、Mac、その他日常で覚えておくべきことを備忘録としてメモしています。

stinger WordPress

Twitter(ツイッター)のツイートボタンの表示レイアウトが崩れてしまう現象を修正する方法

ブログで表示しているTwitterのツイートボタンのレイアウト表示が崩れる現象が発生しました。レイアウトの崩れが発生するのはiOSのGoogleChromeのみ。

私が試した限りでは、PCのChromeとシークレットモード時のChrome、Safari(PCおよびiOS)ではきちんと表示されています。

現象

通常、こんな感じに表示されますが
ツイートボタン レイアウト
以下のように「Tweet」の文字とリンクだけが表示されてカウント数とレイアウトが崩れてしまいました。きちんと表示されなくなったのです。
Twitterのツイートボタンがきちんと表示されない

これを修正しましたので備忘録です。結論から言うとTwitterボタンのソースを下記のように修正すればOKです。

下記のソースを…

次の通り修正すればOKです。

同じ症状に悩んでいる方はお試しください。

原因

当初、原因が分かりませんでしたが、熟考してみたところレイアウトが崩れるのはTwitterから読み込んでいる「js」ファイルに問題があると推察しました。つまり、上記ソースのscript type以下の表記が変更されたことになります。

そこで、Twitterのデベロッパーサイトに飛んでツイートボタンのソースを調べたところ、ビンゴ!

やはりソースが変更されていたことに気が付いた次第です。

ちなみに、このブログでも導入しているWordPressのテーマ、STINGER5の場合、修正すべきファイルは、「sns-top.php」と「sns.php」2つ。ファイルの場所はサーバー内にアップロードしているwp-contents/theme内のテーマフォルダにあります。

変更すべきソースは先述したとおりです。

まとめ

一週間ほど悩んでいましたが、原因が判明してスッキリしました。今後もTwitter側のソース変更があれば同じような現象が発生するかもしれませんね。

-stinger, WordPress