Free Affiliate Banner Rotation
With this responsive JavaScript code, you can display multiple affiliate banners on your website, which change every time the page is refreshed. After you have customized the code with desired affiliate image for desktop and mobile + affiliate links, you copy the JavaScript code into where you want the ads to appear.
Example:
When you refresh this page, the demo banner underneath will shuffle at random, which means that a banner may display several times.
And yes, this script is responsive, and mobile-friendly!
Responsive means that you can add images from 5 - 10 affiliate partners with different pixel sizes in height and width. The script will automatically compress the image to the page width on your website.
Mobile friendly means that you can add two image link; one for desktop or tablets that are wider than 600 pixels (which you can change yourself), and one image link for mobile. I prefer to do this as the typical 350 x 350 mobile image is too small for desktop. If you view this page on a desktop and mobile, you will see it live.
Please give us a shoutout or a backlink if you decide to use this script, as we’ve paid a developer to create this script which we offer for free!
How to use
1. How to use the function script
This script needs to be included on the page, but only ONCE, and it must appear BEFORE any banner ads. You can set this inside <head> where you might already have other scripts, but it can also be included further down inside the <body>.
<script type="text/javascript">
function bannerAdsShuffler(ads) {
let adLabel = 'ADVERTISEMENT'; // Display text over the banner, can be changed.
let mobileBreakpoint = 600; // The max screen size in px, for when to use mobile image. Can be changed.
let adPicked = ads[Math.floor(Math.random() * ads.length)];
let adPickedImage = adPicked.imageDesktop;
if (screen.width < mobileBreakpoint && adPicked.imageMobile) {
adPickedImage = adPicked.imageMobile;
}
document.writeln(
'<div style="margin: 1rem 0;">' +
'<div style="text-align: center;"><small>' + adLabel + '</small></div>' +
'<a href="' + adPicked.link + '" target="_blank" rel="nofollow"><img src="' + adPickedImage + '" alt="' + adPicked.name + '" style="width: 100%;"></a>' +
'</div>'
);
}
</script>2. Display ads
The following script needs to be added where you want your banner ads to be displayed. It can be included as many times you want on the same page, and can display different ads in different places.
To add more ads, simply add more objects between bannerAdsShuffler([ and ]);. Or remove one or more elements. You can have as many or few as you want.
<script type="text/javascript">
bannerAdsShuffler([
{
'name': 'TjenestetorgetVarmepumpe',
'link': 'https://aslinkhub.com/?bid=2511961&media_id=97449',
'imageDesktop': 'https://impr.adservicemedia.dk/cgi-bin/Services/ImpressionService/Image.pl?bid=2511961&media_id=97449',
'imageMobile': '', // Can be empty
},
{
'name': 'Bålstedet',
'link': 'https://dot.baalstedet.no/t/t?a=1834679712&as=1295500347&t=2&tk=1',
'imageDesktop': 'https://track.adtraction.com/t/t?a=1834679712&as=1295500347&t=1&tk=1&i=1',
'imageMobile': '', // Can be empty
},
{
'name': 'Sinful2',
'link': 'https://www.partner-ads.com/no/klikbanner.php?partnerid=29514&bannerid=104863',
'imageDesktop': 'https://www.partner-ads.com/no/visbanner.php?partnerid=29514&bannerid=104863',
'imageMobile': '', // Can be empty
},
{
'name': 'NorgesEnergi',
'link': 'https://track.adtraction.com/t/t?a=1661306164&as=1295500347&t=2&tk=1',
'imageDesktop': 'https://track.adtraction.com/t/t?a=1661306164&as=1295500347&t=1&tk=1&i=1',
'imageMobile': '', // Can be empty
},
{
'name': 'Talkmore',
'link': 'https://aslinkhub.com/?bid=3017925&media_id=97449',
'imageDesktop': 'https://impr.adservicemedia.dk/cgi-bin/Services/ImpressionService/Image.pl?bid=3017925&media_id=97449',
'imageMobile': '', // Can be empty
},
{
'name': 'Talkmore',
'link': 'https://aslinkhub.com/?bid=3017925&media_id=97449',
'imageDesktop': 'https://impr.adservicemedia.dk/cgi-bin/Services/ImpressionService/Image.pl?bid=3017925&media_id=97449',
'imageMobile': '', // Can be empty
},
]);
</script>