Amazonアソシエイトリンクの作成支援


Amazon Product Advertising APIを利用できないウェブサイトオーナーのためのツール。
使い方はこのページの下部

テキストコード:
画像コード:
URL冗長 

このツール

Amazonアソシエイトの「商品リンク」のページを利用した商品リンク作成ツールです。Amazon Product Advertising APIは不要です。つまりAmazon Product Advertising APIの利用条件に嵌まらないウェブサイトのオーナーも利用可能です。また、このツールの出力する商品リンクは軽いのでアソシエイト・ツールバーよりオススメです。WordPressのAmazon広告用プラグインよりも軽快なので閲覧数の多いウェブサイトにも向きます。ただし、APIを使ったプラグインより面倒です。あくまで手動で商品リンクを作成するのを支援するだけのツールなのでご了承下さい。
「商品リンク」のページで広告コードが作成されるのに、何故このツールが必要なのか。それは、「商品リンク」で作成できる「テキストと画像」の広告が全く使い物にならないから。このツールは「テキストのみ」「画像のみ」の広告コードを組み合わせて画像+テキストの広告を作成しようというものです。
「商品リンク」で出力されるHTMLコードに含まれる1x1ドットの画像ファイルは表示カウントに使用されているらしいとのことですが、ほぼ意味がないだけでなく広告表示が遅い原因になっているようなのでこのツールでは1x1ドット画像は表示しないという方針です。

Ver.1.2  2019年11月14日

・ページデザイン変更。アソシエイトリンクの作成機能は何も変わっていません。

Ver.1.1  2019年5月12日

・ウェブで存在を公開。
・URLの簡略化機能を追加。

Ver.1.0  2019年5月9日

・最初の版

使い方

このツール自体がAmazon Product Advertising APIを利用していないのでこのツールで商品名や商品番号で検索することはできません。そこで、amazonアソシエイトの「商品リンク」で商品を検索し、その広告コードを取得します。

広告コードの作成 1
メニューから「商品リンク」を選択する。
「検索キーワード」に商品名や商品コードを入力して商品を検索する。
検索結果の商品リストから希望の商品の「リンク作成」を押す。
広告コードの作成 2
「テキストのみ」タブを選択し、「この商品リンクのHTMLを取得する」の「選択する」ボタンを押してHTMLコードをコピーする。
このツールにコードを貼り付ける。(次の画像)
「画像のみ」タブを選択し、「この商品リンクのHTMLを取得する」の「選択する」ボタンを押してHTMLコードをコピーする。
このツールにコードを貼り付ける。(次の画像)
広告コードの作成 3
「テキストコード」のテキストボックスに先にコピーした「テキストのみ」の商品リンクのHTMLコードを貼り付ける。
「画像コード」のテキストボックスに先にコピーした「画像のみ」の商品リンクのHTMLコードを貼り付ける。
「作成する」ボタンを押す。
URLの簡略化機能を追加しました。「作成する」ボタンの左にあるスイッチは初期値が「URL冗長」で、これはamazonアソシエイトの「商品リンク」が出力するHTMLコードのURLをそのまま使用します。「URL簡略」に切り替えて「作成する」ボタンを押すと、リンクのURLの不要(と思われる)パラメータを除去した短いURLになります。画像URLは、仕組みは違いますがやはり不要に長いURLが短くなります。このツールではURL短縮サービスは利用しません。
リンクURLはhttps://amazon.co.jp/exec/obidos/ASIN/XXXXXXXXXX/yyyy-22という形式になります。exec/obidos/ASINの代わりにdpで良いという情報もありますが、確かにリンクそのものは機能するもののamazonアソシエイトの「リンクの動作確認ツール」で合格しないので、少し長くなるもののexec/obidos/ASINを採用しています。

「作成する」ボタンの下方に広告のプレビューと広告コードが表示されるので「クリップボードにコピー」ボタンを押して広告コードをコピーして自身のウェブサイトに貼り付ける。

アマゾン広告コード用CSSCSS
.amazon-container {
	background: #fff;
	width: 100%;
	overflow: hidden;
	border: 1px solid #f90;
	border-top: 2px solid #f90;
	padding: 0;
}

.amazon-img {
	margin: 1em;
	border: none;
	width: 33%;
	float: left;
}

.amazon-img img {
	width:100%;
	height: auto;
}

.amazon-text {
	font-size: 13px;
	color: #0066c0;
	margin: 1em;
	padding-top: 2em;
}

.amazon-clear {
	clear: both;
}

.amazon-footer {
	font-size: 13px;
	text-align: right;
	padding-right: 1em;
	color: #333;
	background: linear-gradient(to bottom,#f8e6b8 0,#f3d686 6%,#ebb62c 100%);
}

サンプルのCSS
このまま or 好みに変更して使って下さい。

広告の右下に表示されるamazonのロゴ用。HTMLヘッダにこの1行を追加する。既にFontAwesome4.7.0を使用しているなら不要。

 © 2008- Gato.