WordPressでAmazon Associates Link Builder Amazonアフィリエイト公式プラグイン

2017年5月31日2020年3月31日

（2020年1月追記）Amazon Associates Link Builderの使用をやめました。理由はこちらの通り。

PA-APIv5になるにも関わらず全然更新されない
WordPressの更新も放置
バグも放置
サポートにも対応しない
本当にバグが多い

乗り換え先はWPアソシエイトポストR2です。Rinkerでもいいのですが、プログラミングに慣れている方はWPAP R2のほうが使いやすいかと思います。

（2020年2月追記）Amazon Associates Link Builderプラグインの提供終了が決定したようです。

先日から、WordpressでAmazonアフィリエイトリンクを貼るために、Amazon公式プラグインであるAmazon Associates Link Builderを使い始めました。

なかなか悪くないプラグインだと思うのですが、日本語の記事が少なかったので紹介してみます。

1. なんでこのプラグインを使い始めたの？
2. 乗り換え先を探した
3. Amazon Associates Link Builderを導入する
4. よくあるトラブル

なんでこのプラグインを使い始めたの？

私は今までカエレバ・ヨメレバを使用していました。

カエレバ・ヨメレバは、Amazonだけでなく楽天などへの表示も一発で行える素晴らしいツール（作者様に感謝）なのですが、だんだんと以下のような難点が見えてきました。

posted with ヨメレバの記載が入る

ヨメレバでリンクを作成すると、このようにクレジットが入ります。

トレードステーション EasyLanguage入門[Kindle版]

posted with ヨメレバ

auto-ts.net 2017-04-19

Kindleで購入

Amazon[書籍版]で購入

posted with ヨメレバ

この記載と外部リンクが増えているのは、ユーザーにとって誤クリックの機会が増えたり、SEO的に難点が有るような気がしました。（どれだけの影響か分かりませんが、、）

特に私のブログ読者はWebに慣れている人は多くないようですので、なおさらです。

AMPでの表示に難がある

ヨメレバのリンクのimgタグには、このようにwidthとheight要素が入りません。

<div class="booklink-image">
    <a href="https://www.amazon.co.jp/dp/B06ZYTCJSM?tag=auto-ts-22&linkCode=ogi&th=1&psc=1" target="_blank" rel="nofollow">
        <img style="border: none;" src="https://images-fe.ssl-images-amazon.com/images/I/518FCKQoriL._SL320_.jpg" />
    </a>
</div>

ですので、AMPに対応させるにはimgをamp-imgに置換した上、width属性とheight属性を付けなければなりません。自動でやってくれるプラグインもありますけどね。

WordPressで長いコードを貼り付けるのがちょっと面倒

カエレバのhtmlコード、かなり長いんですよね、、なのでWordPressで記事を編集している時に見にくくてちょっと面倒でした。

Amazon以外のリンクは要らない

しばらくAmazonと楽天とで収益を計測したのですが、結果、ほぼ予想通りですが楽天からの収益はAmazonに比べて格段に少なかったです。

これならAmazonだけの表示に特化して、より美しく見やすく表示したほうが良いかと思いました。

乗り換え先を探した

Amazonへのリンクが美しく表示できる
今後もサポートやバージョンアップが期待できる
AMPへの表示に問題なし
クレジット表記なし

このような条件でいろいろとツールを探して、Amazon Associates Link Builderに行きつきました。候補はいくつかありましたが、下記理由から私は断念。

AmazonJS：アップデートが行われていない、JavaScriptで表示を行うのでAMP非対応
Babylink：表示があまりにもシンプル
amakuri：閉鎖騒ぎがあったので依存するのは危険かなと、、

その点Amazon Associates Link BuilderはAmazon公式プラグインなので今後も安定して動作しそうですし、テンプレートを一度作ってしまえば表示がキレイに行えそうです。

株式投資自動売買で儲けるシステムトレード「トレードステーション入門」 (ブルーガイド・グラフィック)

2,405円(06/10 13:06時点)

Amazonでチェックする楽天で購入 Yahoo!ショッピング

Amazonの情報を掲載しています

Amazon Associates Link Builderを導入する

ではざっと導入方法を紹介してみます。

インストール

WordPressの管理画面から「Amazon Associates Link Builder」と検索してインストール、有効化します。

Product Advertising APIのキーを入手

Amazon Associates Link Builderを使用するには、Amazonの「Product Advertising APIのキー」というものを手に入れないといけません。

APIキーはAmazonアフィリエイトの管理画面から入手できます。

このように設定します。

テンプレートを編集

もともとのテンプレートの表示は見辛くて使い物にならないので、私は独自にテンプレートを作りました。Amazon Associates Link Builderのカスタマイズという記事を参考にしています。

ここからテンプレートの編集を行います。

私はこのように書きました。※Amazonプライムのアイコンは自身で用意下さい

{{#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}}

.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;
  }
}

記事編集画面で商品を探してクリック

このように記事作成画面に入力欄が出てきますので、商品名を入れて検索します。

すると、記事内にこのようにコードが1行入ります。これでOKです。

表示例

このように表示されます。

株式投資自動売買で儲けるシステムトレード「トレードステーション入門」 (ブルーガイド・グラフィック)

2,405円(06/10 13:06時点)

Amazonでチェックする楽天で購入 Yahoo!ショッピング

Amazonの情報を掲載しています

皆さんもぜひ試してみて下さい！

よくあるトラブル

「Amazon Associates Link Builder」でググるとうれしいことにこちらの記事がヒットするので、たまにお問い合わせをいただきます。

Amazon Associates Link Builderのよくある質問はこちらの通り。

設定画面がおかしい

設定画面の先頭に「Are you sure you want to remove this marketplace?」と出てきて、設定画面での変更が一切効かない状態になります。

お使いのブラウザに広告ブロックの拡張機能が入っているとこうなることがあるようです。広告ブロックの拡張機能を無効にするか、自分のサイトをホワイトリストに入れましょう。

AMPでエラーが出る

バージョン1.6.0からインプレッショントラッキングの機能が追加され、アフィリエイトリンクの直前に次のようなimgタグが入るようになりました。

<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;" />

実はここに複数の文法エラーがあるので、AMPはおろか、通常のHTMLとしてもエラーが出ます。

バージョンアップを待ちたいところですが、今すぐ直したい方は次のように修正しましょう。

（v1.8以降）/wp-content/plugins/amazon-associates-link-builder/rendering/impression_generator.php

または

（それ以前）/wp-content/plugins/amazon-associates-link-builder/lib/php/aalb_impression_generator.php

の148行目あたりをこのように修正します：

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;" />';

↓

return '<img src="' . $image_url . '" width="1" height="1" alt="" />';

widthとheightの中のpxを削除して、style="〜〜"をまるっと削除します。公式な方法ではないので、あくまで自己責任にてお願いします。

記事まるまる文字化け

読者さんから私に指摘を頂いたのですが、Amazon Associates Link Builderを使用した上である条件を満たすと、記事がすべて文字化けします。

Amazon Associates Link Builderの設定画面の、「Remove rel="noreferrer" for Amazon Affiliate Links from all posts」にチェックが入っている
記事内に、rel="noreferrer"を含むAmazonへのリンクがある