How To Embed Several Amazon Products Links At Once

The Problem:
It’s 1:03 AM and am looking for a way to embed books from Amazon on posts here at WebHole. I could go with the plugins at wordpress.org, but they don’t do all I want to do and besides am a web developer so why not code it myself ( lol, you like our retweet button? I made it).

The Solution

As you know every time you want to embed a product you have to get the product’s iframe code, I hate having to sign in to Amazon every time I want to do this, but if you look at the code there is a variable called asins whose value is the product’s unique id, there is also a variable called “t” where you can put your affilate tag.

...asins=B0013HBJ8Q&fc....t=affiat-21

To show a different product all you have to do is change the value of this variable to the product you want to show. You can get this value from the product’s page under “Product Details”.

amazon-product-details-for-a-bike

Amazon Product Details Section

But what if you want to embed more than one product, and what if you want to embed different products on every webpage in your site and be able to move them all around at once. The solution could be PHP, but since I can’t manipulate the PHP for every post because am using WordPress I went with Javascript.

I made a division that’ll I’ll fill up with all the iframes. I will add this division to directly to the template where I want the products to show.

<div id="amazon-products">

</div>

Then I made an array called “asin” with different ASIN’s for all keys plus my affiliate tag. Whenever I want certain products to show all I’l have to do is add something like this to the post.

// your affiliate tag
var afitag='web052-20';
// an array so we can have one or more products
var asin=[];
asin[0]='032152599X';
asin[1]='B000BT4W2C';
asin[2]='0596006306';
asin[3]='B002C7446A';

Now I loop through the array with a for loop and change the value of “asin” and “t” every time. At the same time I use innerHTML to fill up the div and give it the value of the iframe code embedded to the previous HTML in the div.

I will also have to add this function directly to the template before the &lt/body> tag.


window.onload=function()
{
        // only execute if the array exists
	if(asin!='undefined')
	{
		var amazonDiv=document.getElementById('amazon-products');
		var i;
	    // make an iframe inside the division for each product in the array
		for(i in asin)
		{
		 amazonDiv.innerHTML=amazonDiv.innerHTML+'<iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=FFFFFF&IS2=1&npa=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t='+afitag+'&o=1&p=8&l=as1&m=amazon&f=ifr&asins='+asin[i]+'" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
		}
	}
}

The Result

A Div Tag Filled With Amazon Product Links by an Array

A Div Tag Filled With Amazon Product Links by an Array


The results is a division with product links that exists in every post and I can move around whenever I feel like making changes to my wordpress template. Do you have a better solution or know of a plugin that does this? leave a comment!

blog comments powered by Disqus