Amazonの「Mobile Popover」ウィジェットをBloggerブログに設置しようとしてエラーが出た時の対処法

Amazonアソシエイトにあるスマホなどのモバイル向け専用ウィジェット「Mobile Popover」。米国で売上30％アップの実績と謳っており気になったので試してみたところエラーが出ました。

↑Mobile Popoverはスマホの下に

ポップアップされるこういったものです。

手順通りに設置するとエラー

本ブログはGoogleのブログサービスBloggerを利用しています。 

BloggerテーマのHTML編集からAmazonの指示通りに</body>タグの前に対象のコードを埋め込みました。

すると以下のエラーが発生してしまいました。

XML の解析中にエラーが発生しました。行 1961、列 85: The reference to entity "Operation" must end with the ';' delimiter.

エラーの対処方法

エラーが発生したコードはこの行です。

<script src="//ws-fe.amazon-adsystem.com/widgets/q?ServiceVersion=********&Operation=GetScript&ID=*****&***=&***********=JP"></script>

(重要か分かりませんが一部伏字にしています)

どうも調べてみると&の部分が悪さをしているようで

Bloggerでは&などの特殊文字は文字コードに変換しないといけないそうです。

そのため以下のようにコードを書き替えました。

修正前

<script src="//ws-fe.amazon-adsystem.com/widgets/q?ServiceVersion=********&Operation=GetScript&ID=*****&***=&***********=JP"></script>

↓

修正後

<script src="//ws-fe.amazon-adsystem.com/widgets/q?ServiceVersion=********&amp; Operation=GetScript&amp;ID=*****&amp;***=&amp;***********=JP"></script>

するとエラーもなくなりました。

これで解決出来ない方は以下も参考になるかもしれません。

「Mobile Popover」はテキストリンク用

エラーがなくなって動くようになったか確認のためAmazonの画像を利用しているページを自分のスマホで確認してみました。

ですが表示されません。

自分のスマホが悪いのかと思いAmazonのサンプルページを読みこむとこちらはきちんと表示されてました。

あとでわかりましたがMobile Popoverは画像リンクではなくテキストリンクに対して動くものでした。ヘルプをよく読まないとだめですね。

Bloggerのテーマが原因で表示されない

画像ではだめだということでテキストリンクを入れて表示されるか確認してみました。

しかし、またしても表示されません。

うーん。うーんとちょっと頭を抱えること数分。

Amazonのサンプルページでは表示されているので考えられるのがBloggerの設定です。

スマホで表示した時にＰＣ版のページを見ることが出来るのでそちらを見てみると

なんとポップオーバーが表示されました。

私はBloggerの公式テーマ「エスィリアル」を利用していたのですがテーマの初期設定としてモバイル用にモバイルテーマを利用するとなっています、そのためモバイルで開いたときは違うテーマとなりMobile Popoverが表示されなかったのです。

HTMLの知識はほぼないのでモバイル版のテーマの編集方法が分からなかったため最終的にはレスポンシブ対応のテーマをBTemplatesからダウンロードして「モバイル端末でもパソコン用のテーマを表示する」を選択することで解決しました。

テーマメニューでモバイルの設定をクリック

「いいえ。モバイル端末でもパソコン用のテーマを表示する」に変更