Overview:
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:
Description:
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).
Related Articles:
How to build customised Amazon product links for use in Blogger
Putting third-party HTML into your blog
Hosting pictures outside Picasa
Finding a Picture's URL in Picasa-web-albums
Understanding Google accounts
Picasa and Picasa-web-albums, and overview.
0 comments:
Post a Comment