※当ブログではアフィリエイト広告を利用しています。
数日前ぐらいに気づいたのですが、当ブログの各エントリ下部に表示しているFacebookのいいね！ボタンがいつの間にか表示されなくなりました。
調べてみたところ意外なところに原因があったので、原因と対処法をメモします。
発生した現象（いいね！ボタンが表示されない）
発生した現象は以下の画像の通り、ブログの各エントリ下部に表示されるはずのFacebookのいいね！ボタンが表示されないというものです。正確には表示されないというよりも表示されるまでに異常に時間がかかります。
時間は測っていませんが数十秒～数分ほど待つといいね！ボタンは表示されます。しかし読み込んでいる間、ページ全体のローディングが終わらない状態となるため見た目がよくありません。何よりもいいね！ボタンの表示が異常に遅いのでシェアの機会を逃すことにつながります。
現象はPC版のChrome、Firefox、IE11、iPhoneのSafari、Chrome、Dolphin Browserで発生しました。特定のブラウザだけで発生するわけではないようです。
解決しなかった対処法
他のソーシャルメディアのシェアボタン表示のためのJavaScriptファイルの読み込みを止めてみたり、FacebookのLike Boxの設置を止めてみたりしましたが解決しませんでした。
またChromeの拡張機能で一部JavaScriptのエラーが出ていたので拡張機能を止めてみたりしましたがこちらも効果はありませんでした。ちなみにエラーが出ていたのは「Google Publisher Toolbar」です。
上記の拡張機能で出ていたのはプロトコルの違うページをインラインフレームで読み込んでいることによるものだったため、httpsで読み込んでいるFacebookのLike Boxをhttpに変えてみたりしましたが同じく効果はありませんでした。
原因と解決した方法
原因は以下のタグを使ってインラインフレームで読み込んでいるAmazonの広告ウィジェットでした。これの設置を止めてみたところ元通り、いいね！ボタンがすぐに表示されるようになりました。
<iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?t=lancork-22&o=9&p=12&l=ur1&category=amazonsale&f=ifr" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
詳細な原因は不明なままですが、Facebookのいいね！ボタンもインラインフレームで、中でJavaScriptによる様々な処理が動いているため何らかの処理が競合したのかもしれません。
おわりに
最初はFacebook側に何か障害が来ているのかと思いましたが、他のサイトは問題なく表示されていたのでそこは切り分けできました。他のJavaScriptやインラインフレームの読み込みを一つずつ止めたため解決に時間がかかってしまいました。
ブログにSNSボタンや広告など、パーツをたくさん設置していると思わぬところで競合が発生するため注意が必要ですね。
