AmazonJS から Amazon Associates Link Builder に切り替えた

アマゾンのアフィリエイトプラグインをAmazonJSからAmazon Associates Link Builder に切り替えました。

AmazonJS ではなんの問題もなかったのですが長い間更新されていなかったのとAMP対応されそうもなかったので切り替えることにしました。

Amazon Associates Link Builder はAMP表示に対応してます。ただWING（AFFINGER5）ではAMPがβなこともあり表示されないみたいですが。

Amazon Associates Link Builder テンプレート登録

Amazon Associates Link Builderでは表示のテンプレートを登録することでAmazonJSっぽい表示もできるようになっています

役に立つかどうかわかりませんが自分のテンプレートを乗っけておきますね

Add HTML for your template

{{#Items}}
  {{#Item}} 
    {{#aalb}}
      <div class="aalb-sample-template">
        <div class="aalb-sample-template__image">
          <a class="aalb-sample-template__image-link" href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow">
            <img src="{{MediumImageURL}}" alt="{{Title}}" />
          </a>
        </div>
<div class="aalb-sample-template__details">
  <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>
          
          
          
          <div class="aalb-sample-template__btn">
            <a href="{{DetailPageURL}}" title="{{Title}}" target="_blank" rel="nofollow">Amazonで探す</a>
          </div>
        </div>
      </div>
　　　　{{/aalb}}
　　{{/Item}}
{{/Items}}

Add CSS for your template

.aalb-sample-template {
  display:block;
  padding:1rem;
  border: 1px solid #ddd;
  border-radius:4px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.05);
}

.aalb-sample-template__image {
  text-align:center;
}

.aalb-sample-template__details {
  margin: .5rem 0 0;
}

.aalb-sample-template__price {
  font-size: .8rem;
  color: #666;
}

.aalb-sample-template__btn {
  margin: 1rem 0 0;
}
.aalb-sample-template__btn a {
  display:block;
  padding: .25rem 2rem;
  border:1px solid #f47e1e;
  border-radius:4px;
  background-color: #f47e1e;
  color: #fff;
  text-decoration: none;
  text-align:center;
  transition:all .3s;
}

@media only screen and (min-width: 600px) {
  .aalb-sample-template {
    display:flex;
  }
  .aalb-sample-template__details {
    margin: 0 0 0 1rem;
  }
  .aalb-sample-template__btn a {
    display:inline-block;
  }
  .aalb-sample-template__btn a:hover {
    background-color: #fff;
      color: #f47e1e;
  }
}

適当にサイト巡って切り貼りしたものですがスマホ表示が綺麗にできたと結構気に入ってます

AmazonJSからAmazon Associates Link Builderへ書式の変更

こちらのページにプラグインと正規表現を用いた変更方法が描かれています

これで今までAmazonJSで描かれていたものもAmazon Associates Link Builderで表示できるようになります。AmazonJSはプラグイン欄から削除してしまいましょう

まとめ

これにて移行が完了しました。

AmazonJSよりAmazon Associates Link Builderのほうが柔軟性もあっていい感じだと思います

あとは早くAFFINGER5がAmazon Associates Link Builderに対応しないかなぁ