WordPress

Amazon Associates Link Builderの使い方とカスタマイズ

『Amazon Associates Link Builder』のインストールから設定、使い方、デザインのカスタマイズまでの方法をまとめました。

WordPressサイトでAmazon商品を紹介するときは、『Amazon JS』というプラグインを使っていましたが、長らく更新されていないようなので、Amazonが公式に開発している『Amazon Associates Link Builder』を使うことにしました。

この記事を執筆している時点で、ベータ版です。
レビューが星2.5くらいと低い評価になっていますが、問題なく使えました。
ただ、アソシエイトリンクを設置したページは、少し表示が遅くなった気がします。

amazonアソシエイトアカウントとトラッキングIDを取得している前提で解説します。

Amazon Associates Link Builderをインストール

WordPressの管理画面から『プラグイン』→『新規追加』へ。

フォームに『Amazon Associates Link Builder』と入力し、『インストール』→『有効化』しておきます。

amzn-plugin-install

アクセスキー、シークレットキーを取得

まずは、Amazon Product Advertising APIで、アクセスキーとシークレットキーを取得するのですが、以前と認証キーの取得方法が変わっているので、前に取得したという方は新キーに移行します。
かなり、簡単に認証キーを発行できるようになりました。

amazonアソシエイトにログイン。

『ツール』から『Amazon Product Advertising API』を選択。
amzn-get-access-key-01

『新キーに移行』をクリックし、
amzn-get-access-key-02

『続ける』を選択。
amzn-get-access-key-03

アクセスキーとシークレットキーをメモ帳などにコピペしておきます。
amzn-get-access-key-04

Amazon Associates Link Builderの設定

WordPressの管理画面に戻ります。

左のメニューから、『Associates Link Builder』→『Settings』を選択。

『Tracking Id(s)』と『PA-API Credentials』を編集していきます。
トラッキングIDも用意しておいてください。

『Add a Marketplace』をクリックすると、トラッキングIDの入力欄が出てきます。

①Select Marketplaceは『JP』を選択し、末尾が−22のトラッキングIDを入力。
②コピーしておいたアクセスキーとシークレットキーを入力。
③使用条件に承諾するにチェックし、『Save Changes』をクリックして、設定を保存。

amzn-plugin-settings

Amazon Associates Link Builderの使い方

投稿画面にいくと、検索フォームが表示されるので、商品名やキーワードを入力。
amzn-plugin-usage-01

結果が出てくるので、商品を選択し、『Add Shortcode』をクリック。
amzn-plugin-usage-02

自動的に、ショートコードが挿入されます。
amzn-plugin-usage-03

Amazon Associates Link Builderののテンプレートをカスタマイズする

デフォルト状態でプレビューすると、こんな感じで表示されるのですが、デザインが気に入らない場合は、カスタマイズも可能です。

amzn-preview

テンプレートをカスタマイズする方法

『Associates Link Builder』→『Templates』を選択。

amzn-customize-template

①テンプレートの名前
②HTMLコード
③CSSコード

をそれぞれ入力して、『Save』。
『Settings』で『Default Template』を作成したものに変更すれば、好きなデザインにすることができます。

タグ早見表

項目 タグ
商品名 {{Title}}
商品リンク {{DetailPageURL}}
画像 {{LargeImageURL}}
{{MediumImageURL}}
{{SmallImageURL}}
商品メーカー {{By}}
現在の価格 {{CurrentPrice}}(表示例:¥1,200)
{{CurrentPriceValue}}(表示例:1200)
参考価格 {{StrikePrice}}(表示例:¥1,500)
{{StrikePriceValue}}(表示例:1500)
割引価格(価格) {{SavingValue}}
割引価格(%) {{SavingPercent}}
プライム {{Prime}}
販売店 {{Merchant}}
最低価格 {{MinimumPrice}}(表示例:¥1,000)
{{MinimumPriceValue}}(表示例:1000)
在庫あり {{InStock}}

途中でテンプレートを変更すると、今まで挿入したショートコードは変更後のテンプレートにはならないので、書き換えが必要です。

タグの使い方

まずは、HTMLで雛形を作って、Associates Link Builder用のタグに置き換えていきます。

基本的には、表示させたい項目に対応するタグを置き換えればいいのですが、Amazonではよく、実際の価格とは別に参考価格が表示されていることがありますよね?
参考価格が設定されていない場合には、表示させたくないです。

「もし、参考価格があるなら、表示させる」という場合は、次のような書き方をします。

<div class="amzn-product-strike-price">参考価格:<span class="strike-price">¥2,500</span></div>

↓

{{#StrikePrice}}<div class="amzn-product-strike-price">参考価格:<span class="strike-price">{{StrikePrice}}</span></div>{{/StrikePrice}}

{{#〜}} {{/〜}}で囲ってあげるだけで、if文のようになります。

雛形HTML

HTMLの雛形を作ってみました。
見た目は、こんな感じ。

amzn-sample-html

<div class="amzn-box">
  <div class="amzn-product-image"><a href="商品名URL"><img alt="商品名" src="商品画像URL"></a></div>

  <div class="amzn-product-meta">
    <div class="amzn-product-title"><a href="商品名URL">商品名</a></div>
    <div class="amzn-product-brand">メーカー・著者名</div>
    <div class="amzn-product-price">
      <div class="amzn-product-strike-price">参考価格:<span class="strike-price">¥2,500</span></div>
      <div class="amzn-product-saving">OFF: <span class="saving-percent">xx%</span></div>

      <span class="amzn-product-current-price">¥1,980<span> <span class="amzn-product-prime-icon"><i class="icon-prime"></i></span>
    </div>
    <div class="amzn-product-seller">販売元(Amazon.co.jpなど)</div>
  </div>
</div>
.amzn-box {
  border: 1px solid #eee;
  border-radius: 2px;
  display: -ms-grid;
  display: grid;
  font-size: 16px;
  -ms-grid-columns: 150px auto;
  grid-template-columns: 150px auto;
  -ms-grid-gap: 1rem;
  grid-gap: 1rem;
  margin: 2rem 0;
  padding: 2rem;
}
.amzn-product-image img {
  display: block;
}
.amzn-product-title {
  margin: 0 0 1rem;
}
.amzn-product-brand,
.amzn-product-price,
.amzn-product-seller {
  font-size: .8rem;
}
.amzn-product-current-price {
  color: #ab1700;
  font-weight: bold;
}
.strike-price {
  text-decoration: line-through;
}
.amzn-product-prime-icon .icon-prime {
  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;
  background-position: -192px -911px;
  background-size: 560px 938px;
  display: inline-block;
  height: 15px;
  margin-top: -1px;
  vertical-align: middle;
  width: 52px;
}
.amzn-product-prime-icon {
  display: inline-block;
  margin-right: 2px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .amzn-box .amzn-product-prime-icon .icon-prime {
    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;
    background-position: -192px -911px;
    background-size: 560px 938px;
    display: inline-block;
    height: 15px;
    margin-top: -1px;
    vertical-align: middle;
    width: 52px;
  }
}

カスタマイズ例

雛形HTMLをAssociates Link Builderのタグに置き換えると、以下のようになります。

タグ置き換え後のHTML

{{#Items}}
<div class="amzn-box" id="{{ID}}">
  {{#Item}}{{#aalb}}
  <div class="amzn-product-image"><a href="{{DetailPageURL}}"><img alt="{{Title}}" src="{{MediumImageURL}}"></a></div>

  <div class="amzn-product-meta">
    <div class="amzn-product-title"><a href="{{DetailPageURL}}">{{Title}}</a></div>
    {{#By}}<div class="amzn-product-brand">{{By}}</div>{{/By}}
    <div class="amzn-product-price">
      {{#StrikePrice}}<div class="amzn-product-strike-price">参考価格:<span class="strike-price">{{StrikePrice}}</span></div>{{/StrikePrice}}
      {{#SavingPercent}}<div class="amzn-product-saving">OFF: <span class="saving-percent">{{SavingPercent}}%</span></div>{{/SavingPercent}}

      <span class="amzn-product-current-price">{{CurrentPrice}}<span> {{#Prime}}<span class="amzn-product-prime-icon"><i class="icon-prime"></i></span>{{/Prime}}
    </div>
    {{#Merchant}}<div class="amzn-product-seller">{{Merchant}}</div>{{/Merchant}}
  </div>
  {{/aalb}}{{/Item}}
</div>
{{/Items}}

完成プレビュー

amzn-preview-02

テンプレートの作り方の詳細は、公式のPDFファイルがありますので、そちらもご覧になってみてください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です