【Simplicity】Amazon Associates Link Builderをカスタマイズしてみた

（7年前） WordPress

どうも、Tです。

「Tのジレンマ」ではAmazonアソシエイトを使用していますが、Amazon Associates Link Builderプラグインを導入して、カスタマイズしてみました。

ちょっとハマる部分とコードいじった部分があったので記録に残しときます。

インストールとかは、他のサイトでいっぱい記載されているのでいつも通り、割愛します。

カスタマイズやプラグインの導入を行う前は、事前にバックアップを取得しましょう。
スポンサーリンク
アドセンス1

環境

2018年7月現在、下記の環境で動作確認しています。

テーマやプラグインの違いで動作しないかもしれないのでご注意ください。

  • WordPress：4.9.6
  • テーマ：Simplicity2.6.0.9
  • Amazon Associates Link Builder：1.7.0

Amazonのリンクの見え方

プラグイン導入の経緯

最初は、シコシコとAmazonアソシエイトのサイトから商品リンクを作成していたのですが、毎度になると面倒だったのと見た目がシンプル過ぎたので少々見栄え良くしたいと思い、プラグインを探していました。

僕が今欲しいSurface Book2のリンクで見え方の違いをみてみましょう。

Amazonアソシエイト標準

Amazonアソシエイト標準

Amazonアソシエイトのサイトから商品リンクを作成した例です。

シンプルでAmazonらしいのですが、商品名が途中で切れてるし、パッと見目立ちません。

画像です。クリックしてもAmazonへはリンクしていません。価格もスクリーンショット取得時のものですのでご注意ください。

 

Amazon Associates Link Builder（デフォルト）

Amazon Associates Link Builder（デフォルト）

Amazon Associates Link Builderのデフォルトテンプレート（ProductCarousel）で作成した例です。

Simplicity2のCSSをいじっているせいか、そもそもまともに表示されませんでした。

といっても、正常に表示されてもシンプル過ぎたのでどちらにしろカスタマイズは必要かなぁと思いました。

画像です。クリックしてもAmazonへはリンクしていません。価格もスクリーンショット取得時のものですのでご注意ください。

 

 

Amazon Associates Link Builder（カスタマイズ）

Amazon Associates Link Builder（カスタマイズ）

自分でカスタマイズテンプレートを作成した例です。

商品名が全て表示され、パッと見でも目立つ見た目になりました。

画像です。クリックしてもAmazonへはリンクしていません。価格もスクリーンショット取得時のものですのでご注意ください。

 

ちなみに、1からカスタマイズするのは大変そうだったので、下記のauto-tsさんから盛大にパクらせていただきました。この場をかりてお礼申し上げます。

https://auto-ts.net/archives/2362/
auto-ts.net

なぜ、Amazon Associates Link Builderなのか？

Amazon Associates Link Builderの良いところ

公式対応

Amazon Associates Link Builderは、Amazonが公式に出しているWordpressプラグインなので安心感があります。

更新頻度◎

更新とテストがされています。2018年7月時点では、最終更新が3ヶ月前。

ちゃんとバージョンの確認もされていました。

挿入が簡単

記事に簡単に挿入することができます。

投稿ページに検索フォームができるので、文字を入力して「Search」をクリック。

検索結果が表示されるので、リンクを作成した商品をクリックするだけです。

非常に簡単。

価格はスクリーンショット取得時のものですのでご注意ください。

カスタマイズ可能

リンクのHTML、CSSをカスタマイズして見た目を好きなようにかけられます。

テンプレートとして保存できるので、最初に１度設定しておけばあとは使い回すだけでOK。

Amazonアソシエイト標準でない理由

上でも述べた通り、めんどくさい・シンプルすぎる・カスタマイズできないです。

AmazonJSではない理由

Amazonアソシエイト系のプラグインでは一番有名？なものに「AmazonJS」があります。

比較的新しい記事もオススメするものがありますが、最終更新が2年前です。

テストもされていないので、今後を考えて見送りました。

ヨメレバ・カエレバではない理由

ヨメレバ・カエレバも有名どころで、楽天アフィリエイトなど同時に表示でき、カスタマイズもできるのが魅力です。

ただ、僕はAmazonアソシエイトしかしていないのと、リンク作成時にWebサイトへ行かないといけない手間があったので見送りました。

他のアフィリエイトと同時利用するなら、利用してもいいかなと思っています。

Amazon Associates Link Builder

Amazon Associates Link Builderの設定

詳細に説明しているブログも多数あるのでサクッといきます。

「Amazon Associates Link Builder」->「Settings」を開きます。

 

「Tracking Id(s)」「Site Wide Settings」「PA-API Credentials」を設定します。

それぞれ見ていきましょう。

Tracking Id(s)

「Tracking Id(s)」の設定です。国（JP)とトラッキングIDを設定します。

 

トラッキングIDは、amazonアソシエイトサイトの「アカウント」->「トラッキングIDの管理」から確認できます。

Site Wide Settings

「Default Template」「Downloads Folder」を設定します。

「Default Template」は、カスタマイズしたテンプレート名を設定するので、カスタマイズ後に行いましょう。

「Downloads Folder」は、プラグインに関連する作業領域です。

デフォルトで使っても問題ないでしょう。

PA-API Credentials

Amazonアソシエイトの連携するアクセスキーの設定です。

「Acess Key ID」「Secret Access key」は、Amazonアソシエイトサイトから確認できます。

 

Amazonアソシエイトにログインし、「ツール」->「Product Adcertising API」をクリックします。

 

「認証情報を追加する」をクリックします。

追加された情報を「Acess Key ID」「Secret Access key」に設定しましょう。

Amazon Associates Link Builderのカスタマイズ

カスタマイズ内容

下記のauto-tsさんのものをほぼ丸コピしています。

本サイトの表示で良い場合は、下記の内容を丸コピしてください。

https://auto-ts.net/archives/2362/
auto-ts.net

追加カスタマイズ

auto-tsさんに下記カスタマイズを行いました。

  • 「Amazonで買う」の文言と装飾を追加しました
  • クリックボタンからAmazonロゴを削除しました
  • Primeロゴを自動で取得するようにしました

カスタマイズテンプレート作成

カスタマイズ用のテンプレートを作成します。

「Amazon Associates Link Builder」->「Templates」をクリックします。

 

「Select Template」に「Create new template」を選択します。

「Set a name for your template」は、任意の名前を付けましょう。

 

HTML記述

記述場所

「Add HTML for your template」に下記の「記述内容」を入力します。

入力後、画面下部の「Save」をクリックします。

記述内容
{{#Items}}
<div class="amazon_item" id="{{ID}}">
<div class="pc-ad-header">{{#AalbHeader}}{{#MarketplaceJP}}Amazon.co.jpで買う{{/MarketplaceJP}}{{/AalbHeader}}</div>
{{#Item}}
{{#aalb}}
<div class="amazon_image">
<a href="{{DetailPageURL}}" class="amazon_link" data-role="amazon_product" data-asin="{{ASIN}}" title="{{Title}}" target="_blank">
<img src="{{MediumImageURL}}" srcset="{{LargeImageURL}}" alt="{{Title}}">
</a>
</div>
<div class="amazon_info">
<span class="amazon_title"><a href="{{DetailPageURL}}" class="amazon_link" data-role="amazon_product" data-asin="{{ASIN}}" title="{{Title}}" target="_blank">{{Title}}</a></span>
<ul>
<!-- メーカー名が設定されている場合はメーカー名を表示する(書籍の場合は著者となる) -->
{{#By}}
<li>
{{By}}
</li>
{{/By}}
<!-- 在庫が存在する場合は価格・定価・AmazonPrime対象有無を表示 -->
{{#InStock}}
<li>
<b>価格　　</b> <span class="amazon_price">{{CurrentPrice}}</span> {{#Saving}} <s>{{StrikePrice}}</s> {{/Saving}} {{#Prime}}<i class="icon-prime-all"></i>{{/Prime}}
</li>
{{/InStock}}
<!-- 販売者が設定されている場合は販売者を表示する -->
{{#Merchant}}
<li>
<b>販売者　</b>{{Merchant}}
</li>
{{/Merchant}}
</ul>
<span class="amazon_button"><a href="{{DetailPageURL}}" rel="nofollow"> クリックして今すぐチェック</a></span>
</div>
<div class="amazon_footer"></div>
{{/aalb}}
{{/Item}}
</div>
{{/Items}}

CSS記述

記述場所

CSSは「Add CSS for your template」に記述しません。

Simplicityを使っているためかと思いますが、ここに記載してもCSSが反映されませんでした。

変わりにSimplicityの「追加CSS」に下記の「記述内容」を入力します。

記述内容
/*Amazon Associates Link Builder*/
.amazon_item {
  font-size: 14px;
  padding: 10px;
  position: relative;
  display: block;
  color: #333;
}
.amazon_item a {
  color: #e47911;
  text-decoration: none;
}
.amazon_item a:hover {
  color: #996633;
}
.amazon_item * {
  margin: 0;
  padding: 0;
  border: 0;
}
.amazon_item .amazon_image {
  display: block;
  float: left;
  margin-right: 10px;
  width:112px;
  height:160px;
  text-align:center;
}
.amazon_item .amazon_image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height:100%;
}
.amazon_item .amazon_info {
  display: block;
  overflow: hidden;
  margin-left: 122px;
}
.amazon_item amp-img{
  display: inline-block;
  width: 100%;
  height:100%;
}
.amazon_item .amazon_info .amazon_title {
  margin: 0 0 5px;
  padding: 0;
  font-size: 1.2em;
  font-weight: bold;
  clear: none;
  border: none;
}
.amazon_item .amazon_info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.amazon_item .amazon_info ul li {
  list-style: none;
  line-height: 1.5em;
  font-size: 1em;
  margin: 0;
  padding: 0;
}
.amazon_item .amazon_info ul li b {
  margin-right: .5em;
  color: #555;
  font-weight: normal;
}
.amazon_item .amazon_info .amazon_price {
  color: #900;
}
.amazon_item .amazon_info .amazon_price span {
  color: #666;
  margin-left: .5em;
}
.amazon_item .amazon_info .amazon_prime {
    position: absolute;
}
.amazon_item .amazon_review {
  padding: 0;
  width: 100%;
  height:150px;
}
.amazon_item .amazon_footer {
  clear: both;
}
.amazon_footer {
  margin-bottom: 20px; 
}
.amazon_book .amazon_info ul,
.amazon_music .amazon_info ul {
  margin-top: 0.5em;
}
.amazon_book .amazon_info ul li,
.amazon_music .amazon_info ul li {
  line-height: 1.6em;
}
.amazon_button a{
  background: #f6ce50;
  color: #000;
  font-size: 14px;
  padding: 7px 15px 5px;
  border-radius: 5px;
  border-bottom: 3px solid #e3b628;
  margin-top: 10px;
  width: auto;
  text-align: center;
  display: block;
  font-weight: bold;
}
.amazon_info img{
  margin-bottom: 5px;
  padding: 0;
  border: 0; 
}
@media (max-width: 720px) {
  .amazon_item .amazon_info {
    margin-bottom: 10px;
  }
  .amazon_item .amazon_review {
   display: none;
  }
}
@media (max-width: 480px) {
  .amazon_item img {
    width: 60px;
    max-width: 60px;
  }
  .amazon_item .amazon_info {
    margin-left: 70px;/* !important;*/
  }
  .amazon_item .amazon_info .amazon_title a {
    font-size: 0.9em;
  }
  .amazon_item .amazon_info ul li {
    font-size: 0.9em;
  }
 .amazon_item .amazon_review {
   display: none;
  }
}
.pc-ad-header{
	font-size: 16px;
	font-weight:bolder;
	border-bottom: double 5px #FFC778;
}
.icon-prime-all {
    background: url("https://images-na.ssl-images-amazon.com/images/G/01/AUIClients/AmazonUIBaseCSS-sprite_2x_weblab_AUI_100106_T1-4e9f4ae74b1b576e5f55de370aae7aedaedf390d._V2_.png") no-repeat;
    display: inline-block;
    margin-top: -1px;
    vertical-align: middle;
    background-position: -192px -911px;
    background-size: 560px 938px;
    width: 52px;
    height: 15px;
}

 

これでリンクを作成して、各サイト用に微調整しましょう。

Amazon Associates Link Builderの注意点

一回の検索で表示されないことがある

商品検索時に下記の画面がでて商品が出てこないときがあります。 Searchボタンを何回か押すと検索結果がでますが、ちょっとイラっとします。

検索で表示されない商品がある

取り扱いが終わった商品、在庫切れの商品は検索結果にでてこないようです。 個人的には、あまり問題視していませんが念のため。

プラグインの評価が低い

これは、インストール前に調べて気になったのですが、2018年時点でやたらと評価が低いです。海外レビューばかりだったのですが、動かないやらで問い合わせしているケースが散見されました。 僕が使っている範囲では、とりあえずうまく動いているのと、サポート状況（過去２ヶ月いないに解決した問題）を見ると着々と解決されているようなので、危惧しないことにしました。

Amazon Associates Link Builder1.0が出たのが2016年なので、まだまだこなれていない部分があるのかもしれませんね。

まとめ

全体評価としては、かなり気に入っています。 日本語のネット上記事では、まだまだAmazonJSの記事が多いですが、Amazon Associates Link Builderの記事やカスタマイズ説明もそこそこあります。 今後のことを考えると更新されていないAmazonJSよりAmazon Associates Link Builderを選んだ方がいいでしょう。 ただ、他にもAmazonアソシエイトプラグインはあるので、何種類か使ってみて判断してもらえたらと思います。

 

最後に僕が欲しいSurfaceBook2の広告載せときます。

[amazon_link asins=’B07CRBPCDT’ template=’T-dilemma-Original’ store=’t-dilemma-22′ marketplace=’JP’ link_id=’75a7ef98-83fb-11e8-9508-53c3d79ce9e0′]