ばかおもちゃ本店:Youtube twitter:@sashimizakana Amazon.co.jpアソシエイト

2013年2月17日日曜日

Amazonランキングをサイドバーに貼るJS

Amazonのランキングなんかのフィードをサイドバーに表示するやつを書いた。
今右側の方に表示されているやつです。
(遅いのでまだ表示されていないかもしれない)

まとめブログなんかでAmazonの商品の一覧が大きめの画像で、アフィリエイト付きでずらっとサイドバーに並んでいるやつがある。ああいうのが良いなと思った。ただ最初にざっくり調べたところでは、Amazonの検索なんかの機能はAPIの利用申請を出して発行されるキーを利用して、サーバーサイドからリクエストしなきゃならないみたいで、ややハードルが高い。

更に調べて、以下の記事を見つけた。

Amazonで指定したカテゴリのベストセラー商品を表示

これはAmazonのベストセラーなんかの商品のRSSを、Googleのajax  feed apiというjavascriptからRSSが読み込めるサービスを利用して読むもの。書いた、と冒頭に書いたけど、実際のところ私のコードはほとんどこれと同じ。
なんせ、非常にシンプルで特に変える必要が無い。
サーバーサイドの仕組みもこちらで用意する必要がない。

上の記事をざっくり読めば、あとはRSSのフィードのURLを拾ってきて、表示部分のコードを自分で実装さえすればJavascript利用可の場所なら商品画像を展開できるようになる。

デザインも含めたコードはGistにあげてあるので、使ってみたい人はそっちからダウンロードしてローカルで実行してみて、自分の好きなように書き換えてみると良いと思う。

Amazon-feed-sidebar-js

元の記事と違うことをしている部分としては、contentに入っているHTMLタグからjQueryで画像のリンクを拾って、サムネイル利用のためのサイズ指定を削っているところと、サイドバーっぽい表示を行うために書いている部分くらい。

Amazonの画像のサイズとかに関しては以下のサイトを参考にした。
あんまり私もよく分かってないです。

Amazon 商品画像のカスタマイズ

サイドバーに納めるためのスタイルとしては、横幅を固定で指定したらはみ出た部分を非表示にする(overflow:hidden)ようにして、商品の画像にネガティブマージンを指定して、画像の真ん中の方が表示されるようにしている。

そんなわけで、ご自由にコピペしてアフィってね!