Paste Amazon code in Blogger

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.

Paste code in the HTML editor

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.

Get rid of the strange square box in lnks

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" />

Make validation errors go away

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&amp;o=1&amp;p=48&amp;l=ur1&amp;category=kindlerotating&amp;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>

Close any open tags

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.

The Ultimate Solution

Use the HTML editor all the time.