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

2017年5月31日

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

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

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

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

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

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

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

posted with ヨメレバ

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

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

AMPでの表示に難がある

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

<div class="booklink-image">
    <a href="http://www.amazon.co.jp/exec/obidos/asin/B06ZYTCJSM/auto-ts-22/" 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公式プラグインなので今後も安定して動作しそうですし、テンプレートを一度作ってしまえば表示がキレイに行えそうです。

Amazon Associates Link Builderを導入する

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

インストール

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

Product Advertising APIのキーを入手

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

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

Product Advertising API

このように設定します。

Amazon Associates Link Builder

テンプレートを編集

もともとのテンプレートの表示は見辛くて使い物にならないので、私は独自にテンプレートを作りました。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;
  }
}

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

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

amazon

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

Amazon

表示例

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

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

よくあるトラブル

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

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

設定画面がおかしい

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

Amazon Associates Link Builder Amazon

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

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=”〜〜”をまるっと削除します。公式な方法ではないので、あくまで自己責任にてお願いします。