Quite a few Amazon associates have "aStores" on Blogger. Recently, there have been several questions on the Associates Discussion Board about creating product links in posts that go to product detail pages in the aStore instead of (the same pages on) amazon.com. You can't use the target attribute in these links to load detail pages in the iframe because they are not on the same page as the aStore. The src attribute of the iframe has to be changed, and the only way to do that is with a script. Depending on your site's requirements, the script can be written using jQuery, traditional JavaScript, PHP, or ASP.Net.
Earlier today, I posted an article on my Greene Tea blog about how to accomplish product deep links in a WordPress blog with PHP, and on a non-blog website with jQuery. The jQuery solution also works with Blogger, so I'm posting abbreviated instructions here.
Get jQuery and the getUrlParam jQuery plugin
The jQuery library greatly simplifies using JavaScript with web pages. Google hosts the jQuery library and allows developers to link to it. If you already use the jQuery library on another website that you own, you could link to your copy of it. On this blog I've included the jQuery library by adding a script tag for the Google-hosted file in the template's <head> tag:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
I also added a script tag for the getUrlParam.js jQuery plugin file on my web server. The plugin script is short, and could simply be placed on the aStore page, since that is where it will be used. The important thing is that the plugin loads after the jQuery library.
Add a script that modifies the aStore iframe
A short jQuery script on the web page containing the aStore iframe checks each HTTP request for a URL parameter in the query string appended to the basic link. The script runs immediately after the page loads.
In a URL with a query string (always written as one word in code), a question mark designates the end of the link's destination and the beginning of one or more parameters (pieces of information) passed to a script. If there are several parameters, an ampersand (&) is placed between each one as a separator. A query string is often used in searches to facilitate bookmarking, but should never be used to pass sensitive information because it is visible in the link.
What we want the script to do is change the source of the iframe from the aStore's default home page to the detail page for a product that you previously added to the store. The source link follows this simple pattern:
http://astore.amazon.com/yourAffiliateID-20/detail/ASIN
You would replace "yourAffiliateID-20" with your own Amazon affiliate ID or a different tracking ID for the store, and ASIN with the 10-digit product number (usually the ISBN-10 for books).
The script will change the src of the iframe (which must have an id) ONLY IF a query string with a parameter named "azdp" exists in the URL. The parameter name can be anything you want, as long as it is unique, to prevent conflict with any other Blogger parameters. The value of the "azdp" param is Amazon’s product ID number, or ASIN.
<script type="text/javascript">
$(document).ready(function(){
var newSrc = $(document).getUrlParam("azdp")
if (newSrc !== null) {
$('#astore').attr('src','http://astore.amazon.com/affiliateID-20/detail/'+newSrc);
} })
</script>
Create links that work with the script
Links that go to your web page with the aStore follow this pattern:
<a href='http://yourblog.blogspot.com/p/amazon-store-page.html?azdp=ASIN>Good Book</a>
Replace "affiliateID-20" with your own affiliateID and ASIN with the 10-digit product ID. Here's an example link that goes to the Real Tea aStore on this blog:
<a href="http://www.greeneteapot.com/p/real-tea.html?azdp=B0032A8P2K">Japanese Izu Matcha<\a> Japanese IzuMatcha
I hope this information is helpful to some of you!
0 comments:
Post a Comment