So, where do you paste that Amazon code you just copied? Many newbie Amazon associates have trouble pasting Amazon product links, banners, and widgets into Blogger or regular web pages. The number one mistake is pasting code directly into the Blogger Compose editor. If you're seeing raw HTML code after attempting to create a link or insert a widget into a post, that's the cause.
When pasting code you copied from Amazon link builders, position the cursor where you want to display the Amazon link or widget. Then switch to the HTML tab and paste! That's almost all there is to it. A few other code pasting glitches are described below.
If a simple text link is throwing off your layout because of a strange-looking square graphic, the 1-pixel tracking image plus your CSS style for in-post images is the usual culprit. If you use padding and a border around post images, it will make the 1-pixel tracking image stand out like a (square?) beacon!
The fastest fix is to delete the 1-pixel image. There are no adverse consequences of doing so. The tracking pixel image is for counting impressions. With Amazon, impressions are not a useful statistic because you don't get paid for them and you probably already have a better way to count visits to your site using Google Analytics or another service. See my older post on creating basic text links for more information about text links.
Alternatively, create a style for images that should not have padding and/or a border and add it at the bottom of your style sheet in the blogger template:
img .nopb {padding: 0; border: 0px none;}
Add the class to any image tag when you want to lose the padding and border:
<img class="nopb" src="myimage.jpg" alt="whatever" />
Another irritating problem is that Amazon link or widget code may cause validation errors. The most common cause of such errors, the unescaped ampersand, is easy to fix!
In links and widgets, change & to & to make the error disappear. For example, in a carousel widget, you might have an iframe something like this:
<iframe src="http://rcm.amazon.com/e/cm?t=yourTag-20&o=1&p=48&l=ur1&category=kindlerotating&f=ifr" width="728" height="90" scrolling="no" border="0" style="border:none;" frameborder="0"></iframe>
To make it validate, change the amperands in the query string (the stuff after the question mark) to &:
<iframe src="http://rcm.amazon.com/e/cm?t=yourTag-20&o=1&p=48&l=ur1&category=kindlerotating&f=ifr" width="728" height="90" scrolling="no" border="0" style="border:none;" frameborder="0"<>/iframe>
By "script block" I mean lines of code between <script> </script> tags, not a script tag that calls an external script using src="/path/to/script". Also, if you do have a JavaScript block, say for an Amazon Widget Source widget, use CDATA tags to indicate that code should not be parsed. For example:
<script>
//<!CDATA[[
the widget code would be here
//]]>
</script>
HTML5, which Blogger now uses, does not require that you close meta tags, break tags, image, or param tags. That is not the case with XHTML, which requires that all tags be properly closed. If you have a regular website that uses XHTML, make sure that such "void" tags are closed by a forward slash preceding the last right angle bracket.
Use the HTML editor all the time.
To link to a specific aStore category from a separate web page or site, it’s necessary to change the src (source) of the iframe “on-the-fly” by using a script. The target attribute of the iframe cannot be used when the link and the iframe are on different web pages.
This post contains instructions and a script to accomplish deep-linking into an aStore category. It builds on information in the post, Link to product pages in your Amazon aStore iframe on Blogger, and in a similar post for WordPress users.
1. First, please experiment on a draft copy of your aStore page in case something goes wrong! On the draft page, paste your aStore iframe tag. Edit the tag to add id and name attributes, as shown below. Doing this creates a hook that can be referenced in a script. The name attribute is needed by older versions of IE. Do replace yourTag-20 with your own associateID:
<iframe id="astore" name="astore" src="http://astore.amazon.com/yourTag-20" width="100%" height="1200" frameborder="0" scrolling="auto"></iframe>
2. If you’re not already using jQuery, add a <script> tag that calls the jQuery library in the <head> tag of your blogger or web page template. Add it after your meta tags and stylesheet links, and above any jQuery plugins (without a line break before the closing script tag):
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
</head>
3. Copy getURLparam.js from http://www.mathias-bank.de/jQuery/jquery.getUrlParam.js and paste the code into a text editor, such as Notepad. Save it as a backup copy named getUrlParam-original.js
4. Go to http://www.refresh-sf.com/yui/ and paste the same code into the big empty code box. Select File Type JS; check the box for "Minify only, no symbol obfuscation," and check the box for "Redirect output." Click the Compress button. Copy the output and paste it into a text file named getUrlParam.js
5. Upload getUrlParam.js to your server and add a script tag with it as the src below the script tag for the jQuery library. If you put the script in a folder named “scripts,” the tag would be: <script type="text/javascript" src="/scripts/getUrlParam.js"></script>
If that's too much work, paste the output into a <script> tag in the <head> tag below the script that loads the jQuery library.
6. Paste the following script below the other two on your aStore page, still in the <head> tag:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var newSrc = $(document).getUrlParam('azdp');
if (newSrc !== null) {
var n = newSrc.length;
if (n > 4) {
$('#astore').attr('src','http://astore.amazon.com/yourTag-20/detail/'+newSrc);}
else {
var qs = '\?_encoding=UTF8\&node='+newSrc;
$('#astore').attr('src','http://astore.amazon.com/yourTag-20'+qs);}
} })
//]]>
</script>
7. Test in your browser by creating a link that goes to your aStore test page, using a parameter for a category. Test a product ASIN as well to make sure the script works for both products and categories.
For example: http://www.greeneteapot.com/p/real-tea.html?azdp=24 (a category) or http://www.greeneteapot.com/p/real-tea.html?azdp=B0050QORMQ (a product)
WordPress users can use a PHP script to emit the appropriate iframe tag in a WP Page template. I’ve added that information in response to a comment on another site.
I wouldn’t go hog wild with external links into an aStore, but a few well-chosen links into important store categories will provide an extra level of functionality to your store promotions without creating a pile of html pages.
If all this is too daunting, the simple solution of having separate pages for some of your aStore categories works quite well. Each category has a special link with its unique node number in the query string (the stuff after the question mark). On each page, embed an aStore iframe with the appropriate category node as the aStore src attribute. To get the category node links, mouse over your category navigation widget and copy each URL OR edit your aStore, open each category and copy the Permalink.
Enjoy!
