AmazonウィジェットがSSLに対応してないんだけど

実は、Amazonアソシエイトの中の人に、独自SSLモードではウィジェットが表示されないって問い合わせたんですけど、なんか納得のいく回答は返ってこなかったんですよね。他の広告コードと干渉してるからどうのこうのと。うんと、Google AdSense広告コードが原因なんですか？？

…ってツッコミ入れるのは面倒なのでこれ以上あきらめることにしました。

独自SSLで「保護された通信」になったとしても、 f:id:wanichan:20170711222605p:plain

Google Chromeではhttp://から始まるリンクは読み込まれないんですよね。

f:id:wanichan:20170713005140p:plain

f:id:wanichan:20170713012011p:plain

このページは承認されていないソースからのスクリプトを読み込もうとしています。

だからウィジェットが表示されない、と。

これは、AndroidスマホやらiOSやらでも同様です。ブロックされるんですよ。

全部https://に置換してくださいとか言われても、その先にhttp://で呼び出してるコンテンツがあるんですよ。それもこっちではいぢれない領域に。

ウィジェットフレームのソースを表示してみると、問題を引き起こしているコードを見つけました。7か所ですかね。

スタイルコードとか

<style>
 .amzn-sprite { background-image: url("http://wms-fe.amazon-adsystem.com/panda/20070822/JP/img/search/scrollable-search-widget-sprite.png")}
 </style>

Javascriptコード内に問題の記述がいくつもあります。該当箇所をコピペするのはだるいから割愛。

あとは、直にこんな記述も。

<div id="loader">
 <img src="http://g-ecx.images-amazon.com/images/G/09/associates/widgets/20070822/JP/img/loader._V2249246785_.gif" alt="読み込み中..." />
 </div>

問題の部分はJavascriptコードにありますね。5か所ありまっせ。

これに関して他の方々が記事を書いていらっしゃいますが

ウィジェットがhttpリンクを生成する旨問い合わせてみた | Exfield

暖簾に腕押しとはこういうことですね。

仕方がないので、ウィジェットはあきらめることにしました。

私のサイトはレスポンシブWebデザインで、サイドバー要素幅が200ピクセルと300ピクセルの2パターンです。200ピクセルは1024ｘ768用（iPadとか）、ふつうのデスクトップはフルHDでもサイドバー300ピクセルにしてます。

そんなわけで、ふつうのバナーリンクを二つ用意。180ピクセル幅と300ピクセル幅ですね。

サイドバーにはそれぞれDIVにスタイルを適用します。

<div class="ads-180">
ここに180ピクセル幅のバナーリンクコードを挿入
</div>
<div class="ads-300">
ここに300ピクセル幅のバナーリンクコードを挿入
</div>

スマホとかだったら最低でも300ピクセルでOKなので、CSSのメディアクエリで、180ピクセル幅のスタイルが適用されているdivは既定で display:none で。

@media only screen{
img {max-width: 100%;height: auto;}
}
.wrapper{
font-size:14px
}
.ads-180{display:none}

で、180ピクセル幅を出したい幅で display:block!important、んで、もう一方を display:none!important

@media(min-width:1008px){
.container{
width:975px
}
.wrapper {
display: inline-block;
*display: inline;
*zoom: 1;
width: 985px;
margin-bottom: 10px;
margin-top:10px;
}
#page_content {
margin: auto 0px;
width: 750px;
float: left;
}
#sidebar {
float: right;
width: 220px;
margin: auto 0px 10px 0px;
}
#page_content, #sidebar {
border-radius: 7px;
-webkit-border-radius: 7px; /* Safari,Google Chrome用 */
-moz-border-radius: 7px; /* Firefox用 */
}
article, aside {
padding-top: -10px;
margin-top: 0;
margin-bottom:0
}
.ads-180{display:block!important;}
.ads-300{display:none!important;}
}

デスクトップ幅になったら、逆パターンで記述しましたです。

@media only screen and (min-width: 1110px) {
.container{width:1075px}
.wrapper {
width: 1085px;
}
#page_content {
width: 750px;
}
#sidebar {
width: 320px;
}
.ads-180{display:none!important;}
.ads-300{display:block!important;}

}