コピペでOK!Amazon Link Builderを導入!AmazonJSっぽいテンプレートを作成した。

このサイトではAmazonアソシエイトのリンクをAmazonJSというプラグインで表示していたのですが、AMPに対応しておらず、ショートコードが丸出しで公開されている事に気づきました。

ショートコードが出ているのは問題ありません。
しかしAmaoznJSのままではAMPページにアソシエイトリンクが生成されていないので、アソシエイトの収益はゼロになってしまいます。

このままでは良くないと思い、対応策を調べていました。

すると出てきたのがAmazon Associates Link Builder(以下リンクビルダー)

リンクビルダーはAmazonのワードプレス用公式プラグインで、AMPページにも対応しているという事。

AmazonJSは個人で作られたプラグインで、最近は更新頻度もかなり少ないので、AmazonJSを使ったアソシエイトリンクは一時中断して、リンクビルダーを導入する事にしました。

目次

Amazon Associates Link Builderの導入

ダウンロードと有効化

ワードプレスのプラグインページから『Amazon Associates Link Builder』と検索するか、下のリンクからダウンロードも可能です。

Amazon Associates Link Builder | WordPress.org

ダウンロードが終れば、プラグインページに移動し『有効化』をクリックしましょう。

設定

リンクビルダーをダウンロードして有効にすると、メニューにリンクビルダーの項目が追加されるので、「settings」へ移動しましょう。

 

移動したら下の画像が出てくるので、国(基本はJP)、アソシエイトID、アクセスキー、シークレットキーを入力します。

入力が終ったら、下にチェックを入れて「Save Changes」をクリックして登録。

 

これで初期設定は完了。

使い方

下の画像の検索窓から商品を検索します。

上の初期設定が正しく完了していないと、エラーが出ます。

 

リンクを表示したい商品を選ぶと、下のリストに追加されます。

複数選択可能です。選び終わったら「Add Shortcode」からショートコードが生成されます。

商品が見つからないときは

AmazonJSにはアマゾンのURLからリンクを作成する機能がありましたが、リンクビルダーにはそういう機能は現在ありません。

リンクビルダーで表示したい商品が見つからない時は、アマゾンのURLから商品のタグをコピーして検索欄に入力して検索してみましょう。

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

いくつかテンプレートが用意されていますが、あまり良いデザインではなかったので、カスタイマイズ例の紹介です。

まずリンクビルダーのメニューから「Templates」へ移動。

こんな画面が出てきます。

「Select Template」で「Create new template」を選択し、その下にテンプレートの名前を入力します。

そして、「Add HTML for your template」と「Add CSS for your template」に以下を入力していきます。

Add HTML for your template

{{#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}} {{/Prime}}
</li>
{{/InStock}}
<!– 販売者が設定されている場合は販売者を表示する –>
{{#Merchant}}
<li>
<b>販売者 </b>{{Merchant}}
</li>
{{/Merchant}}
</ul>

</div>
<div class=”amazon_footer”></div>
{{/aalb}}
{{/Item}}
</div>
{{/Items}}

Add CSS for your template

.amazon_item {
font-size: 14px;
padding: 25px 10px 0px 10px;;
position: relative;
display: block;
color: #333;
border: solid 1px #ddd;
margin-bottom: 25px;
}
.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:112px;
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;
}
}

オープンケージのテーマを使っている時は

このサイトではオーブンケージの有料テーマ、スワローを使っています。

オープンケージのテーマを使っていると、箇条書きの「・」が表示されるので、それを消すためのショートコードです。

「Add CSS for your template」に以下を追記してください。

Amazon Link Builder のアイコンを消す
/* Amazon Link Builder のアイコンを消す */
.entry-content .amazon_item li:before,
.entry-content .amazon_item a[target=”_blank”]:after{
content:none;
}

出来上がるのがこちら

上のリンクが以前使っていたAmazonJS、下のリンクが今回導入したリンクビルダーのデザインです。

AmazonJSより画像が大きく見えやすくなったので、気に入っています。

できれば価格の取得時間も載せたいけど、知識がありません…。

このテンプレートをデフォルトに設定する

リンクビルダーのメニューから、初期設定を行った「Settings」へ移動します。

Default Templateに今回作成したテンプレートを登録。
下のチェック欄を入力して「Save Changes」をクリック。

これで全て終了。

複数表示も可能

デザインから少し脱線してしまいますが、商品の選択画面で複数選択すれば複数表示されます。

こんなのも作りました

タイトルのみ

タイトルだけ表示するリンクです。

下のリンクのように普通のテキストリンクになります。

[amazon_link asins=’B0001P0CK2′ template=’text_link’ store=’void0501-22′ marketplace=’JP’ link_id=’fa88cb72-a67a-11e8-a8f2-05178cb4b896′]

text_link
{{#Items}}{{#Item}}{{#aalb}}
<a href=”{{DetailPageURL}}” title=”{{Title}}” target=”_blank” rel=”nofollow”>
{{Title}}
</a>
{{/aalb}}{{/Item}}{{/Items}}

まとめ

知らない間に登場していた、アマゾン公式のアソシエイトプラグイン。

以前からあったアマゾンアソシエイトのリンクは、見た目があまり良くないこともあってプラグインのAmazonJSを使っていましたが、今回の公式のプラグインもカスタイマイズすれば色々なデザイン作成することが可能です。

Amazon公式のプラグインという事で安心感もありますし、ブログを解説したばかりの方は優先的に導入してみてはいかがでしょうか。

Amazon売れ筋ランキング

  • デジタル一眼
  • コンデジ
  • SDカード
  • 三脚
  • カメラバッグ
  1. ミラーレス一眼
  2. ミラーレス一眼
  3. デジタル一眼レフ
  4. ミラーレス一眼
  5. ミラーレス一眼
  6. デジタル一眼レフ
  7. デジタル一眼レフ
  8. デジタル一眼レフ
  9. ミラーレス一眼
  10. ミラーレス一眼
  11. ミラーレス一眼
  12. ミラーレス一眼
  13. デジタル一眼レフ
  14. ミラーレス一眼
  15. ミラーレス一眼
  16. デジタル一眼レフ
  17. ミラーレス一眼
  18. デジタル一眼レフ
  19. ミラーレス一眼
  20. ミラーレス一眼
  1. コンパクト
  2. コンパクト
  3. コンパクト
  4. コンパクト
  5. コンパクト
  6. コンパクト
  7. コンパクト
  8. コンパクト
  9. コンパクト
  10. コンパクト
  11. コンパクト
  12. コンパクト
  13. コンパクト
  14. コンパクト
  15. コンパクト
  16. コンパクト
  17. コンパクト
  18. コンパクト
  19. コンパクト
  20. コンパクト
  1. SDカード
  2. SDカード
  3. SDカード
  4. SDカード
  5. SDカード
  6. SDカード
  7. SDカード
  8. SDカード
  9. SDカード
  10. SDカード
  11. SDカード
  12. SDカード
  13. SDカード
  14. SDカード
  15. SDカード
  16. SDカード
  17. SDカード
  18. SDカード
  19. SDカード
  20. SDカード
  1. 三脚
  2. 三脚
  3. 三脚
  4. 三脚
  5. 三脚
  6. 三脚
  7. 卓上三脚・ミニ三脚
  8. 三脚
  9. 雲台・ヘッド
  10. 三脚
  11. 卓上三脚・ミニ三脚
  12. 三脚
  13. 一脚
  14. 三脚
  15. 卓上三脚・ミニ三脚
  16. 卓上三脚・ミニ三脚
  17. 三脚
  18. 脚パーツのみ
  19. 卓上三脚・ミニ三脚
  20. 卓上三脚・ミニ三脚
  1. カメラバック・ケース
  2. カメラバック・ケース
  3. カメラバック・ケース
  4. カメラバック・ケース
  5. カメラバック・ケース
  6. カメラバック・ケース
  7. カメラバック・ケース
  8. カメラバック・ケース
  9. カメラバック・ケース
  10. カメラバック・ケース
  11. カメラバック・ケース
  12. カメラバック・ケース
  13. カメラバック・ケース
  14. カメラバック・ケース
  15. カメラバック・ケース
  16. カメラバック・ケース
  17. カメラバック・ケース
  18. カメラバック・ケース
  19. カメラバック・ケース
  20. カメラバック・ケース
よかったらシェアしてね!
目次
閉じる