自動リンクのスクリプトを作る
次に、スクリプト部分を作成します。「東京ブックマニア」にはすでにjQueryを使ったスクリプトを組み込んでいるため、今回もjQueryを使います。
まず、Amazon.co.jp用/楽天ブックス用の基本URLを設定します。このURLには自分のアフィリエイトIDを含めておきます。
var amazonURL = "http://www.amazon.co.jp/exec/obidos/ASIN/";
var amazonURL2 = "/【トラッキングID】/ref=nosim/";
var rakutenURL = "http://hb.afl.rakuten.co.jp/hgc/【アフィリエイトID】/?pc=http://item.rakuten.co.jp/book/";
次に、アマゾンへリンクする <a>タグを読み出します。スタイルシートクラス「buyAmazon」を探せばよいので、jQueryでは $(".buyAmazon") とすれば簡単にピックアップできます。あとは、Amazon.co.jpの基本URLとrel属性の内容(商品コード)を連結して、href属性に書き込みます。楽天の場合も同様です。
$(".buyAmazon").each(function(){
$(this).attr("href", amazonURL+$(this).attr("rel")+amazonURL2);
});
スクリプト部分を前回作成した「booknavi.js」に書き加えたら、今回のお題は完成です。実際に正しくリンクされているか、ブラウザーで動作を確認してみましょう。
今回の方法はとてもシンプルな仕組みですので、ほかのショッピングサイトでのアフィリエイトにも簡単に応用できます。さらに使いやすい形に拡張してもいいでしょう。それでは、次回もお楽しみに。
(作例デザイン:wataru)
■もっと勉強したい人のためのオススメBOOK(Amazon.co.jp)