Amazon JSをカスタマイズしてカエレバのように楽天とヤフーショッピングのアフィリエイトリンクを表示させたり、デザインをカスタマイズをしてみた

Amazon JSをカスタマイズしてカエレバのように楽天とヤフーショッピングのアフィリエイトリンクを表示させたり、デザインをカスタマイズをしてみた

2017.11.12

Amazonjs customize
[aside type=”normal”]2018年6月17日追記
Amazon JS(カスタマイズ)を卒業して完全上位互換のWPアソシエイトポストR2を使うようになりました。
[post_link id=”3351″][/box]Amazonと楽天のアフィリエイトリンクを同時に出力してくれる便利ツール「カエレバ」を使っていましたが、商品の価格が表示されていた方がどう考えても親切で役立つブログなのでアフィリエイトリンクに価格を表示してくれるWordPressプラグインのAmazon JSを導入しました。

ただ、Amazon JSは名前のとおりAmazonのアフィリエイトリンクを生成するプラグインなので楽天やヤフーショッピングのリンクが表示されないデメリットがありましたが、カスタマイズすることでカエレバのようなアフィリエイトリンクを表示する事ができました。つまり最高。

あとコメントの方で

  • ヤフーショッピングのリンクを設置できますか?
  • ボタンクリックで商品ページが表示されるようにできますか?
  • 楽天リンクを「もしもアフィリエイトのID」にできますか?

との質問があったので、そのパターンのコードを追記しました。

[box class=”box2″]

を追記しました。[/box]

カスタマイズしたらこうなります


カエレバのようにAmazonと楽天とヤフーショッピングのリンクボタンが自動的に生成され、なおかつ右下のAmazonアイコンが消えるようになります。

僕はカエレバと同じようにボタンクリックでAmazonと楽天とヤフーショッピングのサーチ結果ページが表示されるようにカスタマイズを行いました。

Amazon JSにカエレバのように楽天とヤフーショッピングのアフィリエイトリンクを表示する方法

ボタンクリックでAmazonと楽天とヤフーショッピングのサーチ結果ページが表示されるように

amazonjs/js/amazonjs.jsをカスタマイズしていきます。

  1. amazonjs.jsの58行目に
  2. 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=自分のID&pid=自分のID" height="1" width="1" border="0"></a></div>';
    

    を追記します。

    • amazonlink
    • rakutenlink
    • Amazon
    • 楽天市場
    • yahoolink
    • ヤフーショッピング

    などの変数はお好みの名称に変更しても大丈夫です。

  3. そして、17行目の
  4. 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="https://www.amazon.co.jp/gp/search?keywords=${Title}&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=自分のID" target="_blank" rel="nofollow">';
    var linkOpenTag2 = '<div class="rakuten-button"><a href="https://hb.afl.rakuten.co.jp/hgc/自分のID/?pc=http://search.rakuten.co.jp/search/mall/${Title}/-/f.1-p.1-s.1-sf.0-st.A-v.2?x=0&scid=af_ich_link_urltxt&m=http://m.rakuten.co.jp/" target="_blank" rel="nofollow">';
    var linkOpenTag3 = '<div class="yahoo-button"><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=自分のID&pid=自分のID&vc_url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D${Title}" target="_blank" rel="nofollow" >';

    を追記します。

    [box class=”red_box” title=”注意”]自分のIDと記述しているところに、ご自身のAmazonアソシエイトのトラッキングIDと楽天アフィリエイトのアフィリエイトIDを記述しましょう。しておかないと機会損失しまくって不幸になります。[/box]

  5. 100,101行目と120,121行目と140,141行目、161,162行目、180,181行目の
'</div>',
reviewLinkTemplate,

この記述を探してください。そして、この記述の100行目と120行目と140行目、161行目、180行目の</div>

'<div class="amazonjs-link1">',amazonlink,rakutenlink,yahoolink,'</div></div>',
reviewLinkTemplate,

と追記します。

これでAmazon JSにカエレバのようにボタンクリックでAmazonと楽天のサーチ結果を表示するリンクボタンを追加できました。

ボタンクリックで商品ページが表示されるように

続いてボタンクリックで商品ページが表示されるようにするカスタマイズです。

基本的には前述の手順1〜3と同じですが、手順2の追記を

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="https://hb.afl.rakuten.co.jp/hgc/自分のID/?pc=http://search.rakuten.co.jp/search/mall/${Title}/-/f.1-p.1-s.1-sf.0-st.A-v.2?x=0&scid=af_ich_link_urltxt&m=http://m.rakuten.co.jp/" target="_blank" rel="nofollow">';
var linkOpenTag3 = '<div class="yahoo-button"><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=自分のID&pid=自分のID&vc_url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D${Title}" target="_blank" rel="nofollow" >';

と追記すればオッケーです。

ボタンクリックで商品ページを表示することができるのはAmazonボタンのみです。楽天ボタンは前述のサーチ結果しか出力できません。

デザインのカスタマイズ

続いてCSSをカスタマイズして見た目を調整します。

リンクボタン周りのデザインを変更

まずは追加したリンクボタン周りのカスタマイズです。

amazonjs/css/amazonjs.css

変更した部分だけと思ったんですが、試行錯誤しすぎて訳がわからなくなったのでとりあえず全部載せておきます。


.amazonjs_item {
  font-size: 14px;
  margin: 1.5em 0;
  padding: 15px 10px;
  border: double 4px #dbdbdb;
  position: relative;
  /*background: white url(../images/amazonjs.png) no-repeat right bottom;*/
  color: #333;
}
.amazonjs_box {
    display: table;
    width: 100%;
    vertical-align: middle;
}
.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 {
  display: table-cell;
  margin-right: 10px;
  vertical-align: middle;
}
.amazonjs_item .amazonjs_info {
  display: block;
  margin-left: 15px !important;
}
.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: silver;
  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-link1 div {
  display: inline-block;
  height: 37px;
  margin-bottom: 2%;
  padding: 0 9px;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.28);
  font-size: .95em;
  font-weight: bold;
  vertical-align: middle;
  line-height: 37px;
  transition: .3s ease-in-out;
  width: 49.5%;
  text-align: center;
}
.amazonjs-link1 div:hover {
box-shadow: 0 12px 15px -5px rgba(0,0,0,.25);
}
.amazon-button a, .rakuten-button a, .yahoo-button a {
  display:block;
  text-decoration:none;
}
.amazon-button a:before{ content: "f270"; font-family: "fontawesome"; padding:10px 4px;font-size:14px;}
.rakuten-button a:before{ content: "f25d"; font-family: "fontawesome"; padding:10px 4px;font-size:14px;}
.yahoo-button a:before { content: "f19e"; font-family: "fontawesome"; padding:10px 4px;font-size:14px;}
.amazon-button a:hover, .rakuten-button a:hover, .yahoo-button a:hover { color:#ffffff;}
.amazon-button { background:#ffb36b; }
.amazon-button a { color:#ffffff; }
.rakuten-button { background:#ea7373; margin-left:1%;}
.rakuten-button a { color:#ffffff; }
.yahoo-button { background:#73c1ea; }
.yahoo-button a { color:#ffffff;}
.yahoo-button img{display:none !important;}


@media (max-width: 480px) {
.amazonjs_item .amazonjs_image {
    width: 100px !important;
    margin: 0;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .amazonjs-link1 div {
    height: 35px;
    padding: 0 12px;
    line-height: 35px;
    width: 100%;
}
.amazon-button {
    margin-bottom: 3%;
}
  .amazonjs_item img {
  margin: 0;
  width: 100px;
}
  .amazonjs_item .amazonjs_info h4 a {
    font-size: 0.9em;
  }
  .amazonjs_item .amazonjs_info ul li {
    font-size: 0.9em;
  }
  .amazonjs-link1 div:nth-child(even) { margin-left: 0; }
}

適宜不必要な部分などは消して書き換えましょう。

僕と同じデザインにするには上記のcssに加えて、amazonjs/js/amazonjs.jsに追記も必要です。
[aside type=”normal”]補足
以下のコードは価格表示以外は表示しない設定になっていますので、ランキング等の情報を載せたい場合は必要なコードのみ追記してください。[/box]
amazonjs.jsの「var defaultTemplates」という記述を探します。

               var defaultTemplates = {
                    Small:[
                        '<div class="amazonjs_item"><div class="amazonjs_box">',
                        imageTemplate,
                        '{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
                        '<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
                        '<h4>',linkTemplate,'</h4>',
                        '<ul>',
                        priceLiTemplate,
                        '</ul>',
                        '<div class="amazonjs-link1">',amazonlink,rakutenlink,'</div></div>',
                        reviewLinkTemplate,
                        '<div class="amazonjs_footer"></div>',
                        '</div></div>'
                    ],

このように、<div class="amazonjs_box">と最終行に</div>を追記すると、とりあえず僕と同じデザインになります。
ここには、MusicやDVDなどの項目もあると思いますが、同じようにそれぞれ追記してあげると良いと思います。

右下のAmazonアイコンを非表示にする

amazonjs/css/amazonjs.css
8行目のbackground

.amazonjs_item {
  font-size: 14px;
  margin: .5em 0 1em 0;
  padding: 25px 10px 25px 10px;
  border: 1px solid #ddd;
  position: relative;
  display: block;
  background: white url(../images/amazonjs.png) no-repeat right bottom;
  color: #333;
}
.amazonjs_item {
  font-size: 14px;
  margin: 0em 0 1em 0;
  padding: 25px 10px 25px 10px;
  border: 1px solid #ddd;
  position: relative;
  display: block;
  /*background: white url(../images/amazonjs.png) no-repeat right bottom;*/
  color: #333;
}

このようにコメントアウトすることでAmazonアイコンを非表示することができます。

まとめ

これで価格表示をしつつ楽天へのリンクも表示される僕の考えた最高のアフィリエイトリンクツール環境が完成しました。

僕と同じように、価格表示をしつつ楽天やヤフーショッピングのリンクを表示したい。という方の参考になりますように。

AmazonJS (WordPress Plugin)

[post_link id=”3351″]

カテゴリー

774

関連記事