Amazon の商品画像を自分のページに表示するには？

トップページ › Blog › Amazon の商品画像を自分のページに表示するには？

最終更新日時: 2008-01-30 00:04:06

Amazon の商品画像を自分のページに表示する場合、Amazon が提供するアソシエイトプログラムを利用する方法が一般的です。
この方法は大変便利ですが、Amazon っぽさが前面に出てしまうのでその感じを避けたい方もいらっしゃるようです。

次のような形で Amazon の商品画像だけを表示すると Amazon っぽさを薄めることができます。その方法をまとめました。

事前準備

Amazon のアソシエイトプログラムに入会する

あらかじめ、Amazon のアソシエイトプログラムに入会して「アソシエイト ID」を取得しておきます。
画像の URL を直接指定して利用することも技術的には可能ですが、素材（画像）を利用させてもらうので登録しておくほうが良いと思います。

作業手順

１．商品コードを確認する

Amazon のページを開き、検索機能などを利用して掲載したい商品のページを開きます。
「商品の詳細」の箇所にある商品コード「ASIN: XXXXXXXXXX」を確認します。
「ASIN:」に続く１０桁の記号と数字が「ASIN」コードです。

このコード部分を選択してクリップボードへコピーしておくと便利です。

３．画像へのリンクを作成するサービスを利用する

次のページで画像へのリンクを作成するサービスを提供しています。
リンクをクリックしてページを開きましょう。

※リンクを右クリックして表示されるメニューを選択して別ウィンドウや別のタグで開くことをお勧めします

「アソシエイトＩＤ」と「ASIN」の欄を入力します。
その際、クリップボードにコピーしておいた ASIN コードを貼り付けると便利です。

入力欄右側の「↓画像エフェクトのプレビューはこちらに表示されます。↓」の下に商品画像が表示されます。
自分の好みに応じて「画像オプション」を指定しましょう。
よく使うのは「画像サイズ」「右下影」あたりになると思います。

「作成したタグリンクはこちら。コピーしてお使いください。」の下のテキストボックスに、商品画像を自分のページに表示するための文字列（スクリプトやコードと呼ばれます）が生成されます。
左下の「全選択」をクリックするとコード全体が反転表示（選択状態）になります。反転表示を右クリックしてメニューを表示させて「コピー」を実行します。
これでスクリプトがクリップボードへコピーされました。

４．自分のホームページに組み込む

生成された商品画像をホームページに組み込むには、ページ内の表示したい場所を選び、そこへクリップボードからスクリプトを貼り付けます。
ホームページ作成言語（ HTML ）で編集している場合はそのまま利用できますが、コンテンツ管理システム（ CMS ） や ブログで入力している場合は、スクリプトの前後を [HTML] と [/HTML] などで挟み込む場合があります。
利用するシステムのやり方に合せて貼り付けしてください。

[HTML] と [/HTML] で挟み込んで貼り付けるコードの例 

[html]<a href="http://amazon.co.jp/o/ASIN/4039633105
/(あなたのアソシエイトID）/ref=nosim">
<img src="http://images.amazon.com/images/P
/4039633105.09._OU09_SCLZZZZZZZ_.jpg" alt="">
</a>[/html]

特記事項

このページは 2008 年 1 月 21 日に執筆しました。
紹介している各システムの仕様変更などにより、内容どおりに作業できない可能性があります。
どうぞ、ご了承ください。