FeeeeeLog (フィーログ)

Androidアプリ開発に夢中

*

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

      2016/05/17

ブログを始めたばかりだというのに、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タグで期待する表示

ブラウザによって異なりますが、おそらく実際の表示結果には何も表示されていないと思います。<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タグで期待する表示

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

 

じゃー、どーすんの?

 

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

AmazonAPIを使う

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

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

どうやって表示しているのか(WordPress)

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

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

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

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

 

 - SEO