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 id="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="amazon_prime_icon.png" alt="prime"> {{/Prime}}
 </li>
 {{/InStock}}
 <!-- 販売者が設定されている場合は販売者を表示する -->
 {{#Merchant}}
 <li>
 <b>販売者 </b>{{Merchant}}
 </li>
 {{/Merchant}}
 </ul>
 <span class="amazon_button"><a href="{{DetailPageURL}}" rel="nofollow"><i class="fa fa-amazon"> </i> クリックして今すぐチェック</a></span> 
 </div>
 <div class="amazon_footer"></div>
 {{/aalb}}
 {{/Item}}
</div>
{{/Items}}
{{#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 id="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="https://sex-tokyo.com/wp-content/uploads/2017/05/amazon_prime_icon.png" alt="prime"> {{/Prime}}
 </li>
 {{/InStock}}
 <!-- 販売者が設定されている場合は販売者を表示する -->
 {{#Merchant}}
 <li>
 <b>販売者 </b>{{Merchant}}
 </li>
 {{/Merchant}}
 </ul>
 <span class="amazon_button"><a href="{{DetailPageURL}}" rel="nofollow"><i class="fa fa-amazon"> </i> クリックして今すぐチェック</a></span> 
 </div>
 <div class="amazon_footer"></div>
 {{/aalb}}
 {{/Item}}
</div>
{{/Items}}

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

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

amazon

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

amazon_link asins=’4408063258′ template=’lalazine’ store=’auto-ts-22′ marketplace=’JP’ link_id=’8acac4b7-4564-11e7-bc79-4ddf63021b86′

表示例

 

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