Buzzプラグインを導入したんです。Buzzプラグインは記事下にFacebookのいいね!ボタンやTwitterのフォローボタンを表示してくれるWordPressプラグイン。PCで確認したらちゃんと表示されていて安心していたのですが、ふと、iPhoneのSafariで自分のブログを見たときに、Twitterのフォローボタンが表示されていないことに気が付いたのです。PCでは表示されてるのにiPhoneで見たときだけ・・・。Twitterのフォローボタンは表示されないけど、テキストリンクはちゃんとあって、押したらしっかりTwitterページに飛んでくれる。検証の結果、jsの読み込みが正しくできてなかったのが原因でしたが、小一時間あれこれ悩みました。以下で詳しく書いていきますので、同例の方がいたら参考にして下さい。Buzzプラグインは、簡単な設定で記事の下部に、バイラル風にFacebookのいいね!やTwitterフォローボタンを表示することのできるWordPressプラグインです。人気のプラグインで、使っている人も多いと思います。最近WordPressテーマを「JIN」に変更しました。JINには、記事下のFacebookいいね!ボタンやTwitterのフォローボタンは付いていないので、自前で用意することにしたんです。Buzzプラグインとやらを使えば、簡単な設定でいいね!ボタンを設置できるらしい。簡単なこと大好きなぼくは、早速インストールして、FacebookやTwitterのアカウントを設定したんですね。無事、いいね!エリアが表示され、一息ついてたんだけど、iPhoneのSafariで見たときに表示に違和感が・・・。Buzzプラグインを使うことで、Facebookのいいね!やツイートボタンは表示されるようになりました。Twitterフォローボタンだけ画像がうまく表示できない状態に陥りました。iPhoneのSafariで見たときだけ。knkSeiya」になっています。リンク部分をタップすると、ちゃんとTwitterページにジャンプするので、動作は問題がないですが、なぜかボタンが反映されない。同じページをPCから確認しましたが、こちらはしっかりとボタンが出ている。本来このような見た目を期待していました。PCではちゃんと表示できるのにスマホだとボタンが表示されない・・・。調べてみましたが、これといって同じ症状は見つけられませんでした。各ブラウザで確認、問題の切り分けクリック(タップ)でTwitterページにはジャンプできるため、アカウントの設定ミスはなし。そこでブラウザのキャッシュを疑い、持っているブラウザでキャッシュを消しながら表示を確認しました。knkSeiya”」になってしまっています。knkSeiya”」の部分は本来はツイッター公式ツールで作ったデザインで出力されるはずです。同じiPhoneでもこちらではTwitterのフォローボタンが正しく表示できています。Twitterのフォローボタンは問題なく表示されています。こちらもTwitterのフォローボタンは問題なく表示されています。プラグイン出力コードの確認ブラウザキャッシュの問題ではないことは分かりました。他のブラウザではツイッターボタンはしっかり表示されているため、サーバキャッシュということも考えにくい。そこで、プラグインが出力するコードが、スマホのSafariが対応できないカタチになっているのではないかと考えました。(ブラウザによって処理方法が異なるため、同じコードでもブラウザの種類によって動いたり動かなかったりする)ツイッター公式ツールからツイッターボタンを作って、それをウィジェットに貼り付けて表示されるか確認してみたんです。Buzzプラグインの部分までツイッターボタンが表示されるようになった!!最初は「この神がかり的なタイミングでキャッシュが更新された?」って思い、ウィジェットに貼り付けたツイッターボタンのコードを消したんですが、そしたらまた表示されなくなりました。結論:原因はjsの読み込みにありツイッター公式ツールで改めて作って、ウィジェットのHTMLエリアに貼り付けたコードが以下です。変えたのはdata-show-countだけ。falseからtrueに変更した以外は出力コードそのまま。charset="utf-8"></script><a>タグはただのリンクのため、他のパーツに影響を与えるとは考えにくい、となると残るは追加で読み込んでいる<script>の部分です。思って、以下の部分だけ残したらちゃんとTwitterのフォローボタンが表示されました。charset="utf-8"></script>試した結果、これを書く場所はどこでも良いみたい。ぼくウィジェットに書いておくと間違えて消しそうなので、headの中に書いておきました。ウィジェットのHTMLエリアでも大丈夫です。Buzzプラグインは簡単な設定でFacebookやTwitterのボタンを表示してくれる素晴らしいプラグインです。ぼくの環境ではスマホのSafariブラウザから見たときだけTwitterのフォローボタンが表示されないという現象に陥りました。結果的にjsファイルの読み込みに問題があって、ツイッター公式ツールで作り直したものを適用することで解決できました。問題が発生したときは確認や問題の切り分けが大切です。類似の問題とその解決法がないか検索で調べる全てのブラウザで同じ症状なのか、持っているブラウザを変えて見てみるブラウザ、またはサーバのキャッシュを消して見てみるまた、htmlが読めるのであれば、ブラウザの開発者ツールでページソースの該当箇所を見てみるのもいいと思います。Buzzプラグインが生成してくれたコードに差異があって、あれ?って思ったことが解決に繋がりました。同じ症状の人がいたら、この記事が少しでもお役に立てたら嬉しいです。カスタマイズ1空いた時間に映画・アニメを見ませんか?通勤中、家でゆったりしているとき、そんな空いた時間に映画・アニメを見てみませんか?Amazonプライムは映画やドラマ、アニメが見放題。空いた時間にちょっと見るのに最適です。音楽や本の読み放題、Amazonの買い物が便利になるなどの複合サービスなので映画やアニメのためにわざわざ配信サービスを契約するのはちょっと・・・という方でも満足できます。最新版として各サービスの内容とメリットをまとめましたので、ご興味のある方はぜひご覧ください。Tanakano*ぼくはWordPressのテーマ「JIN」を使っています。JINはとても簡単にオシャレなブログが作れるのでとても好きなテーマです。ブログを書いてしばらくすると、こんな悩みが出てくると思います。Tanakano*WordPressブログでAmazonの商品を紹介したいとき、Rinkerにお世話になっている方は多いと思います。Tanakano*雑記ブログを運営し、記事が増えてくると、こんな悩みが出てきます。Before-After」っていうプラグインを使ったんです。...【僕が選んだブライダルリング専門店】Tanakano*管理人/HN:たなか小川せいや何者かになりたいWebシステム開発屋。フロントエンド寄り8年目。高校中退、フリーター生活から這い上がり東京大学院でモバイル通信を研究。Tanakano*で好きなこと・楽しいことを伸ばすため活動中。運営中の写真ブログ:Tanakanoフォト詳細プロフィールYouTubeで動画配信はじめました。Twitterでは関心ごとや最新記事の情報を呟いたりしてます。