SSL（https）でAmazonの商品リンク（iframeタグ）が表示されない

2020/12/19

ブログを始めたばかりだというのに、SSL1年間無料につられてSSLにしたことで結構いろいろハマってます。

Amazonアソシエイトで作成した商品リンクを貼り付けてみたのですが、ブラウザによって表示されたりされなかったりします。Windows Explorerは表示されるけれど、ChromeやFirefoxでは表示されないなど、う～んと言うしかありません。

Amazonアソシエイトの商品リンク「テキストとイメージ」

Amazonアソシエイトで「テキストとイメージ」の商品リンクを作成し「https」のサイトで表示すると次のようになります。

商品リンクのHTMLそのままの場合

使用するHTMLは次のものです。

<iframe src=”http://rcm-fe.amazon-adsystem.com/e/cm?t=feeeeelog-22&o=9&p=8&l=as1&asins=4844365614&ref=qf_sp_asin_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr” style=”width:120px;height:240px;” scrolling=”no” marginwidth=”0″ marginheight=”0″ frameborder=”0″></iframe>

表示結果は次のようになります。

実際の表示結果	期待する表示結果

ブラウザによって異なりますが、おそらく実際の表示結果には何も表示されていないと思います。<iframe>によって読み込まれる内容が「http」であるものを含むためです。この場合、ブラウザによっては内容が表示されません。

期待する表示結果には結果をキャプチャしたものです。値段が異なる可能性がありますがあしからず。

商品リンクのHTMLの「src=”http://～”」を「src=”https://～」に変更した場合

使用するHTMLは次のものです。

<iframe src=”https://rcm-fe.amazon-adsystem.com/e/cm?t=feeeeelog-22&o=9&p=8&l=as1&asins=4844365614&ref=qf_sp_asin_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr” style=”width:120px;height:240px;” scrolling=”no” marginwidth=”0″ marginheight=”0″ frameborder=”0″></iframe>

表示結果は次のようになります。

実際の表示結果	期待する表示結果

ブラウザによって多少表示される可能性が上がっているようです。実際に<iframe>で読み込むURLに「http」が含まれているためにブラウザによって表示されません。<iframe>は別のドキュメントを埋め込むため、埋め込んだ内容に「http」が含まれる可能性があるからです。例えば書籍の画像や「amazon.co.jpで買う」アイコンの画像などが「http」です。

じゃー、どーすんの？

AmazonAPIを使いましょう。
※httpとhttpsの混在があるページの原因を調べるには「SSL対応でhttpとhttpsが混在したコンテンツが表示できない原因を特定する」を参照してください。

AmazonAPIを使う

AmazonAPIを使用することで、うまく表示されないといった問題を解消できます。ここでは、AmazonAPIをどう使えばよいかまでは説明できません。ある程度専門的な知識が必要になるためです。

AmazonAPIを使用することで、次のように表示できます。

書籍「Webコンテンツマーケティングサイトを成功に導く現場の教科書」の書籍の表示例

どうやって表示しているのか（WordPress）

ここでは当サイトで使用しているWordPressでどうするかについて簡単に触れておきます。

WordPressのプラグイン「Amazon JS」をインストールする
「Amazon API」を使用するためにアカウントを登録する

具体的な内容に関しては省きますが、これでSSLでもAmazonアソシエイトの内容を表示することができます。

具体的な使い方は、こちらのサイトをどうぞ！
「WordPressでアマゾン・アソシエイトを簡単設定！Amazon JSプラグイン」