簡単!! 「画像つきのAmazonランキングをサイドバーに貼る」 【アフィリエイト】

原理

1.Amazonが提供しているランキングRSS（URL）を利用する
2.RSSから、自前で画像を表示するJavascriptを組む
3.2をサイドバーに貼り付ける

上記方法で本記事では実現します。

・JavascriptでRSSを読み込んで表示する方法 【jQuery, Google Feed API】

本記事では、上記記事でもちいられている方法を使ってRSSを読み込むことにしました。

画像つきのAmazonランキング

1.Amazonが提供しているランキングRSS（URL）を利用する

1-1.
http://www.amazon.co.jp/gp/bestsellers/
Amazonランキングから、表示したいジャンルを選択する。今回は、ゲームを選択。

1-2.
ページ下に、RSSのURLがあります。ゲームなら以下のようなURLがそうです。
http://www.amazon.co.jp/gp/rss/bestsellers/videogames/ref=zg_bs_videogames_rsslink

1-3.
http://www.amazon.co.jp/gp/rss/bestsellers/videogames/ref=zg_bs_videogames_rsslink?tag=アソシエイトID
アソシエイトIDというのは、ｘｘｘｘｘｘ-22のような奴です。

1-2のURLだけでは、アソシエイトIDが付与されないので、上記のようにURLの後ろに「?tag=アソシエイトID」を付けます。

参考：

RSSオプションについて
ベストセラーやAmazonランキングを更新する際には、以下のオプションをご利用ください。オプションのパラメータはRSSフィードのURLに追加できます。（例:http://www.amazon.co.jp/rss/bestsellers/books?tag=assoc-tag）
Amazon.co.jp ヘルプ: RSSフィード

2.RSSから、自前で画像を表示するJavascriptを組む

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

ヘッダーあたりに挿入。別にサイドバー上部でも問題ない。
アメブロの場合は、フリープラグインの上の方。

    <script type="text/javascript">
    google.load("feeds", "1");

    function initialize() {
      var max_length = 5; //読み込み最大記事数
      var feed = new google.feeds.Feed("http://www.amazon.co.jp/gp/rss/bestsellers/videogames/ref=zg_bs_videogames_rsslink"); //RSSを指定
      feed.setNumEntries(max_length);
      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 title = entry.title; //記事タイトル
	    var link = entry.link; //記事へのリンク
	    var content = entry.content; //記事の内容
	    var snippet = entry.contentSnippet; //記事の要約

	    //記事から画像抽出
	    var imgtag = "";
	    var imgarray = content.match(/(http:){1}[\S_-]+((\.jpg)|(\.JPG)|(\.gif)|(\.png))/);
	    if(imgarray){
		imgtag = "<img src='" + imgarray[0] + "' border='0'/>";
	  }

	    jQuery('#amazon_feed').append("<li style='list-style-type: none'><a href='" +link +"'>"+ imgtag +"</a></li>"); //画像リンクを挿入
	  }
	}
      });
    }
    google.setOnLoadCallback(initialize);
    </script>

    <div id="amazon_feed"><!-- この位置に挿入される --></div>

RSSの部分は変更してくださいね。
サンプルでは、ゲームでアソシエイトIDなしになってます。

3.2をサイドバーに貼り付ける

上記を表示したい場所（サイドバー）にコピペしてください。アメブロは、フリープラグインに貼り付けてください。

Blogger、Wordpress 3.5.1、アメブロで動作確認をしました。

上記はローカルでも動作するので、HTMLファイルを作成して、そこにコピペしてブラウザでみれば表示されると思います。