How to add an Amazon Image Link to a WordPress Blog Post

Just recently we have started adding Amazon affiliate links to one of our niche blogs but we couldn’t quite work out how to add a product image link. It’s not as straight forward as adding a bit of code like you would do with say a Commission Junction product image link. We eventually bit the bullet and decided to get in there and see how it was done and we found that it isn’t that difficult after all. So here are the steps for anyone wanting to do the same thing.

Step 1: Upload an Image

First you need to find an image of the particular product. To do this just head over to Amazon and find the product page for that product. At the top left hand corner of every product page in Amazon is an image of the product. You just need to save that image to your computer. It doesn’t matter where you save it as long as you remember where.

Okay, so by now you probably have a blog post written in WordPress about that product so have that open on your screen. You would be in the edit post section of WordPress for that. Now you just want to upload the image to that blog post. Hopefully you know how to do this. It will depend on which version of WordPress you have but there will be an option to upload the image and place it into the blog post itself.

You should now have an image of the product displaying on your blog post but at this point it still doesn’t have a link to Amazon. In other words, if a reader were to click the image it would take them nowhere.

Step 2: Grab the Code

To get the image to click through to Amazon you need to add a bit of code behind the image. To do this you need to head back to Amazon to the product page you were on and click the LINK TO THIS PAGE option on the top menu bar. You need to be logged into your Amazon affiliate account in order to see this.

On this page select the Image Only option. This will display some code in the html box below it.

[UPDATE MARCH 2011: Amazon recently updated their system and no longer have an Image Only option. Simply select the TEXT ONLY option instead and this will still work.]

Now you need to pick up some of the code from that html box. We don’t want the entire piece of code. We actually just want everything between the first and second lot of quotes (see underlined in RED in the image above. Just copy that code as we will need it for the next step. Make sure you don’t include the quotation marks themselves. We just want everything from http to the next lot of quotation marks.

Step 3: Add the Code

Now head back to your blog post. Click on the product image in your blog post to highlight it and then click the INSERT/EDIT LINK menu option on the blog post menu bar (see image above). You should get a little pop-up that lets you add URLs. Then just paste the code that you grabbed from Amazon into the LINK URL field. Click UPDATE and you are done.

To check that it is working just save your blog post and preview it in a browser and then click on the image. It should take you to that product page on Amazon.