先日に続き、アフィリエイトネタをもう一発。
いまさら僕が言うまでも無いことですが、Amazonアソシエイトプログラムは最も優良なアフィリエイトサービスの一つです。
世界的にはAmazonだけで生計を立てているアフィリエイターも少なくありませんし、ちょっと工夫すれば一般のブロガーでも年間数千円程度のお小遣いは確実に稼げます。用意されたコードを貼るだけで済む魅力的なウィジェットが沢山用意されていて、特別な知識が無くても気軽に試せる"親切さ"も魅力です。
なかでも、特に試しやすく、高いクリックレートを望めるのがクイックリンクウィジェット。Amazonから提供されるJavaScriptコードをページに埋め込んでおけば、あとは任意の文字列を「type="amzn"」という属性値のa要素で囲むだけで、その文字列をキーワードとしたamazonの検索結果にリンクしてくれます。もちろん自分のアソシエイトIDを付けて。
例えば、
アフィリエイトでまともに稼ぐにはSEOやWebデザイン、Webプログラミングはもちろん、Web制作全般に及ぶ高度な知識・見識が欠かせない。
この一文のソースは以下のようになります。
<p><a type="amzn">アフィリエイト</a>でまともに稼ぐには<a type="amzn">SEO</a>や<a type="amzn">Webデザイン</a>、<a type="amzn">Webプログラミング</a>はもちろん、<a type="amzn">Web制作</a>全般に及ぶ高度な知識・見識が欠かせない。</p>
従来ならそれぞれのURLを自力で調べなければならなかったところ、実に簡単な方法でアフィリエイト用のリンクを組み込むことが出来ます。
さて、こんなに便利なクイックリンクウィジェットですが、僕は最近まで使っていませんでした。href属性が空のa要素を使うのに抵抗があったからです。
href属性は後でスクリプトが足すわけですし、単純に好みの問題とも言えるのですが…JavaScriptスクリプト（というかDOM）が使えない環境下ではリンクを生成しないのに文字色だけ変わる場合もあります。スタイルシートでa要素の文字色を設定している場合とか。そこで、DOMによるソースの書き換えで回避する方法を考えました。
以下のJavaScriptコードを、クイックリンクウィジェットのJavaScriptコードの手前に記述しておくことで、「<span title="amzn●●">文字列</span>」といった書き方が出来るようになります。
<script type="text/javascript">
<!--//span要素を全てスキャンしtitle属性を調べる
var amzni = document.getElementsByTagName("span");
for (var amznj=0; amznj<amzni.length; amznj++){
var amznk = document.getElementsByTagName("span")[amznj].title;//title属性にamznが含まれていたら…
if ( amznk.indexOf("amzn")!=-1){//文字列を取得。子要素は無視するので入れ子にしないように注意
var amznl = document.getElementsByTagName("span")[amznj].firstChild.nodeValue;//当該span要素の中味を一回空にする
document.getElementsByTagName("span")[amznj].innerHTML = "";//当該span要素のtitle属性がそのままだとみっともないので、取得した文字列に置き換える
document.getElementsByTagName("span")[amznj].title = amznl;//「type="amzn"」を持ったa要素を子要素として当該span要素に埋め込む
var amzn = document.createElement("a");
amzn.setAttribute("type", "amzn");
var str = document.createTextNode(amznl);
amzn.appendChild(str);
document.getElementsByTagName("span")[amznj].appendChild(amzn);
}
}
//-->
</script>
単純なコードですが、クイックリンクウィジェット以外にもいろいろ応用がきくと思うので、どうぞ何かにご参考下さい。