ASPのツールもアソシエイトツールバーも使わずにアマゾンのアフェリエイトリンクをそれなりのデザインで生成する方法

この記事の内容を元にさらにブラッシュアップしたものを現在は使っている。詳細は以下の記事。

Amazonアフィリエイトリンクを管理画面で一元管理する

記事にショートコードでアフィリエイトリンクを挿入していたが、リンク切れの修正が面倒。管理画面で一元管理できるように修正してみ…

色々なジャンルの商品を紹介するとなるとアマゾンは外せないけど、アマゾンで作成できる画像付きのリンクって正直微妙だよね・・・。

ちたまん

ASPとか公開されているツールを使うのは?

ツン子

以前はたくさんあったけど、アマゾン側の仕様変更で最近はツールも減ったんだよね。その辺考えるとシンプルな機能のみで自作したほうが良いかなって

ちたまん

あまり色々なサービスに頼っていると変更や停止時に困るもんね。

ツン子

アマゾンのアフィリエイトリンクを自作しよう

と、いうことで今回はアマゾンのアフィリエイトリンクを自作してみる。自作と言ってもHTMLを手動で書くわけでなく、必要な情報のみ入力してワードプレスに生成させる方法。

今回作成したのは以下のようなリンク

ちなみに執筆時点では楽天のボタンはアフィリエイトではなく通常のボタン。今回はアマゾンのアフィリエイトリンクをツールを使わずにワードプレスで作成する方法

アマゾンのアフィリエイトリンクの構造

商品ページへのリンクの構造は以下のようになっているらしい。

https://www.amazon.co.jp/exec/obidos/ASIN/ASIN/アソシエイトID

上記のように商品のASINと自分のアソシエイトIDを入れてあげればアフィリエイトリンクになる

ASINとは?

ASINはアマゾンの商品管理コードのことで例えば上記のリールの場合だと

www.amazon.co.jp/シマノ-SHIMANO-ベイトリール-オシアコンクエスト-300HG/dp/B00ZQCCVCC/・・・

「/dp/」の直後のコード「B00ZQCCVCC」がASINになる。

ISBN-10というのもある

www.amazon.co.jp/ジェイソン流お金の増やし方-厚切りジェイソン/dp/4835646460/・・・

書籍だと上記のようにISBN-10という数字のみの番号があるが、ASIN同様に使えるのでここではISBNもASINの一部として扱う。

画像URLの取得方法

さてASIN同様に画像URLも商品ページから拾っても構わないのだが、面倒なのでASINからうまく引っ張れないかなと調べてみたところ方法を見つけた

  • 75ピクセル
    https://images-fe.ssl-images-amazon.com/images/P/ASIN.09.THUMBZZZ.jpg
  • 110ピクセル
    https://images-fe.ssl-images-amazon.com/images/P/ASIN.09.TZZZZZZZ.jpg
  • 160ピクセル
    https://images-fe.ssl-images-amazon.com/images/P/ASIN.09.MZZZZZZZ.jpg
  • 500ピクセル
    https://images-fe.ssl-images-amazon.com/images/P/ASIN.09.LZZZZZZZ.jpg

このようにASINのみで画像URLを特定することができる。サイズは長辺の長さであることだけ注意。またこの方法では取得できない商品もあるようなのでその場合は諦める

注意

アフィリエイト目的でアマゾンの画像を使用する場合は直リンクが条件。ダウンロードして保存してはいけない。また加工もNG。

ショートコードかブロックか?

アフィリエイトリンクと画像URLがわかったのでこれを元に画像付きのリンクを記事に埋め込むわけだけど、方法はいくつかあり一般的なのはショートコードまたはブロックを使う方法だろう

使い勝手はブロックなんだけど、如何せんブロックは作るのが面倒。その点ショートコードは簡単に作れるけど、いざ使うときにショートコードを忘れてしまうことが多い。ただその点はショートコードを挿入しやすいように何らかの対策を講じれば済むので、今回はショートコードで作成してみる

ぶっちゃけるとブロックの作り方を思い出せなかったw
調べるのだるいからショートコードでいっかなってw

ちたまん

あんたはそういうオトコだよね・・・。

ツン子

ショートコードの作成

と、いうことでfunctions.phpにコードを書いていく

functions.php

function createAmzLink($atts){
	
	$id = get_option('amzID');
	$url = 'https://www.amazon.co.jp/exec/obidos/ASIN/' .$atts['dp'].'/'.$id;
	$rUrl = 'https://search.rakuten.co.jp/search/mall/' .$atts['title'];
	$imgUrl = 'https://images-fe.ssl-images-amazon.com/images/P/' . $atts['dp'] . '.09.MZZZZZZZ.jpg';

	$html = '<ul class="amzLink fPadding1x">'."\n";
	$html .= '	<li class="imgArea"><a href="' .$url. '" target="_blank"><img src="'. $imgUrl .'" /></a></li>'."\n";
	$html .= '	<li class="bodyArea">'."\n";
	$html .= '		<h4>'. $atts['brand'] .'</h4>'."\n";
	$html .= '		<h5>'. $atts['title'] .'</h5>'."\n";
	$html .= '		<ul class="linkList">'."\n";
	$html .= '			<li class="amz"><a class="linkBtn" href="' .$url. '" target="_blank">Amazonで見る</a></li>'."\n";
	$html .= '			<li class="raku"><a class="linkBtn" href="' .$rUrl. '" target="_blank">楽天で探す</a></li>'."\n";
	$html .= '		</ul>'."\n";
	$html .= '	</li>'."\n";
	$html .= '</ul>'."\n";
	
	return $html;
}

add_shortcode('amzLink','createAmzLink');

こんな感じで今回は引数付きのショートコード。引数としてASINを渡してあげる。

実際に使用するときは・・・

[amzLink dp='ASIN' title='商品名' brand='ブランド']

このようにASINに加えて商品名、ブランドの3つの情報を与えて使う。ショートコードの引数はシングルコーテーションで囲まなくても動作するけど、スペースや記号が入ると誤動作するので囲ったほうが安心。

また今回は楽天のボタンを設置しているけど楽天は入力したタイトルの検索結果ページのリンクとしている。

複数行のHTMLをPHPで作成する場合、いくつか方法があるけど2~20行くらいだったら上記のように「.=」で結合していくのが好き。

注意

“\n”はダブルコーテーションで囲わないと駄目。

CSS

/*********************************************************** amzLink */

.amzLink{
	display:flex;
	justify-content:start;
	align-items: center;
	margin:2rem 0;
	list-style:none;
	border:2px solid var(--bc5);
}

.amzLink li.imgArea{
	width:160px;
	max-width:35%;
	padding:0;
	margin:0;
}

.amzLink li.imgArea img{
	display:block;
	width:100%;
	margin:0;
	padding:0;
	border:none;
}

.amzLink li.bodyArea{
	padding:0 0 0 1.5rem;
	margin:0;
}
.amzLink li.bodyArea h4{
	margin:0;
	line-height:1.6em;
	font-size:1rem;
	color:#777;
}
.amzLink li.bodyArea h5{
	margin:0.5rem 0;
	line-height:1.6em;
	font-size:1.2rem;
	color:var(--bc2);
}

.amzLink .linkList{
	display:flex;
	flex-wrap:wrap;
	justify-content:start;
	align-items: center;
	margin:0.5rem 0;
	padding:0;
	list-style:none;
}

.amzLink .linkList li{
	margin-top:0.5rem;
	margin-right:0.5rem;
	min-width:11rem;
}

.amzLink .raku .linkBtn{
	background-color:#e55;
	border:1px solid #e55;
}

.amzLink .raku .linkBtn:hover{
	background-color:#fff;
	color:#e55
}

.amzLink .amz .linkBtn{
	background-color:#ea5;
	border:1px solid #ea5;
}

.amzLink .amz .linkBtn:hover{
	background-color:#fff;
	color:#ea5;
}

CSSはこんな感じ。上記CSSには載っていないけどfunction.phpに記述されている「fPadding1x」というクラスはテーマで共通で使っているもので、余白をデバイスごとに調整するクラス。これ以外はメディアクエリで表示を分けたりしていない。

さらに発展させたい場合は以下の記事を参照

今回のショートコードではリンク切れなどで修正が必要になった場合に面倒。そこで管理画面にてアマゾン商品を一元管理してみた

Amazonアフィリエイトリンクを管理画面で一元管理する

記事にショートコードでアフィリエイトリンクを挿入していたが、リンク切れの修正が面倒。管理画面で一元管理できるように修正してみ…

こちらも参考にしてほしい