このページの本文へ

Amazonと楽天のアフィリエイトを効率化するjQuery技 (4/5)

2009年04月20日 10時27分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

自動リンクのスクリプトを作る

 次に、スクリプト部分を作成します。「東京ブックマニア」にはすでに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」に書き加えたら、今回のお題は完成です。実際に正しくリンクされているか、ブラウザーで動作を確認してみましょう。


完成した作例。「Amazonで買う」をクリックするとAmazon.co.jpへ、「楽天で買う」をクリックすると楽天ブックスへ移動できます


 今回の方法はとてもシンプルな仕組みですので、ほかのショッピングサイトでのアフィリエイトにも簡単に応用できます。さらに使いやすい形に拡張してもいいでしょう。それでは、次回もお楽しみに。


(作例デザイン:wataru)

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています