コピペでOK!Amazon Link Builderを導入!AmazonJSっぽいデザインを作成した。

自分のサイトのAMPページを確認していると、AmazonJSのプラグインがAMPに対応しておらず、ショートコードが丸出しで公開されている事に気づきました。

ショートコードが出ているのは問題ではないのですが、リンクが作成されていないので、AMPページではAmazonアソシエイトの収益が見込めません。

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

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

Amazonのワードプレス用公式プラグインで、AMPにも対応しているという事。

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

Amazon Link Builderの導入

ワードプレスを使い慣れているなら簡単です。

プラグインページへ移動して、「Amazon Link Builder」で検索するとすぐに出てきます。

設定

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

移動したら下の画像が出てくるので、国(基本はJP)、アソシエイトID、アクセスキー、シークレットキーを入力します。
入力が終ったら、下にチェックを入れて「Save Changes」をクリックして登録。

これで初期設定は完了。

使い方

下の画像の検索窓から商品を検索します。
初期設定がきちんと完了していないと、エラーが出ます。

リンクを表示したい商品を選ぶと、下のリストに追加されます。
複数選択可能です。選び終わったら「Add Shortcode」からショートコードが生成されます。

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

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

リンクビルダーで表示したい商品が見つからない時は、一度適当な商品のショートコードを作成し、アマゾンのURLから商品のタグをコピーしてショートコードを編集しましょう。

デザインをカスタマイズする

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

といっても私もCSSとかほとんど触らない(触れない)ので、ほぼこちらのサイトからコピペです。

まずリンクビルダーのメニューから「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、下のリンクが今回導入したリンクビルダーです。

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

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

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

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

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

これで全て終了。

複数表示も可能

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

こんなのも作りました

タイトルのみ

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

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

クニペックス KNIPEX 8605-250 プライヤーレンチ
text_link
{{#Items}}{{#Item}}{{#aalb}}
<a href=”{{DetailPageURL}}” title=”{{Title}}” target=”_blank” rel=”nofollow”>
{{Title}}
</a>
{{/aalb}}{{/Item}}{{/Items}}

まとめ

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

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

まだ少しバグがあるようですが、アマゾン公式のプラグインなので、これからのアップデートにも期待!!

関連コンテンツ