This tutorial will teach you how to build a “Book Rotation.” On pageload, it picks a random book from a list of your favorites, and displays it’s title and cover, linking to it’s Amazon page with an affiliate link. You can see it in action here (look in the sidebar). Still interested? Okay, let’s get started then.
First of all, log-in to Amazon Associates. If you don’t have an account yet, you might want to get one. Associates is an affiliate program where you earn commissions for referring customers to Amazon. If one of your users clicks on one of your referral link, and buys something from Amazon withing 24 hours, you earn a commission (up to 8%) of anything they buy. Once you’re logged in, head over to the “Build Links” page. You want the “Product Links” option (you’re screen should look something like the screenshot below).
Now, we’re going to need this later, so keep the window/tab open.
Do you know PHP? If so, then you will have no trouble understanding the next part. Even if you don’t know what the heck “PHP” is, you’ll still be able to do the rest of the tutorial (just pay attention).
Open a copy of Notepad, or another plaintext editor and copy/paste the following code into it (note: I had to truncate the Amazon URLs because they don’t fit into my blog template):
<?php
$numberofads=6; // Change the numeral '6' to match the number of books in the rotation.
//Get Random Number
$ad=rand(1, $numberofads);
//The images
if ($ad==1) {
$url="http://www.amazon.com/gp/product/0440418321?ie=UTF8&tag=webmasterso0d-20[...]";
$banner="http://g-ec2.images-amazon.com/images/I/214AbjNUu3L._AA_SL160_.jpg";
$alt="The Golden Compass";
}
if ($ad==2) {
$url="http://www.amazon.com/gp/product/0689303173?ie=UTF8&tag=webmasterso0d[...]";
$banner="http://ec1.images-amazon.com/images/I/31HQVBu7-zL._AA_SL160_.jpg";
$alt="The Dark is Rising";
}
if ($ad==3) {
$url="http://www.amazon.com/gp/product/037581468X?ie=UTF8&tag=webmasterso0d-20[...]";
$banner="http://ec1.images-amazon.com/images/I/2138ZDE2CAL._AA_SL160_.jpg";
$alt="Terrier";
}
if ($ad==4) {
$url="http://www.amazon.com/gp/product/0375814663?ie=UTF8&tag=webmasterso0d-20[...]";
$banner="http://ec1.images-amazon.com/images/I/21B6M4750RL._AA_SL160_.jpg";
$alt="Trickster's Choice";
}
if ($ad==5) {
$url="http://www.amazon.com/gp/product/0345340248?ie=UTF8&tag=webmasterso0d-20[...]";
$banner="http://ec1.images-amazon.com/images/I/21HFSDJXd%2BL._AA_SL160_.jpg";
$alt="The Dragonriders of Pern";
}
if ($ad==6) {
$url="http://www.amazon.com/gp/product/0439887453?ie=UTF8&tag=webmasterso0d-20[...]";
$banner="http://ec1.images-amazon.com/images/I/210R9Q6SE9L._AA_SL160_.jpg";
$alt="Harry Potter books 1-7";
}
//Output
echo ‘<a href=”‘.$url.'”>’.$alt.'</a><br />';
echo ‘<a href=”‘.$url.'”>';
echo ‘<img src=”‘.$banner.'” alt=”‘.$alt.'” />';
echo ‘</a>';
?>
Did you paste that into Notepad? Good. Let me explain the code a little. The line $numberofads=6; means “there are six books in the rotation.” After editing the books in the rotation, you need to update this to match the number of books you have. Other than that (and the book codes themselves) there’s not anything that needs changing.
Now, for each book in the rotation, there’s a block of code that looks like this:
if ($ad==1) {
$url="http://www.amazon.com/gp/product/0440418321?ie=UTF8&tag=webmasterso0d-20[...]";
$banner="http://g-ec2.images-amazon.com/images/I/214AbjNUu3L._AA_SL160_.jpg";
$alt="The Golden Compass";
}
It’s nowhere near as complicated as it looks. The $ad==1 part means that this is entry number one in the list of books. Each entry must have it’s own unique number (it doesn’t affect the display order, since that’s random). The $url="http://www.amazon.com/gp/[...]"; part is the Amazon Affiliate link, while the part that looks like $banner="http://g-ec2.images-amazon.com/[...]"; is the URL to the image of the book’s cover. The $alt="The Golden Compass"; part is the title of the book.
Here’s how you add a new book to the rotation:
Step 1: Add a new code block like the one shown above (the if ($ad==1) { [...] } thing).
Step 2: On the Amazon Associates “Product Links” page, search for the book you want to add (set the dropdown to “Books”). Find the relevant result, and click the “Get HTML” button next to it.
Step 3: In the “Select Link Type” area, pick “Image Only.” Now, do you see the “Preview” to the right? Just right-click the image and choose “Copy image location” (in Firefox. The option name may be different in IE). You’ve got the image url now, so paste it into the $banner="[...]" area. Down, on the same page, there’s a scrolling box marked “Get HTML Code For This Product Link.” In the box, you’ll see a part that looks something like this:
<a href="http://www.amazon.com/gp/product/0545010225?ie=UTF8&[...]">
Look familiar? The URL is the link you need to paste into the $url="[...]" area.
Step 4: Change alt=”The Golden Compass” to the title of the book.
Step 5: This step only applies if you’re adding a new book instead of replacing an existing one. Change the numeral in if ($ad==1) { to be a unique number. Then update the $numberofads=6; line.
Once you’ve finished editing the code, save it as something like “bookrotation.php” and FTP it to your web host. Once you’ve done this, paste the following line of code into your blog template in the spot where you want the rotation to appear:
<?php include="[URL to Rotation File]"; ?>
This will work only if your blog template is a .php-type file. WordPress users are okay here, though some of you may not be able to do this.
If all is well, your rotation should be working.
