ワードプレスにAmazonのアフィリエイトリンクを貼るために、Amazon公式のプラグインAmazon Associates Link Builder を使い始めました。
この他にもいくつかのAmazonにリンクを貼るプラグインがあったのになぜこのプラグインを使いはじめたかと言うと、他のプラグインは更新されてなかったりシンプル過ぎたりっていうのもあったんですが、やっぱりAmazonの公式プラグインっていうのが大きかったからです。
なんだかんだいってもやっぱり公式っていう安心感は強いですよね。
私の場合使い始めるのが遅かったのが幸いして色々なサイトにインストール方法や使い方が載ってましたので比較的簡単に使い始めることが出来ました。
ただ、また今度違うサイトを立ち上げるとなった時に調べ直すのも面倒なのでざっくりと自分なりにまとめておこうと思います。
インストール方法
まずはWordPressの管理画面＞プラグイン＞新規追加から「Amazon Associates Link Builder」と検索してインストール、有効化します。
AmazonのProduct Advertising APIのキーを準備してsetting画面に入力します。
自分の場合ここでちょっと嵌ったのですが、広告ブロックの拡張機能を使っていると設定画面を保存することが出来ませんでした。
広告ブロックの拡張機能を無効にするか、自分のサイトをホワイトリストに入れることで解決することが出来ました。
テンプレートを変更した
標準テンプレートが見栄えが悪かったのでWordPressでAmazon Associates Link Builder Amazonアフィリエイト公式プラグインという記事を参考にさせてもらいました。
左側のメニューのAssociates Link BuilderからTemplatesを開きます。
HTMLに下記のコードを入力します。
{{#Items}}
<div class="amazon_item" id="{{ID}}">
{{#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}}" 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}}<img src="Primeのアイコン画像" alt="prime" width="画像幅" height="画像高さ"> {{/Prime}}
</li>
{{/InStock}}
<!-- 販売者が設定されている場合は販売者を表示する -->
{{#Merchant}}
<li>
<b>販売者 </b>{{Merchant}}
</li>
{{/Merchant}}
</ul>
<span class="amazon_button"><a href="{{DetailPageURL}}" rel="nofollow"><i class="fab fa-amazon"></i> クリックして今すぐチェック</a></span><!-- <i class="fab fa-amazon"></i>の箇所は"Font Awesome 5 Brands"の読込が必要です。 -->
</div>
<div class="amazon_footer"></div>
{{/aalb}}
{{/Item}}
</div>
{{/Items}}
Primeのアイコン画像の所にアップロードしたアイコンのファイル名を入力して画像幅と画像高さも入力してください。
私は画像幅と画像高さの入力を忘れてAMPエラーに嵌りました（；^ω^）
次に、CSSに下記のコードを入力します。
.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;
}
}
AMPエラーを吐く
PCサイトだけならこれで設定完了なんですが、このままだとAMPエラーが出てしまいます。
（この記事を書いている時点でバージョン1.8.0です。）
タグ「amp-img」のレイアウト「width」に含まれる属性の値が無効です
なんだこれ？
調べてみるとここが悪さをしてるらしい。
<img src="https://ir-jp.amazon-adsystem.com/○○○○○○○" width="1px" height="1px" alt="" style="position: fixed !important; bottom: -1px !important; right: -1px !important; border:none !important; margin:0px !important;" />
ここからは自己責任になるのですが、このエラーを消したい場合はFTPなどを使ってこの部分を修正しましょう。
ワードプレスのインストールしてあるフォルダの中にwp-content＞plugins＞amazon-associates-link-builder＞rendering＞
または、wp-content＞plugins＞amazon-associates-link-builder＞lib＞php＞
ここに、aalb_impression_generator.phpというファイルがあるのでそれを開くと
return '<img src="' . $image_url . '" width="1px" height="1px" alt="" style="position: fixed !important; bottom: -1px !important; right: -1px !important; border:none !important; margin:0px !important;" />'
という部分が最後の方にあるのでこれを書き換えます。
対処方法は２つあって、1つ目が以下のようにimgタグ自体生成されないようにする方法。
return '';
2つ目が以下の様にインラインスタイルを削除してエラーを解消する方法です。
return '<img src="' . $image_url . '" width="1" height="1" alt="" />';
これでAMPのエラーを解消して使うことが出来るようになりました。
