Amazon JSに楽天のリンクを表示させるカスタマイズをしてブックマークレットを改良したら使いやすくなった

Amazonjs customizeAmazonと楽天のアフィリエイトリンクを同時に出力してくれる便利ツール「カエレバ」を使っていましたが、商品の価格が表示されていた方がどう考えても親切で役立つブログなのでアフィリエイトリンクに価格を表示してくれるWordPressプラグインのAmazon JSを導入しました。

ただ、Amazon JSは名前のとおりAmazonのアフィリエイトリンクを生成するプラグインなので楽天のリンクが表示されないんですが、カスタマイズしたら表示する事ができました。
ついでに、Lonely Mobilerさんの作ったブックマークレットを改良したらさらに使いやすくなったので合わせて紹介しておきます。

Amazon JS
Amazon JS
Developer: makoto_kw
Price: Free
公式サイトAmazonJS (WordPress Plugin)

Amazon JSに楽天のアフィリエイトリンクを表示する方法

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

amazonjs.jsの58行目に

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

という記述があると思います。その下に

var amazonlink = linkOpenTag1 + 'Amazon</a></div>';
var rakutenlink = linkOpenTag2 + '楽天市場</a></div>';

を追記します。
amazonlink rakutenlink Amazon 楽天市場などの変数はお好みの名称に変更しても大丈夫です。

そして、17行目の

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">';
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">';

を追記します。この追記は「カエレバ」を参考にさせてもらいました。

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

100,101行目と120,121行目と140,141行目、161,162行目、180,181行目の

'</div>',
reviewLinkTemplate,

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

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

と追記します。

これでスクリプト周りのカスタマイズは終わり。

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

amazonjs/css/amazonjs.css

まずはリンクボタン周りのCSS

.kaerebalink-link1 { width:100%; }
.amazonjs-link1 div {
  float: left;
  width: 49.5%;
  margin-bottom: 1%;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}
.amazonjs-link1 div:nth-child(even) { margin-left: 1%; }
.amazonjs-link1 div a { display:block; padding:3px 0; text-decoration:none; }
.amazon-button a, .rakuten-button a {
  display:block;
  text-decoration:none;
}
.amazon-button a { color:#ffffff; background:#ff9900; border-radius: 3px;border: 1px solid #ff9900;}
.amazon-button a:hover { color:#ff9900; background:#ffffff; border:1px solid #ff9900;}
.amazon-button a:before { content: "\f270"; font-family: "fontawesome"; padding:10px 4px;font-size:14px;}
.rakuten-button a { color:#ffffff; background:#bf0000; border-radius: 3px; border: 1px solid #bf0000;}
.rakuten-button a:hover { color:#bf0000; background:#ffffff; border: 1px solid #bf0000;}
.rakuten-button a:before { content: "\f25d"; font-family: "fontawesome"; padding:10px 4px;font-size:14px;}

上記のコードを追記。

レスポンシブに対応させるには114行目以降の

@media (max-width: 480px) {
  .amazonjs_item img {
    width: 60px;
    max-width: 60px;
  }
  .amazonjs_item .amazonjs_info {
    margin-left: 70px !important;
  }
  .amazonjs_item .amazonjs_info h4 a {
    font-size: 0.9em;
  }
  .amazonjs_item .amazonjs_info ul li {
    font-size: 0.9em;
  }
}

この部分を

@media (max-width: 480px) {
.amazonjs_item .amazonjs_image {
    float: none;
width: 100%;
    margin: 0;
    text-align: center;
  }
  .amazonjs_item .amazonjs_info {
    margin: 0 !important;
  }
  .amazonjs_item .amazonjs_info h4 a {
    font-size: 0.9em;
  }
  .amazonjs_item .amazonjs_info ul li {
    font-size: 0.9em;
  }
  .amazonjs-link1 div {
  float: none;
  width: 100%;
  }
  .amazonjs-link1 div:nth-child(even) { margin-left: 0; }
}

に書き換えましょう。

これでAmazon JSに楽天リンクを追加できました。

デザインや変数はお好きなようにどうぞ。

ブックマークレットを改良する

冒頭で書いたようにLonely MobilerさんのAmazonjs のリンクを生成するブックマークレットを作成したで紹介されているブックマークレットを使わせてもらおうとしたのですが、Macからだと生成されるショートコードがコピーできなかったので、コピーできるようにしました。

ブックマークレットのコード自体はオリジナルのままですが、Amazonのページ上でブックマークレットを実行すると出て来るダイアログをコピーできるように改良しました。

javascript:(function(){void prompt('コピー','%5bamazonjs asin="'+document.getElementById('ASIN').value+'" locale="JP" title="'+(document.getElementById('productTitle')!=null?document.getElementById('productTitle').innerText:document.getElementById('btAsinTitle').innerText)+'" imgsize="medium"%5d');})();

Get Amazonjs Shortcode

ブックマークレットを利用するには、上記のスクリプトかリンクをブックマークに登録してAmazonの商品ページにてブックマークレットを実行してください。

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

カエレバのようにAmazonと楽天のリンクボタンが自動的に生成されます。

Amazonjs customize01
ブックマークレットの方もダイアログが表示された時点でショートコードを選択した状態になっているのでcommand+Cでコピーして貼り付けるだけです。

問題点

ブックマークレットがKindle本ページでは実行されず、他にもそういったブックマークレットが使えなくなる商品ページがあるかもしれない。

そういう場合はWordPressの記事編集画面からAmazon JSを使用すれば解決するので、このままAmazon JSを使って予定。

まとめ

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

僕と同じように、価格表示をしつつ楽天のリンクを表示したい。という方の参考になりますように。

ちなみにブログはMarsEditで書いています。

MarsEdit - for WordPress, Tumblr, Blogger, etc.
MarsEdit - for WordPress, Tumblr, Blogger, etc.
Developer: デベロッパ:Red Sweater Software
Price: ¥4,800

7 件のコメント

  • これはすごい!
    カエレバが好きではなかったので、Amazonjsにこんなカスタマイズができるとは助かります。
    楽天のリンクをずっとつけておきたかったのでうれしい限りです。

  • 追記です。これまでのAmazonjsのような表記に楽天のサーチ結果をだす方法はありますでしょうか?
    Amazonが商品ページではなく、検索結果だったので、これまでのようにamazonは単独の商品ページにとばしたいのですがどのようにすればよいでしょうか?

    • コメントありがとうございます!
      お役に立てたようでなによりです!

      >これまでのAmazonjsのような表記に楽天のサーチ結果をだす方法はありますでしょうか?
      僕の解釈が合っているかわかりませんが、AmazonJSはAmazonの商品情報しか取得できないので楽天のサーチ結果を出すのは不可能だと思います。
      「Amazonから商品情報を取得し、その取得したAmazonの商品名をそのまま楽天の検索URLにはめ込んだのをリンクボタンとしてつけている」が今回のカスタマイズなので。
      楽天の商品情報を取得できるようなプラグインが開発されるのを祈りましょう。

      >Amazonが商品ページではなく、検索結果だったので、これまでのようにamazonは単独の商品ページにとばしたいのですがどのようにすればよいでしょうか?
      下のAmazonボタンを商品ページにとばしたいということであれば

      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">';
      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">';

      の部分を

      var linkOpenTag1 = '<div class="amazon-button"><a href=""${DetailPageURL}" class="amazonjs_link" data-role="amazonjs_product" data-asin="${ASIN}" title="${Title}" target="_blank">';
      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">';

      に変更すれば可能だと思います。

  • 今実装しているのですが、アマゾンと楽天のボタンがずれてしまう現象があります。
    もともとamazonjsにある枠が表示されている状態で、枠の下のラインにちょうど半分ほどボタンがかかってしまっています。
    モバイルで表示させた場合はうまくいっているようなのですが、どこを修正すればよいのでしょうか?

  • 原因判明しました!
    ”,
    reviewLinkTemplate,

    ”,
    を削除していなかったためレイアウトが崩れていたようでした。
    クリック率などの向上が期待されそうです。

  • こんにちは。私のサイトで実装して6日間経過しましたが、ひとまず現時点の効果のご報告です。
    変更前と変更後でAmazonのクリック率は変わらず(ここはむしろ楽天に飛ぶ選択肢が増えるので落ちるのではないかと心配していました)、楽天のクリック数が5倍程度になりました。
    結果的にこれまで機会損失だった楽天の売上もそれに応じてあがっています。
    ありがとうございました!

  • コメントを残す

    ABOUTこの記事をかいた人

    hazime(はじめ)です。 Android、Nexusデバイスを主に使用しています。 Android、Mac、iPhone、HipHop、ブログ運営がメインの雑記ブログです。