Amazon アソシエイツのウィジェットが、https環境で表示されない場合の対応

ブログのリニューアルに伴い、Bootstrapでレスポンシブ化したり、常時SSL化したり、いろいろとゴソゴソやっています。仕事では、ディレクションと問題切り分け＆解決ばっかりやっていたので、自分でコツコツ作るのは結構ひさびさ。楽しい。

Amazonのバナーを貼ったりしているのですが、常時SSL環境だと表示されないという事象に見舞われたので、その解決策を備忘録的に書いておきます。

Amazon アソシエイツのウィジェットが、https環境で表示されない

すでに解決されている方がいたので、iframeの解決方法でしたが、要領は同じでした。mix contentsだったので、http領域のファイルを読み込まないようにします。

<script src="http://............"></script>

となっているところを、

<script src="https://............"></script>　または　<script src="//............"></script>

に変更。プロトコルを指定するか、今見ているプロトコルで呼び出すかの違いです。あとは、URLパラメータに　&internal=1　を付与します。これでおしまい。参考サイトは以下に記載します。ほんとに助かりました！

実際のコードは、こんな感じになります。

<script src="//z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=XXXXXXX.........&internal=1" type="text/javascript"></script>

参考サイト

• HTTPSページでAmazonアソシエイトのiframeバナーを正しく表示させる方法