Laith Zraikat

I Innovate, Therefore I Am.

Amazon Associate Books Rotator for your Blog using AJAJ

Last week I wanted to list some of the books that I've read and/or recommend. So I thought I'd also make some money while I'm at it. I created an Amazon reseller account and stared creating affiliate links.

Since Amazon does not have an automated way to generate code that will rotate several books, I decided to create one using JavaScript Asynchronous Callback and JSON.

This small solution consists of 2 files:
1. books.txt: contains the list if ISBN's for the books
2. books_json.js: JavaScript file that contains the code which will retrieve the list of ISBN's through xmlHTTPRequest, and then pick a random book and displays it.

This is how the code looks:

Book.txt:

{"Book":
[
{"Code": "0393058581"},
{"Code": "1590595009"},
{"Code": "1590593898"},
{"Code": "0385483821"},
{"Code": "0684855542"},
{"Code": "0375727205"}
]
}

Books_json.js:

// Settings you can modify
var affiliateID = "numbersixteen-20";// Your amazon associate ID
var Width = "120px"; // Box Width
var Height = "240px";// Box Height
var fcl = "000000";// Text Color
var lcl = "0000ff"; // Link Color
var bcl = "000000";// Frame (border) color
var bgl = "ffffff"; // Background color

//Ony modify if you know what youre doing
var dataURL = "/books.txt";

//Create the XMLHTTPRequest object
var requester;
try
{
requester = new XMLHttpRequest();
}
catch (error)
{
try
{
requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
requester = null;
}
}

// Open the XMLHTTPRequest, set the method to GET, give it the URL to fetch and set (Asynch = true) so the rest of the page can still download while the data is downloaded

requester.open("GET", dataURL, true);
requester.send(null);

// When the request is done, we call stateHandler which will perform the the needed actions IF we actualyl got a response.
requester.onreadystatechange = stateHandler;

function stateHandler()
{

// The XMLHttpRequest has finished requesting the data
if (requester.readyState == 4) {

// The data was receieved successfully
if (requester.status == 200)
{
// There no need ot do anything if no text was received.
if (requester.responseText != "")
{
// Get the JSON list of book ISBN's and compile it
var Books = eval( '(' + requester.responseText + ')' );
// Generate a random index from the Books Object
var whichBook=Math.floor(Math.random()*(Books.Book.length));
// Get the Book ISBN
var Book = Books.Book[whichBook].Code;
requester = null;
// Build the HTML code to place in the page
var amazonCode = "<iframe src='http://rcm.amazon.com/e/cm?t="+ affiliateID +"&o=1&p=8&l=as1&asins="+Book+"&fc1=" + fcl + "&IS2=1&lt1=_blank&lc1=" + lcl + "&bc1=" + bcl + "&bg1=" + bgl + "&f=ifr' style='width:"+Width+";height:"+Height+";' scrolling='no' marginwidth='0' marginheight='0' frameborder='0'></iframe>";
// Dump the HTML code on the page
document.getElementById('bookList').innerHTML = amazonCode;
}
}
else
{
requester = null;
}
}
return true;
}

Installation on your blog:
1. Upload the JavaScript and Data files into the root folder of your web site
2. Add the following in your HTML where you want the books to appear:

<div id="bookList" name="bookList"></div>
<script type="text/javascript" src="/books_json.js"></script>

Download the source code and example:
books_json.zip

In case you want a version that uses XML, here it is:
books_xml.zip



Add a Comment