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

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