Building Image-only ads from Amazon

When Blogger users put an image-only link from Amazon into their blog, there is often a problem with the image not being found. It applies to code generated at Amazon, not to ads that are made using the Amazon widgets in Blogger.

Previously, I explained how to build customised Amazon product links for use in Blogger. You may need to do this if your readers are mainly not from the USA, or if you need to change the size of the advertisements.

One of the options for links is Image-only: the link shows a picture of the item, which your readers can click. When they click on the picture, they are taken to Amazon to buy the product.

This article explains how to fix the problem of the image not actually showing up on the published blog page, even though no error is reported and Amazon's reports say that the ad displayed.

What is causing the picture to not display?

The procedure for building an image-only link has a step:

"Save this image to your server, then cut and paste the HTML code in the lower left textbox into your web page."

Unfortunately, the HTML that Amazon generates assumes that you will save the image onto the same directory in the server that the web-page is stored on. This is fine for many web-site builders, but doesn't work for Blogger users who store their pictures in Picasa by default, or on other image-hosting services.

How to fix it

You can fix the problem by uploading the image file to Picasa, or any other file host service, and altering the HTML to use this uploaded file.

Follow these steps:

Copy the HTML provided by Amazon's link-builder, and paste it into wherever you want it in your blog.
Copy the location of the image that Amazon is telling you to put onto your server.
In another window, log on to Picasa Web Albums using the same Google account that owns your blog
Choose Upload
Choose an album to put the image into
(You may want to keep a separate folder for all Amazon Associates products, or you may want some other arrangement eg one folder per page).
Use the From an URL tab, and enter the location that Amazon told you for the source of the image (copied in step 2)
Press Upload, and wait while the picture is loaded.
When the picture has loaded, Picasa-web-album shows the album summary page. Click on the picture you just loaded.
Click Link to this Photo (on the right hand bar) to get the link value (ie the URL or hyperlink) for the photo, and copy it.
Go back to the place in Blogger where you put the HTLM provided by Amazon in Step 1 and edit it.
The HTML will have this structure:
(I've put in some link breaks and bolding to make it easier to read - you can do the same, provided the Post Options - Ignore new lines option is selected ):

<a
href="http://www.amazon.com/gp/product/0975841963?ie=UTF8&tag=bloggerhintsa-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0975841963">
<img border="0"
src="41FxC9u%2B%2BVL._SL160_.jpg">
</a>
<img
src="http://www.assoc-amazon.com/e/ir?t=YOUR-AMAZON-ID=as2&o=1&a=0975841963" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
Find where it says SRC "blah-blah-blah.jpg" (ie the piece in bold)
Select everything inside the quote marks, and replace it with the link value for the picture that you loaded into Picasa, so it becomes something like:

<a
href="http://www.amazon.com/gp/product/0975841963?ie=UTF8&tag=bloggerhintsa-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0975841963">
<img border="0"
src="http://picasaweb.google.com/YOUR-GOOGLE-ACCOUNT/YOUR-ALBUM-NAME?authkey=Gv1sRgCOGyrv2X0-OvmAE#5430348305093079170">
</a>
<img src="http://www.assoc-amazon.com/e/ir?t=YOUR-AMAZON-ID=as2&o=1&a=0975841963" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
Save the change (ie publish the post, or save the gadget etc).