Thursday, March 15, 2012

Adding Amazon Product Preview to Blogger

I have been trying different templates and designs on my Blogger site here and realized that I lost the Amazon Product Preview for any links that I have which point to Amazon products. I was having a hard time finding out how to add that feature back, so now that I figured it out I wanted to share that here for anyone that might be having that same problem.

First off, here is an example of what I'm talking about. Hover over this link to the Canon EOS 5D Mark II DSLR top of the line camera with your mouse.  You should see a picture of the product along with a buy now button.  All without having to leave this site.  I think that is a great feature and definitely worth adding to your site as a benefit to your readers if you utilize Amazon product links.

To Add Amazon Product Previews to Blogger:
  1. Login to your Amazon Affiliate account and go to this link and copy the HTML code provided.  
  2. Go into your Blogger dashboard and go to Layout.  
  3. Click on 'Add a Gadget' in your side bar and if you allow pop-ups for the blogger site, the 'Add a Gadget' window will pop up on your screen.  Scroll down to HTML/JavaScript and click the + button to add the gadget.  Then leave the title blank and paste in the appropriate HTML code that you copied from step 1 into the content box and hit save.
  4. Then click the 'Save Arrangement' button towards the top and you are done.
Then, when you include any text or image links to Amazon products, the Product Preview will pop up when anyone hovers over the link, similar to what I showed you above.  Keep in mind, that is only for individual products, as you would expect.  This link to the Hunger Games Store on Amazon does not have a preview, since it is a link to multiple products.

That wasn't so hard, but realizing where on Amazon that I had to go to get the code took a bit of time.  Hope that helps!

Are you having any problems getting particular items working on your Blogger or WordPress blogs?  Drop me a comment and I'd be glad to try and help out.  It might even make a great topic for a future post to help out others with similar issues.  Thanks.


Jamaal Fridge said...

Thanks for the advice, but I ran into trouble at the "Add your own" part. There is no option for choosing your HTML/JavaScript. All it says is enter the URL. Where would I go from here?

Chris said...

Jamaal, I re-worded the steps a bit to hopefully make them more clear. If that still doesn't help, let me know where you are getting the enter the URL screen and I'll do what I can to help you out. Thanks for the comment.

Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes