Amazon JSをカスタマイズしてカエレバのような楽天のアフィリエイトリンクを表示させたり、デザインをカスタマイズをしてブックマークレットを改良したら使いやすくなった

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

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

ついでに、Lonely Mobilerさんの作ったブックマークレットを改良したらさらに使いやすくなったので合わせて紹介しておきます。

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

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

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

あとコメントの方で

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

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

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

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

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

    を追記します。

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

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

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

「もしもアフィリエイトのID」を使って楽天アフィリエイトリンクを生成する

うまく楽天サーチ結果にとべないようなので、なにが原因かしらべてみます。

こちらも基本的には手順1〜3と同じです。手順2の追記を

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="//af.moshimo.com/af/c/click?a_id=自分のID&p_id=54&pc_id=54&pl_id=616&s_v=b5Rz2P0601xu&url=http%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" target="_blank" rel="nofollow">';


と追記すればオッケーだと思います。

もしもアフィリエイトのIDはトップページから楽天リンクを取得し、その中のa_id=***の数字部分を入力です。
Moshimo id

デザインのカスタマイズ

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

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

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

amazonjs/css/amazonjs.css

.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アイコンを非表示にする

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アイコンを非表示することができます。

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

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

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

javascript:(function(){void prompt('copy','%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の商品ページにてブックマークレットを実行してください。

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

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

問題点

  • オリジナルのブックマークレットがKindle本ページでは実行されず、その点は今回のカスタマイズでも改善されていません。
    • そういう場合はWordPressの記事編集画面からAmazon JSを使用すれば解決するので、このままAmazon JSを使っていく予定。
  • リンクボタンのサーチのキーワードはAmazonの商品名になってしまう。

まとめ

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

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

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

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

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

18 件のコメント

  • これはすごい!
    カエレバが好きではなかったので、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倍程度になりました。
    結果的にこれまで機会損失だった楽天の売上もそれに応じてあがっています。
    ありがとうございました!

  • 質問があります。
    こちらで紹介されている方法の場合、楽天のIDは楽天アフィリエイトで取得するIDでないと正常に動作しないのでしょうか?「もしもアフィリエイト」のIDではダメでしょうか?

  • 神記事ですね。
    この記事単体で1,000円で売られていても絶対に買いたいぐらいです。
    本当にありがとうございます。

    1つ気になったのですが、私のブログでは商品リンク枠内の右下に、従来のAmazonJS使用時に表示されていたAmazonのマークが表示されたままになっています。
    できればこちらの記事内にある表示例のようにAmazonマークを消してすっきりさせたいのですが、何か別途カスタマイズが必要なのでしょうか?

  • 何度もコメント失礼します。
    コメントの回答の中にあります「Amazonボタンのクリック→商品ページを表示」にするための記述を参考にさせてもらいましたが、どうも「”」が1つ余計にあるように思います。
    難しいことが全く分からないのでもし私の勘違いであれば混乱を避けるためこのコメントは非表示にしていただきたいのですが、自分の環境ではAmazonボタンのリンクが正常に機能しなかったので以下のように「”」を1つ減らしてみました。

    var linkOpenTag1 = ‘‘;

    var linkOpenTag1 = ‘
    ‘;

    これでAmazonボタンも正常に機能するようになりました。

    • コメントありがとうございます!

      >神記事ですね。この記事単体で1,000円で売られていても絶対に買いたいぐらいです。
      ありがとうございます!!!

      >「もしもアフィリエイト」のIDではダメでしょうか?
      記事中のコードだと、「もしもアフィリエイトID」ではダメですね。
      もしもアフィリエイトIDバージョンも追記しておきます。

      >Amazonマークを消してすっきりさせたい
      cssを編集することで消すことが出来ます。
      こちらも追記しておきますね。

      >コメントの回答の中に・・・
      確かに「”」が多かったですね。すみません。
      コメントを訂正しておきました。

  • 早速の追記ありがとうございます!とても助かります。

    …と、すみませんが、もう一点だけ質問させてください。。
    amazonjsプラグインを入れてこちらの記事中にあるCSSだけを追加した状態だと、こちらの記事中にあるサンプルのような大きめの商品画像にならないのですが、これは使用テーマなどの環境による違いが原因でしょうか?それとも何か画像を大きくするCSS他の書き方があるのでしょうか?

    もし何かCSSなどを書く必要があるようでしたら、「この記事参考にしてみ→リンク」みたいな形でも構わないのでヒントを教えてもらえると嬉しいです。

    よろしくお願いします。
    (「え?そんなはずないんだけど?」という場合を考えて参考までに私のブログでの現在の表示デザインを確認できるページURLを貼っておきます https://prime-dict.com/?p=2512

    • 何度もコメントありがとうございます。

      中サイズの画像にするにはショートコードに[amazonjs asin="******" locale="JP" title="********" imgsize="medium"]のようにとショートコードにimgsize="medium"と指定すればできるはずですよ!
      記事中にあるブックマークレットでショートコードを生成してもらうと、imgsize="medium"がすでに組み込まれているようにしてあるので、もしよければブックマークレットからショートコードを生成してみてください。

      で、ブックマークレットからショートコードを生成できない商品(Kindle本やデジタルミュージックなど)の場合WordPressの投稿画面からAmazonJSを実行するわけですが、その際、手打ちで毎回imgsize="medium"を入力しなければいけないので面倒だなと思いamazonjs/js/amazonjs.jsも少しカスタマイズしています。
      90行目付近の

      				var defaultTemplates = {
      					Small:[
      						'<div class="amazonjs_item">',
      						imageTemplate,
      						'{{if _ShowDefaultImage}}',smallImageTemplate,'{{/if}}',

      となっている部分を

      				var defaultTemplates = {
      					Small:[
      						'<div class="amazonjs_item">',
      						imageTemplate,
      						'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',

      とすることで、ショートコードにimgsize="medium"と指定せず[amazonjs asin="******" locale="JP" title="********"]のみで中サイズの画像が出力されるようにしています。

      たしか、これで出来たと思います。

      • ご丁寧にありがとうございます。とても分かりやすく、迷うことなくできました。
        先のコメントをした後に自分で画像サイズ変更の情報を探していてショートコードに追記するという方法があるのは知ったものの、でもこんな面倒なこと毎回やってるとも思えないし…と感じたので、プラグイン編集の方法を知れて嬉しいです。(ブックマークレットも確かに便利なのですが、特定の何かを紹介したいという場面よりも記事中に何か適当に関連商品を入れたい場面の方が圧倒的に多いので、投稿画面からAmazonJSの実行だけで完結するのはかなり手間が省けて助かります)
        今後Amazonで買い物する時、当面はこちら経由でAmazon行って買い物させてもらいます!笑

        • 無事、実装できたようでなによりです!

          >今後Amazonで買い物する時、当面はこちら経由でAmazon行って買い物させてもらいます!笑
          是非、是非!笑
          サイバーマンデーもありますし、いっぱい買ってくださいね!笑

  • まさに探していた情報で感激しました!!
    amazonで何か購入する際はこちらから購入させて頂きます。
    本当にありがとうございました。

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

      >amazonで何か購入する際は・・・
      ぜひぜひ、お願いします!笑

  • コメントを残す