amazonアフィリエイトで画像リンクをランダムで表示する方法【javascript】
amazonアフィリエイトの画像リンクを使っている時、同じ場所でランダムに違う商品を表示させたい、ということがあると思います。
そんな時に使えるjavascriptのコードをこちらの記事を参考に書いたので、参考にしていただければ。
▼プログラム
2種類の商品のうちの1つをランダムに表示する場合のプログラムです。種類を増やしたい場合は「'<a href="リンク先URL"><img src="画像URL"></a>',」を追加します。
<div id="myplace"></div>
<script type="text/javascript">
var lists=[
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>'
];
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('myplace').innerHTML = lists[rNo];
</script>
▼リンク先URLと画像URLの調べ方
amazonアソシエイトで紹介したい商品を検索し、「画像のみ」のタグを選択。
この場合、赤丸のコードが「<a href="http://www.amazon.co.jp/gp/product/B00C2XEA72/ref=as_li_qf_sp_asin_il?ie=UTF8&camp=247&creative=1211&creativeASIN=B00C2XEA72&linkCode=as2&tag=akihori-22"><img border="0" src="http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00C2XEA72&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=akihori-22" ></a><img src="http://ir-jp.amazon-adsystem.com/e/ir?t=akihori-22&l=as2&o=9&a=B00C2XEA72" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
」となっていますが、この中の最初のURLである「http://www.amazon.co.jp/gp/product/B00C2XEA72/ref=as_li_qf_sp_asin_il?ie=UTF8&camp=247&creative=1211&creativeASIN=B00C2XEA72&linkCode=as2&tag=akihori-22」をリンク先URL、2番目のURLである「http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00C2XEA72&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=akihori-22」を画像URLに貼り付けます。
▼実行結果
URLを入力して実行した結果が次の画像。更新するごとに画像が切り替わります。
