NIFの楽園

主にAndroidスマートフォンやアプリに関する紹介

【WordPress】【Plugin】Amazon商品リンクをカスタマイズできる「Amazon Associates Link Builder」(Ver.1.4.6)の使い方

2017/07/19

 「Amazon Associates Link Builder」は、WordPressのための公式かつ無料のAmazonアソシエイツプログラムプラグインです。

 このプラグインを使用すると、WordPressの編集画面から、Amazonの商品検索ができて、リアルタイムの価格や在庫状況を取得して、簡単にAmazon商品リンクを作成することができます。

 さらに、いくつかのレイアウトがデフォルトで用意されていて、それらをカスタマイズすることも可能です。よって、HTML+CSS+jQueryの知識があれば、自分好みのレイアウトを完成させることもできます。

・スライド表示の実際例です。(商品部分をクリックするとAmazonにリンクするので注意)

 

※デフォルトのテンプレート「ProductCarousel」をカスタマイズしています。
こちらを参照ください。

1.「Amazon Associates Link Builder」を使うための準備

1)Amazonアソシエイトアカウント(アソシエイトID)を作成します。
※作成方法については、既に取得していると思われるので割愛

2)「Amazon Product Advertising API」に登録します。

・https://affiliate.amazon.co.jp/gp/advertising/api/detail/main.htmlで「アカウント作成」をクリック

・サインイン画面

 登録手順については、こちらに従ってください。それぞれの項番をクリックすると詳細な説明が表示されます。
・https://affiliate.amazon.co.jp/help/topic/t125

※トラブル
「AWS」(Amazon Web Service)のアカウントを作成して、「アクセスキー」も取得できたのでOKと思っていましたが、プラグインが作動しませんでした。原因は「Amazon Product Advertising API」の登録をしていなかったからでした。
(「AWS」の登録を「Amazon Product Advertising API」の登録と勘違いしていました。原因判明までかなりの時間を要してしまいました。)

3)「Amazon Associates Link Builder」のインストールと有効化

2.「Amazon Associates Link Builder」の設定

1)アソシエイトIDを入力します。
2)アクセスキーIDとシークレットアクセスキーを入力します。
3)「Amazon Associates Link Builder」に同意して、保存します。

 これで、WordPressの編集画面にAmazonの商品検索欄が表示されます。

3.「Amazon Associates Link Builder」の使い方-初級編

1)デフォルトの商品リンクを作成してみます。

①WordPressの編集画面にAmazonの商品検索ボックスに検索ワードを入力して、
②「Search」をクリックします。

③テンプレートを選択します。
④商品を選択(クリック)します。
⑤「Add Shortcode」をクリックします。

これで、本文にショートコードが配置されます。

【デフォルトのテンプレートによる表示例】

・ProductCarousel

・ProductLink※商品選択は一つのみ

・ProductGrid

・PriceLink※商品選択は一つのみ

・ProductAd※商品選択は一つのみ

2)インラインテキストリンクの作成

 Ver.1.4以降より、テキストリンクを作成することができます。

 ■ガイド(英語):https://s3.amazonaws.com/aalb-public-resources/documents/AssociatesLinkBuilder-Guide-HowToCreateTextLinks.pdf

①WordPressの本文編集画面の「ビジュアル」モードで、本文中にあるリンクしたい商品名のところを選択(コピー)します。
※「テキスト」モードでは、うまくリンクができませんでした。
②Amazonの商品検索ボックスに貼り付けて、「Search」をクリックします。
③商品を選択します。※商品選択は一つのみ
④テンプレートは「ProductLink」を選択します。
⑤「Add Shortcode」をクリックします。

 これで、本文中にあるリンクしたい商品名のところに、商品名に代わってショートコードが表示されます。

4.「Amazon Associates Link Builder」の使い方-中級編(テンプレートをカスタマイズする)

 「Amazon Associates Link Builder」は、表示する内容とレイアウトを自分好みにカスタマイズすることができます。
 今回は、中級編ということで、ユーザーガイドに記載されているカスタマイズ例をそのまま記載します。

■ユーザーガイド
・https://s3.amazonaws.com/aalb-public-resources/documents/AssociatesLinkBuilder-Guide-HowToCreateCustomTemplates.pdf

・https://s3.amazonaws.com/aalb-public-resources/documents/AssociatesLinkBuilder-UserGuide.pdf

(カスタマイズ例1)広告からヘッダー「Products from Amazon」を削除します。

1)WordPressの編集画面で、左パネルの「Associates Link Builder」の「Templates」をクリックします。
2)『Select Template』で、デフォルトのテンプレートから「ProductCarousel」を選択して【Clone】をクリックします。
3)『Set a name for your template』で、新しい名前を入力します。(デフォルトでは「CopyOf-ProductCarousel」)
4)『Add HTML for your template』で、HTMLを変更します。
・4行目の『<h2 class="aalb-pc-ad-header">...』を削除します。
5)『Add CSS for your template』で、cssを変更します。
・ヘッダー部分(クラスセレクタ「.aalb-pc-ad-header」)51行目から57行目まで削除します。
6)【Save】をクリックして、変更したテンプレートを保存します。

※ヘッダーを日本語にした場合は、ここを修正します。

(カスタマイズ例2)在庫切れの商品を表示しないようにします。

1)2)3)(例1)と同様。
4)『Add HTML for your template』で、HTMLを追加します。
・9行目の{{#aalb}}属性の後に、{{#InStock}}属性を追加します。
・(追加前)46行目の{{/aalb}}の前に{{/InStock}}を追加します。
5)【Save】をクリックして、変更したテンプレートを保存します。

【広告に含めることができるアイテム属性のリスト】(ユーザーガイドより)

属性 説明
{{ASIN}} Amazon標準識別番号。アイテムを一意に識別するためにAmazonによって割り当てられた英数字記号です。
{{Title}} アイテムのタイトルまたは名前。
{{DetailPageURL}} AmazonにリンクするためのURL。 URLは、ショートコードで提供されるタグ情報に自動的にタグ付けされます。
{{LargeImageURL}} アイテムの大きな画像。
{{MediumImageURL}} アイテムの中間画像。
{{SmallImageURL}} アイテムの小さな画像。
{{By}} 書籍の作者、音楽アイテムのアーティスト、または他のタイプのアイテムのブランド名。
{{CurrentPrice}} アイテムの現在価格(Amazonで商品の詳細ページに表示されている価格)をフォーマットして表示します。
(例)『¥12,000』
※「Amazon Product Advertising API」によって価格が返されない場合は「Check on Amazon」、アイテムが在庫切れの場合は「Out of Stock」として返されることがあります。
{{CurrentPriceValue}} Amazonのアイテムの現在価格をそのままの形式(フォーマットしない)で表示します。
(例)『12000』
{{StrikePrice}} アイテムのメーカー推奨小売価格をフォーマットして表示します。
※アイテムの小売価格に割引がない場合、{{StrikePrice}}は空として返されます。
{{StrikePriceValue}} アイテムのメーカー推奨小売価格をフォーマットしないで表示します。
{{Saving}} メーカー推奨小売価格の引き下げを示します。
※アイテムの小売価格に割引がない場合、{{Saving}}は空として返されます。
{{SavingPercent}} メーカー推奨小売価格の減少率をパーセンテージで示します。
{{SavingValue}} メーカー推奨小売価格の減少率をフォーマットしないで示します。
{{Prime}} ASINがプライム特典を受ける資格があるかどうかを示します。
※プライム特典を受ける資格がある場合のみ返されます。
{{Merchant}} Amazonが販売している商品またはフルフィルメントby Amazonを利用している商品は「Amazon」として返されます。
※Amazonマーケットプレイスの販売者は何も返しません。
{{MinimumPrice}} Amazonで新しいアイテムを購入する場合の最低価格です。
{{MinimumPriceValue}} Amazonで新しいアイテムを購入する場合の(フォーマットしていない)最低価格です。
{{InStock}} ASINが在庫にあるかどうかを示します。
※この属性を使用すると、在庫切れの商品を広告から隠すことができます。

【Tips】テンプレートエンジン「mustache.php」
 「Amazon Associates Link Builder」プラグインは、テンプレートエンジンとして「mustache.php」を採用しています。
・基本的に『{{』と『}}』で囲った物が、テンプレートタグとして認識されます。
・dataの値がtrueである場合に、『{{#data}}』と『{{/data}}』に囲まれた部分が処理されます。
※よって、(例2)の場合、在庫がない商品は、{{#InStock}}…{{/InStock}}の部分を処理しないので、表示されないことになります。

5.終わりに

 デフォルトで用意されている他のテンプレートもカスタマイズ例を参考にして、何とかカスタマイズすることができると思います。
 さらに自分好みにカスタマイズするためには、HTMLやCSSおよびjQueryの知識が、必要と感じましたので、一から勉強して、その成果をまた報告したいと思います。

Amazon.co.jpアソシエイト(商品検索)

Amazon.co.jpアソシエイト(商品検索)

-wordpress
-, , , , , ,