Notice: Amazon Product Previews stopped working on this blog around June 4, 2010. The problem appears if a jQuery script tag (either 1.2.6 or 1.3.2) is included in the Blogger template. Amazon uses a customized version of jQuery 1.2.6 and a lot of scripting for the previews. I want to keep my jQuery script tag, so the information provided below will work in Blogger, as illustrated by the screenshots, as long as it doesn't collide with the standard jQuery library.
I have added the product previews script to the blog template. If it works, you should see it when you mouseover this link to Merle's Door, a book I read recently.
Product previews work with Internet Explorer and Firefox. In Chrome and Safari(win), both WebKit browsers, the preview box might not display or appear as an empty box (confusing!). In Opera, the preview does not display at all. Product previews with image links work in Firefox, but in Internet Explorer 7 and 8, they may display and then disappear, unless instantly grabbed with the mouse.
To fix the "disappearing preview problem" in Internet Explorer, enclose the img tag in a block element such as <p></p> and/or make the image style "display: block". Doing this makes the preview window open directly over the image (where the user's mouse is located), and it stays open. If the preview opens off to the side, not touching the image, the user cannot "grab" it fast enough to keep it open. Other browsers seem to allow more "blur" time to get the mouse over the popup.
Screenshot of preview with image link in Firefox 3.5:
Screenshot of preview with text link in Firefox 3.5:
See a related post with more information about using the product previews script in a single blog post.
To add the previews script to your blogger template, open the Layout tab and select Page Elements. Then click Add a Gadget in the footer area. Select HTML/Javascript and paste the previews code. Important: Change the ampersand (&) in the script tag to & for compatibility with blogger's strict XHTML doctype.
The script should look like this, with the <script> tag all on one line and no spaces or line breaks within the <noscript> src attribute. (Replace "yourTagID" with your own Amazon associate ID):
<script src="http://www.assoc-amazon.com/s/link-enhancer?tag=yourTagID&o=1" type="text/javascript"></script> <noscript><div><img alt="" src="http://www.assoc-amazon.com/s/noscript?tag=yourTagID"/></div></noscript>
Save changes and try it out!
6 comments:
The Firefox AdBlock Plus extension can prevent product previews from displaying. Otherwise, Firefox is very reliable about displaying previews with both text-only and image links. Also, I've discovered a way to make product previews work better with image links in IE8, and will add something about that here or in a new post.
Hi araby. this link enhancer was working for me some hours ago. but dont know how suddenly it stops working. its placed on http://www.theCisco.Net (in 2nd navigation bar). can you plz review it. i placed the well into the footer widget
Yes, mine suddenly stopped working, too. On a test page, product previews displayed when I removed the script tag for jQuery 1.3.2 from the blogger template head tag. I also tried using a script tag for jQuery 1.2.6 instead, and product previews did not display until I removed it. Amazon uses jQuery 1.2.6 with the link-enhancer script, but they may have made some customizations that do not work with the standard library.
In your code for the Google Dynamic Feed, remove the underscore that I used as a line continuation symbol in the example code, along with extra spaces and line breaks. I had to break up the code to make it fit in the post area. I mentioned this above the code listing, but I just made it red so it stands out more.
You also have another script that depends on jQuery, and tags for both version 1.2.6 and 1.3.2, so there's a potential for conflict there.
You may need to choose between product previews and other functionality. They're nice, but they work only in IE and FF. Until Amazon updates the code, I'm not sure they're worth the trouble.
Urgh! I deleted one comment here, and all of them disappeared. Apologies! The most recent comments were about product previews suddenly not working. I discovered that loading a jQuery library, even version 1.2.6, which is the version used by Amazon's preview fly-out scripts, can cause the previews to throw errors and fail. I'm guessing that Amazon made some customizations that stop working when a different version of the library is loaded. Using jQuery.noConflict() might solve the problem, but I haven't tested it yet.
Gah! How is it that the biggest blogging platform and the biggest online seller can't work together on these things? And right after Blogger integrated Amazon into their site. I hope this gets fixed so us mere mortals can figure it out!
Yeah, I just gave up for the moment. The only thing I can think of is that Amazon might have customized the core library instead of putting their modifications in a plugin. Otherwise, there should be no conflict. Maybe later, I'll try some other stuff...
Post a Comment