はてなブログの記事内でJavaScriptを使ってAmazonのバナーをランダム表示する(ヘッダー・フッターも可)
[technology][javascript]はてなブログにAmazonのバナーをJavaScriptを使ってランダムに変化・表示させる
当ブログはAmazonのバナーとかを貼っているのですが(ちなみにアクセス数少なすぎて報酬はここ数年ほとんどありません...（泣）)、普通に貼ると同じバナーが固定で表示されるので面白く無いなと思い、JavaScript使ってランダムに表示させてみました。(バナーの種類によってはAmazon側で多少ランダムに表示内容をセレクションするものもあるのですが、あまりバリエーションがありません)
とりあえず記事内に以下の様なソースを貼ると、listに設定したリンクからランダムに選んだ内容が表示される様になります。
【サンプルソース1】
<div id="amazon_random_ad20200314"></div>
<script type="text/javascript">
var amazon_random_ad = document.getElementById("amazon_random_ad20200314");
var list = new Array(
'アマゾンのバナーリンク1',
'アマゾンのバナーリンク2'
);
var random_hyoji = Math.floor(list.length*Math.random());
amazon_random_ad.innerHTML = list[random_hyoji];
</script>
注意点はdivに設定するidを他の記事に貼るリンクとダブらない様にすること。
はてなブログの設定で、1ページに複数エントリ表示する様になっている場合は、サンプルの様に日付とか日付+その日のエントリ番号的なものでユニークなidを振っておいた方が安全です。
'アマゾンのバナーリンク1','アマゾンのバナーリンク2'のところは実際のバナーリンクを埋め込みます。本エントリのページソース見てもらえれば判ると思います。
実際の表示は下記の様な感じで、ページをリロードする度に別にバナーが表示されます。
【実際の表示】
これでだけでは面白く無いので、ランダムにリンクを選択して表示する部分はfunction()化し、setInterval()で一定時間毎に表示を変更する様にしてみました。
サンプルでは変化が分かりやすい様に15秒更新にしています。ただしあまり高頻度にバナーが変化すると結構うざいので、実際に使う場合は60秒くらいに伸ばした方が良いかなと思います。
【サンプルソース2】
<div id="amazon_random_ad20200314b"></div>
<script type="text/javascript">
var list = new Array(
'アマゾンのバナーリンク1',
'アマゾンのバナーリンク2'
);
var amazon_ad_random_disp_entry = function(id,list){
var amazon_random_ad = document.getElementById(id);
var random_hyoji = Math.floor(list.length*Math.random());
amazon_random_ad.innerHTML = list[random_hyoji];
};
amazon_ad_random_disp_entry("amazon_random_ad20200314b",list);
setInterval(function(){amazon_ad_random_disp_entry("amazon_random_ad20200314b",list);},15000);
</script>【実際の表示】
本エントリでは記事内に貼っていますが、はてなブログの「デザイン」からブログのヘッダに上記の様なコードを埋め込む事も出来ます。
後は時間帯に応じて、例えば平日昼間は企業向け、それ以外は個人向けのバナーリストに切り替えるとかも面白そうです。
