「AmazonJS」をカスタマイズして楽天やYahooのボタンも使えるようにしてみた

WordPressのプラグイン「AmazonJS」、とても便利ですよね。

リンクを生成するために別のサイトを開いたりすることがないので（開いたとしてもAmazonぐらい）、これまでずっとAmazonJSを使ってAmazonのリンクを作成してきました。

しかしAmazonJSはAmazon以外の商品に対応しておらず、たとえば楽天やYahooショッピングのリンクを貼りたい場合は別途作成する必要があり、ちょっと面倒だったんですよね。

今回、AmazonJSの基本機能を使って、Amazonのリンクボタンに並べる形で、楽天やYahooショッピングのリンクボタンを「それなりの見栄えで」作成することが出来たので、その内容を書いてみようと思います。

※2018年9月追記
現在私は「AmazonJS」を使っていません。プラグインも停止しています。その理由は、現在使っているWordPressのテーマ「Cocoon」に、Amazonや楽天の商品リンクを作成する機能が搭載されたからです。
Cocoonの商品リンクはテーマに機能が搭載されていてシンプルなのと、今後もブラッシュアップされる可能性が高いということで、AmazonJSからCocoonの商品リンク機能に乗り換えることにしました。

今回のカスタマイズの概要
- カスタマイズしたファイル
- カスタマイズの結果（外観）
注意事項
amazonjs.jsのカスタマイズ
amazonjs.cssのカスタマイズ
AmazonJSの外観と動作を確認してみる
謝辞
おわりに

今回のカスタマイズの概要

カスタマイズしたファイル

AmazonJSのカスタマイズとして、具体的には以下の2つのファイルを編集しました。

wp-content/plugins/amazonjs/js の中の「amazonjs.js」
wp-content/plugins/amazonjs/css の中の「amazonjs.css」

私の場合、ファイルの操作と編集にFFFTPとTeraPadを使いました。

FFFTPを使ってサーバからダウンロードしたファイルを、ローカル環境でTeraPadを使って編集し、編集したファイルをFFFTPを使ってサーバにアップロードしました。

カスタマイズの結果（外観）

カスタマイズしたことで、以下のような外観になりました。（以下は画像です）

注意事項

最初にお伝えしておかないといけないのですが、今回のカスタマイズは完全なものではなく、よく使う外観（画像やボタン配置）と、よく使うサイト（Amazonや楽天）のみを変更しています。（以下の注意点）

完全にカスタマイズしようとすると私の力量では無理なので、今回は現実的なところでカスタマイズしました。

その1：テンプレートの選択

注意点の1つ目として、まずテンプレートの選択です。

以下のようなリンクを作成する画面で、動的なテンプレートとして「デフォルト」と「小」のどちらかを選択可能になっていますが、今回のカスタマイズにより、「小」を選択しても画像のサイズは変わらなくなっています。

しかし自分で言うのも何ですが、普通は「デフォルト」しか使わないので特に問題ないような気がします。

その2：7netのリンク

注意点の2つ目として、7netのリンクです。

リンクボタンは当初、Amazon、楽天、Yahooの3つで作っていたのですが、デザイン的に座りが悪いので7netを入れることにしました。

ただ、AmazonJSが生成する7netのリンクは、URLエンコードされたものになり、商品名（検索ワード）に2バイト文字が含まれると、正常に7netで検索してくれません。

あれこれ試してみたのですが、私の力量では改善できなかったので、現状では7netのボタンを押すと検索ワードなしでページを開くようにしています。解決方法をご存知の方がいましたら、お問い合わせフォームでもTwitterでも結構ですので是非教えてください。

その他の注意点

CSSやプログラムについてあまり詳しくないので、色々と変なところもあると思いますので、必ず元の「amazonjs.js」と「amazonjs.css」をバックアップしておいてください。

以上の注意点を踏まえて、私が行ったカスタマイズを紹介したいと思います。

amazonjs.jsのカスタマイズ

ではまず、amazonjs.jsのカスタマイズ内容を説明します。

以下のような記述がある場所を探します。

var linkOpenTag = '<a href="${DetailPageURL}" class="amazonjs_link" data-role="amazonjs_product" data-asin="${ASIN}" title="${Title}" target="_blank">';

この部分に、以下の黄色で示す部分を追加します。白抜きの部分には自分のIDを入れます。

var linkOpenTag = '<a href="${DetailPageURL}" class="amazonjs_link" data-role="amazonjs_product" data-asin="${ASIN}" title="${Title}" target="_blank">';

var linkOpenTag1 = '<div class="amazon-button"><a href="${DetailPageURL}" class="amazonjs_link" data-role="amazonjs_product" data-asin="${ASIN}" title="${Title}" target="_blank" rel="nofollow">';
var linkOpenTag2 = '<div class="rakuten-button"><a href="//hb.afl.rakuten.co.jp/hgc/楽天IDを入れる/?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F${Title}%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0&scid=af_ich_link_urltxt&m=http://m.rakuten.co.jp/" target="_blank" >';
var linkOpenTag3 = '<div class="yahoo-button"><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=sidを入れる&pid=pidを入れる&vc_url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D${Title}" target="_blank" >';
var linkOpenTag4 = '<div class="sevennet-button"><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=sidを入れる&pid=pidを入れる&vc_url=http%3A%2F%2F7net.omni7.jp%2Fsearch%2F%3Fkeyword%3D%26searchKeywordFlg%3D1" target="_blank" >';

次に、以下のような記述がある場所を探します。

var linkTemplate = linkOpenTag + '${Title}</a>';

この部分に、以下の黄色で示す部分を追加します。白抜きの部分には自分のIDを入れます。

var linkTemplate = linkOpenTag + '${Title}</a>';

var amazonlink = linkOpenTag1 + 'Amazon</a></div>';
var rakutenlink = linkOpenTag2 + '楽天市場</a></div>';
var yahoolink = linkOpenTag3 + 'Yahooショッピング<img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=sidを入れる&pid=pidを入れる" height="1" width="1" border="0"></a></div>';
var sevennetlink = linkOpenTag4 + '7net<img src="//ad.jp.ap.valuecommerce.com/servlet/atq/gifbanner?sid=sidを入れる&pid=pidを入れる" height="1" width="1" border="0"></a></div>';

次に、以下のような記述がある場所を探します。

var defaultTemplates = {
Small:[
'<div class="amazonjs_item">',
imageTemplate,
'{{if _ShowDefaultImage}}',smallImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
'<h4>',linkTemplate,'</h4>',
'<ul>',
'{{if Creator}}<li>${Creator}</li>{{/if}}',
'{{if Manufacturer}}<li>${Manufacturer}</li>{{/if}}',
priceLiTemplate,
'{{if PublicationDate}}<li><b>' + r.PublicationDate + '</b>${PublicationDate}</li>{{/if}}',
'{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}',
'</ul>',
'</div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div>'
],
Music:[
'<div class="amazonjs_item amazonjs_music">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
'<h4>',linkTemplate,'</h4>',
'<ul>',
'{{if Artist}}<li>${Artist}</li>{{/if}}',
'{{if Creator}}<li>${Creator}</li>{{/if}}',
'{{if Label}}<li>${Label}</li>{{/if}}',
priceLiTemplate,
'{{if ReleaseDate}}<li><b>' + r.ReleaseDate + '</b>${ReleaseDate}</li>{{/if}}',
'{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}',
'{{if RunningTime}}<li><b>' + r.RunningTime + '</b>' + r.RunningTimeValue + '</li>{{/if}}',
'</ul>',
'</div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div>'
],
DVD:[
'<div class="amazonjs_item amazonjs_dvd">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
'<h4>',linkTemplate,'</h4>',
'<ul>',
'{{if Director}}<li>${Director}</li>{{/if}}',
'{{if Actor}}<li>${Actor}</li>{{/if}}',
'{{if Label}}<li>${Label}</li>{{/if}}',
priceLiTemplate,
'{{if ReleaseDate}}<li><b>' + r.ReleaseDate + '</b>${ReleaseDate}</li>{{/if}}',
'{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}',
'{{if RunningTime}}<li><b>' + r.RunningTime + '</b>' + r.RunningTimeValue + '</li>{{/if}}',
'</ul>',
'</div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div>'
],
Book:[
'<div class="amazonjs_item amazonjs_book">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
'<h4>',linkTemplate,'</h4>',
'<ul>',
'{{if Author}}<li><b>' + r.BookAuthor + '</b>${Author}</li>{{/if}}',
priceLiTemplate,
'<li><b>' + r.BookPublicationDate + '</b>${PublicationDate}</li>',
'{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}',
'<li><b>${Binding}</b>' + r.NumberOfPagesValue + '</li>',
'<li><b>ISBN-10</b>${ISBN}</li>',
'<li><b>ISBN-13</b>${EAN}</li>',
'<li><b>' + r.BookPublisher + '</b>${Publisher}</li>',
'</ul>',
'</div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div>'
],
eBooks:[
'<div class="amazonjs_item amazonjs_book">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
'<h4>',linkTemplate,'</h4>',
'<ul>',
'{{if Author}}<li><b>' + r.BookAuthor + '</b>${Author}</li>{{/if}}',
priceLiTemplate,
'<li><b>' + r.BookPublicationDate + '</b>${PublicationDate}</li>',
'{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}',
'<li><b>${Binding}</b>' + r.NumberOfPagesValue + '</li>',
'<li><b>' + r.BookPublisher + '</b>${Publisher}</li>',
'</ul>',
'</div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div>'
]
};

この部分を、以下の黄色の内容に差し替えます。

var defaultTemplates = {
Small:[
'<div class="amazonjs_item"><div class="amazonjs_box">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="margin-left:170px;">',
'<div class="amazonjs-name"><h4>',linkTemplate,'</h4></div>',
'<ul>',
'{{if Creator}}<li>${Creator}</li>{{/if}}',
'</ul>',
'<div class="amazonjs-link1">',amazonlink,rakutenlink,yahoolink,sevennetlink,'</div></div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div></div>'
],
 Music:[
'<div class="amazonjs_item amazonjs_music"><div class="amazonjs_box">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="margin-left:170px;">',
'<div class="amazonjs-name"><h4>',linkTemplate,'</h4></div>',
'<ul>',
'{{if Artist}}<li>${Artist}</li>{{/if}}',
'</ul>',
'<div class="amazonjs-link1">',amazonlink,rakutenlink,yahoolink,sevennetlink,'</div></div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div></div>'
],
DVD:[
'<div class="amazonjs_item amazonjs_dvd"><div class="amazonjs_box">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="margin-left:170px;">',
'<div class="amazonjs-name"><h4>',linkTemplate,'</h4></div>',
'<ul>',
'{{if Director}}<li>${Director}</li>{{/if}}',
'{{if Actor}}<li>${Actor}</li>{{/if}}',
'</ul>',
'<div class="amazonjs-link1">',amazonlink,rakutenlink,yahoolink,sevennetlink,'</div></div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div></div>'
],
Book:[
'<div class="amazonjs_item amazonjs_book"><div class="amazonjs_box">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="margin-left:170px;">',
'<div class="amazonjs-name"><h4>',linkTemplate,'</h4></div>',
'<ul>',
'{{if Author}}<li><b>' + r.BookAuthor + '</b>${Author}</li>{{/if}}',
'</ul>',
'<div class="amazonjs-link1">',amazonlink,rakutenlink,yahoolink,sevennetlink,'</div></div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div></div>'
],
eBooks:[
'<div class="amazonjs_item amazonjs_book"><div class="amazonjs_box">',
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
'<div class="amazonjs_info" style="margin-left:170px;">',
'<div class="amazonjs-name"><h4>',linkTemplate,'</h4></div>',
'<ul>',
'{{if Author}}<li><b>' + r.BookAuthor + '</b>${Author}</li>{{/if}}',
'</ul>',
'<div class="amazonjs-link1">',amazonlink,rakutenlink,yahoolink,sevennetlink,'</div></div>',
reviewLinkTemplate,
'<div class="amazonjs_footer"></div>',
'</div></div>'
]
};

この長い部分は、商品のジャンルが、Small, Music, DVD, Book, eBooksのいずれかに当てはまる場合に、実際にhtmlタグを生成する部分です。（当てはまらない場合はSmallになるようです）

オリジナルのコードの<ul>～</ul>の部分は、各行が表示項目に対応しています。私の場合は、価格や会社の情報はアフィリエイトリンクには不要だと思ったので削除して必要最小限の表示にしています。

上のコードでは、amazonjs_infoのmargin-leftを170pxに固定していますが、この部分はオリジナルのコードだと動的に生成するようになっています。しかし動的にmargin-leftが生成されると意図せずレイアウトが崩れるため、このように「固定」としています。（この辺りも、もう少し良い方法があるかもしれません。。。）

また、スマホなど横幅の小さい端末で商品画像の下にボタンを表示させるために、この後のcssファイルに掲載するようにamazonjs-nameというセレクタを新設しています。

amazonjs.cssのカスタマイズ

続いて、amazonjs.cssのカスタマイズ内容を説明します。

amazonjs.cssの変更箇所は複雑で多いため、全く整理されていない状態でお恥ずかしいですが丸々掲載することにします。

.amazonjs_item {
font-size: 14px;
margin: 30px 0;
padding: 25px 10px 10px 10px;
border: 1px solid #ddd;
position: relative;
color: #333;
}

.amazonjs_item a {
color: #444;
text-decoration: none;
}

.amazonjs_item a:hover {
opacity: .7;
}

.amazonjs_item * {
margin: 0;
padding: 0;
border: 0;
}

.amazonjs_item img {
margin: 0;
}

.amazonjs_item .amazonjs_indicator {
margin: 0 10px;
clear: both;
}

.amazonjs_item .amazonjs_indicator .amazonjs_indicator_img {
float: left;
display: block;
width: 32px;
height: 32px;
background: transparent url(../images/ajax-loader.gif) no-repeat center;
}

.amazonjs_item .amazonjs_indicator .amazonjs_indicator_title {
display: block;
line-height: 32px;
margin-left: 42px;
}

.amazonjs_item .amazonjs_indicator .amazonjs_indicator_footer {
clear: both;
}

.amazonjs_item .amazonjs_image {
float: left;
margin: 0 10px 10px 0;
width: 170px;
text-align: center;
}

.amazonjs_item .amazonjs_info {
display: block;
}

.amazonjs_item .amazonjs_info h4 {
margin: 0 0 5px;
padding: 0;
font-size: 1.2em;
font-weight: bold;
clear: none;
border: none;
}

.amazonjs_item .amazonjs_info ul {
list-style: none;
margin: 0 0 0.5em;
padding: 0;
}

.amazonjs_item .amazonjs_info ul li {
list-style: none;
line-height: 1.5em;
font-size: 1em;
margin: 0;
padding: 0;
}

.amazonjs_item .amazonjs_info ul li b {
margin-right: .5em;
color: #555;
font-weight: normal;
}

.amazonjs_item .amazonjs_info .amazonjs_price {
color: #900;
}

.amazonjs_item .amazonjs_info .amazonjs_price span {
color: #666;
margin-left: .5em;
}

.amazonjs_item .amazonjs_info .amazonjs_listprice {
text-decoration: line-through;
}

.amazonjs_item .amazonjs_review {
padding: 0;
font-size: 0.7em;
position: absolute;
right: 34px;
bottom: 4px;
}

#preview .amazonjs_item .amazonjs_review {
display: none;
}

.amazonjs_item .amazonjs_footer {
clear: both;
}

.amazonjs_book .amazonjs_info ul,
.amazonjs_music .amazonjs_info ul {
margin-top: 0.5em;
}

.amazonjs_book .amazonjs_info ul li,
.amazonjs_music .amazonjs_info ul li {
line-height: 1.6em;
}

.amazonjs-name {
margin-bottom: 20px;
}

.amazonjs-link1 div {
display: inline-block;
height: 35px;
line-height: 35px;
border-radius: 4px;
width: 45%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 5px;
text-align: center;
overflow: hidden;
box-sizing: border-box;
}

.amazon-button a, .rakuten-button a, .yahoo-button a, .sevennet-button a {
display: block;
text-decoration: none;
color: #ffffff;
}

.amazon-button a:hover, .rakuten-button a:hover, .yahoo-button a:hover, .sevennet-button a:hover { color: #ffffff;}

.amazon-button { background: #ffb36b;}
.rakuten-button { background: #ea7373;}
.yahoo-button { background: #73c1ea;}
.sevennet-button { background: #66cdaa;}

@media (max-width: 720px) {

.amazonjs_info {
margin-left: 0px !important;
}

.amazonjs-name {
margin-left: 176px !important;
padding-left: 0px !important;
}

.amazonjs-link1 {
clear: both;
}

.amazonjs-link1 div {
width: 48%;
margin-left: 1%;
margin-right: 1%;
display: inline-block;
}
}

@media (max-width: 480px) {

.amazonjs_item .amazonjs_info h4 a {
font-size: 0.9em;
}
.amazonjs_item .amazonjs_info ul li {
font-size: 0.9em;
}
}

amazonjs.cssのカスタマイズは、既存のamazonjs.cssに上記内容をコピーして保存すれば終了です。

AmazonJSの外観と動作を確認してみる

カスタマイズしたamazonjs.jsとamazonjs.cssをサーバにアップロードできたら、外観と動作を確認してみます。

PCやスマートフォンで表示させて、上の「カスタマイズの結果（外観）」に掲載した画像のようになったでしょうか？

外観を確認しつつ各ボタンの動作を確認して、問題がなければ終了です。

謝辞

今回のカスタマイズは、以下のブログとサービスを参考にしました。

参考ブログ Amazon JSをカスタマイズしてカエレバのように楽天とヤフーショッピングのアフィリエイトリンクを表示させたり、デザインをカスタマイズをしてみた | hazilog（現在リンク切れ）

参考サービス商品紹介ブログパーツカエレバ

amazonjs.jsのカスタマイズは、主にhazilogさんを参考にしました。ありがとうございます。hazilogさんのブログがなければ、初心者の私がカスタマイズするなんてことはなかったと思います。

アフィリエイトIDの調べ方と、外観の方向性やamazonjs.cssの作成内容については、カエレバさんを参考にしました。ありがとうございます。

おわりに

普段、私はネット通販のほとんどをAmazonで済ませてるため、楽天やYahooショッピングの有用性がいまひとつわかりませんでした。しかし実際にこのカスタマイズをした後で、楽天やYahooショッピングから商品が購入されたようで、カスタマイズした甲斐がありました。

AmazonJSをカスタマイズの参考になれば幸いです。

ではまた！