ブログのサイドカラムなどによくついている、Amazonの商品画像。どうやって表示させているのかよくわからなかったので、自分なりに考えてみました。
使った材料は、Google AJAX Feed APIとAmazonの新製品などを配信しているRSS。
まず、Google AJAX Feed APIのサイトより、設置したいサイトのURLを入力し、APIキーを発行
Google AJAX Feed API - Google Code
次にAmazonのベストセラー、ヒット商品のページからジャンルを選択し、RSS配信用のURLを取得
ブログのhead部(
〜で囲まれている箇所)に以下のコードを貼り付ける<script type="text/javascript" src="http://www.google.com/jsapi?key=<span style="color:#FF0000">ここにAPIキー</span>"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("ここにAmazonのRSS");
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var gazo = entry.content.match("<img.*jpg.*?>")
if(gazo != null){
container.innerHTML += "<p><a href='" + entry.link + "'>" + gazo +"</a></p>"
}
var div = document.createElement("div");
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
画像を表示したい箇所に次のコードを貼り付けるとできあがり。
<div id="feed"></div>
苦労してブログに貼り付けても、このままではアフィリエイトができません。AmazonRSSのURLの末尾にアソシエイトIDを追加してあげるとアフィリエイトができるようになります。 また、AmazonのRSSは1時間おきに更新され、更新されるとこちらの商品画像も自動的に置き換わります。
http://www.amazon.co.jp/rss/bestsellers/dvd/ref=pd_ts_rss_link?tag=ikubonnikki-22Amazon RSSの詳しい設定についてはこちら。
できあがりはこんな感じです。