Chitika

Thursday, August 14, 2008

How to Add Amazon Associates Product Preview to Blogger

As an Amazon Associate you have a variety of widgets you can add to your site. Product Preview brings up a dynamic container featuring a product instead of annoying pop ups. For example,
Chris Brown's Exclusive-The Forever Edition AlbumChris Brown



When you hover your mouse over "Chris Brown's Exclusive-The Forever Edition Album" or the picture, it will display a product preview.

Here are the steps you need to take,
  1. You will have to copy and paste the generic Product Preview code into your template before the last <body> tag. Here is what the generic code looks like,

    <script type="text/javascript" src="http://www.assoc-amazon.com/s/link-enhancer?tag=My_Associate_ID&o=1">
    </script>
    <noscript>
    <img src="http://www.assoc-amazon.com/s/noscript?tag=My_Associate_ID" alt="" />
    </noscript>


    When you save your blogger template an error will be thrown: "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The reference to entity "o" must end with the ';' delimiter."

    Convert the HTML generic Product Preview code to XML. Replace all "<" with lt; and ">" with gt; This will solve the above error.

    Additionally, eblog templates has an Ad Code Converter that will do it for you.

  2. Go to Associates Central >> Build Links >> Product Links. Find the product you want
  3. You have three options to select from,
    1. Text and Image (Enhanced Display)
    2. Image Only (Basic Display)
    3. Text Only (Basic Display)

    Image Only & Text only allow Product Preview but Text and Imagine does not.

  4. Copy the HTML code provided and paste it into your post in Blogger. You will only be able to see Product Preview when you publish and not during preview. If you select Image Only, you have to copy the image and upload it through blogger.

    If you select Image Only, you will need to modify the code so it uses the picture you uploaded. For example, here is the code for the picture of Chris Brown

    <a href="http://www.amazon.com/gp/product/B0017V7GJY?ie=UTF8&tag=My_Associate_ID&linkCode=as2&camp=1789&creative=9325&creativeASIN=B0017V7GJY"gt;lt;img src="51xLoAnzYML._SL160_.jpg" border="0" ></a><img src="http://www.assoc-amazon.com/e/ir?t=My_Associate_ID&l=as2&o=1&a=B0017V7GJY" alt="" style="border: medium none ! important; margin: 0px ! important;" border="0" height="1" width="1" />

    In my case, "src="51xLoAnzYML._SL160_.jpg" was replaced with the src of the picture uploaded.


Conclusion

The text link and picture will both dynamically bring up a container showing the featured product. If you have any questions, leave a comment. If you like this post, subscribe via RSS.

No comments: