商品リンクをランダムに切り替える

商品リンクをランダムに切り替える

Posted at November 23,2005 11:57 PM
Tag:[]

Amazon 等の商品リンクをランダムに切り替えて表示する方法です。具体的な動作は、JavaScript の乱数を利用して、ページを表示する毎に乱数に対応する id 属性で括られたHTML(=商品リンク)を表示するという方法です。当サイトのエントリー・アーカイブで試しに使っています。
以下、設定方法です。

まず表示したい商品のリンクを、テンプレートの任意の位置に並べて記述します。その際、リストのように id 属性を付与してください。ここでは amazon0、amazon1、amazon2 という名称にしています。属性名につけられた数字は必須で、0 から開始させてください。ここではリンクを3つにしていますが、いくつ作って構いません。

<div id="amazon0">
商品Aのリンク
</div>
<div id="amazon1">
商品Bのリンク
</div>
<div id="amazon2">
商品Cのリンク
</div>

次に、商品リンクの下に下記の JavaScript を追加してください。赤色部分に商品リンクの合計数を設定します。サンプルでは3つの商品を記述していますので、「3」を設定します。

<script type="text/javascript">
n = Math.floor(Math.random() * 3);
for(i = 0; i < 3; i++){
    document.getElementById('amazon'+i).style.display = 'none';
}
document.getElementById('amazon'+n).style.display = 'block';
</script>

保存・再構築すれば完成です。設定したページをリロードして、商品リンクが切り替わることを確認してください。
なお id 属性名を hogehoge0、hogehoge1… という風に設定したい場合は、リスト内の amazon という文字を

    document.getElementById('amazonhogehoge'+i).style.display = 'none';
}
document.getElementById('amazonhogehoge'+n).style.display = 'block';

と変更してください。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

[不雑] 集中工事終了 from 不定期雑文
みなさま、昨日はご迷惑をおかけしてしまいすみませんでした。 今日の朝になってようやくエラーがないものへと変貌できました。 徹夜じゃなくしっかりと七時間の睡眠をと... [続きを読む]

Tracked on December 6, 2005 9:27 PM
コメント

こんにちはー。
これ、いいですね?。

リロードで次ぎのが表示されるんですね。

自動的に何秒ごとに・・・という具合にはならないのでしょうか?

久しぶりに来て、要望ばかりでスミマセン。
(^_^;)

[1] Posted by ミッチ : November 24, 2005 11:57 AM

>ミッチさん
こんばんは。
ご無沙汰してます。

ということでご要望承りました。(笑)

[2] Posted by yujiro : November 24, 2005 11:39 PM

アマゾンは明確には禁止していませんが、他のアフィリエイトと呼ばれるところは自動リロードを明確に禁止しているので気をつけてください。

では?

[3] Posted by ちは : November 25, 2005 2:11 AM

>ちはさん
こんばんは。
情報ありがとうございました。
ということで掲載は自粛したいと思います(他の用途でご紹介するようにします)。

[4] Posted by yujiro : November 26, 2005 2:14 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)