Warning: getimagesize(http://i303.photobucket.com/albums/nn146/asithi/AmazonCustomizehtml.jpg): failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found in /home/infobarrel.com/m/includes/article.class.php on line 1778
Inserting Clickable Images to a Webpage for an Amazon Product - InfoBarrel
Login
Password

Forgot your password?

Inserting Clickable Images to a Webpage for an Amazon Product

By Edited Nov 13, 2013 0 3

Inserting clickable images is a great way to direct your visitors to the sell page of an Amazon product. Once the visitor is on Amazon, there is a high possibility that the visitor will buy the product of the image they clicked on or will buy something else from the site.

This article is will teach you how to insert a clickable image for an Amazon product on your webpage. This article assumes that you have an Amazon Associates account.

Typically the insert clickable image code looks like this:

<a href="Link of Where You Want to Direct Visitors"><img src="Location of Image File"
alt="Alt Text" width="pixels of image" height="pixels of image" border="0" /></a>


The required information to make the clickable image code work is in light blue. The optional information (also known as the attributes of the image) is in red.

The <a href="……"> portion of the code directs your visitor to the Amazon sell page for the product. The <img src="…"> portion of the code tells your webpage where the image is located that you want to insert as a clickable image on your website.

As long as you can specify the website, directory, and file location, you can tell your webpage where to pull the image. For example,

<img src="http://infobarrel.com/images/image.jpg"


This tells the webpage to pull the image from InfoBarrel, at the image directory, and the file name is image.jpg.

Step1: Find a product on Amazon

First you need to sign into your Amazon Associates account and find the product you want to create a clickable image for. In this article, I will show you how to insert a clickable image for Creating Webpage for Dummies (a book sold in Amazon).

Step 2: Pull up the "Customize and Html" window for the Amazon product.

When you get to "Customize and Get Html" you will be presented with three options:

Text and Image, Image Only, or Text Only. Select Image only.

The auto generated code looks something like this (I highlighted the important part in light blue):

<a href="http://www.amazon.com/gp/product/0470385359?ie=UTF8&tag=YourAmazonID&linkCode=as2&camp=1789&creative=390957&creativeASIN=0470385359"><img border="0" src="51q-7AYvWmL._SL160_.jpg"></a><img src="http://www.assoc-amazon.com/e/ir?t=YourAmazonID&l=as2&o=1&a=0470385359" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />


Notice that the Preview window asks you to save the image somewhere. Amazon does not want you to pull the image from their server and use their bandwidth (makes sense since it will slow down their site if millions of Amazon Associates do this).



So right click on the image and save the image to the server of your website. If you do not have a self hosted site and cannot upload images to your website, you can always sign up for a free image hosting site like Photobucket.com. For this example, I uploaded the image to Photobucket and renamed the image to CreatingWebpageforDummies.jpg.

Step 3: Manipulate the auto generated Amazon html code so your clickable image will fit your webpage.

As you can see, the auto generated code is a little different (and less user friendly) than the typical code I listed at the beginning of the article. However, I highlighted the information you need from the auto generated code to manipulate the Amazon image into something more presentable for your webpage.

Let's go back to the typical clickable image code:
<a href="Link of Where You Want to Direct Visitors "><img src="Location of Image File"
alt="Alt Text" width="pixels of image" height="pixels of image" border="0" /></a>


So your code now looks like:

<a href="http://www.amazon.com/gp/product/0470385359?ie=UTF8&tag=YourAmazonID&linkCode=as2&camp=1789&creative=390957&creativeASIN=0470385359"><img src="Location of Image File" alt="Alt Text" width="pixels of image" height="pixels of image" border="0" /></a>


When you upload your image to Photobucket, you want to grab the direct link for the image location. You insert the direct link for the image in the <img src="…"> portion of the code. So you code now looks like this:

<a href="http://www.amazon.com/gp/product/0470385359?ie=UTF8&tag=YourAmazonID&linkCode=as2&camp=1789&creative=390957&creativeASIN=0470385359"><img src="http://i303.photobucket.com/albums/nn146/asithi/CreatingWebpageforDummies.jpg" alt="Alt Text" width="pixels of image" height="pixels of image" border="0" /></a>


The attributes are always optional when inserting a clickable image to a webpage. However, I always recommend at least inserting the alt text because if visitors are searching Google for images, the alt text is how Google know whether your image is related to the keywords they are searching for. So the code now looks like this:

<a href="http://www.amazon.com/gp/product/0470385359?ie=UTF8&tag=YourAmazonID&linkCode=as2&camp=1789&creative=390957&creativeASIN=0470385359"><img src="http://i303.photobucket.com/albums/nn146/asithi/CreatingWebpageforDummies.jpg" alt="Creating Webpage for Dummies" width="pixels of image" height="pixels of image" border="0" /></a>


Lastly you can specify attributes for the image file such as the other attributes for the image such as the width, height, and border, etc. But usually I just use the default that is displayed on the Amazon website.

So the final code to the clickable image you insert in your webpage looks like this:

<a href="http://www.amazon.com/gp/product/0470385359?ie=UTF8&tag=YourAmazonID&linkCode=as2&camp=1789&creative=390957&creativeASIN=0470385359"><img src="http://i303.photobucket.com/albums/nn146/asithi/CreatingWebpageforDummies.jpg" alt="Creating Webpage for Dummies" /></a>


Advertisement
Advertisement

Comments

Apr 19, 2011 1:35am
CortCaldwell
Great resource, but I am still trying to figure this out since there is no option for "image only" in my Amazon Associates (only Image and text/ Txt only).
May 31, 2012 5:18am
Nickflick01
Thanks for the tips. Amazon doesn't now suggest that you download the image and provide a link to do so but I assume you still should and then upload it and add the link as per a text link? Sorry, newbie!
May 31, 2012 7:30am
asithi
Yes, you can do that. Just add the text link for the product to the portion of the code.

Always add an Amazon link to your image, especially if you are doing a product review. People click on images all the time.
Add a new comment - No HTML
You must be logged in and verified to post a comment. Please log in or sign up to comment.

Media

Explore InfoBarrel

Auto Business & Money Entertainment Environment Health History Home & Garden InfoBarrel University Lifestyle Sports Technology Travel & Places
© Copyright 2008 - 2016 by Hinzie Media Inc. Terms of Service Privacy Policy XML Sitemap

Follow IB Technology