Add an Amazon My Favorites widget to blogger

An easy way to add a short list of recommended books (or other Amazon products) to your blogger site is to create a My Favorites widget. Book cover images are served by Amazon, so there's little work involved beyond choosing the best and most fitting titles for your audience.

To make the widget, log in to your Amazon Associates account, select the Widgets tab, and click My Favorites. Add the products you want to feature to the widget, with short optional comments. On the next screen, edit the title of the widget, select details to show for each product, and choose a wide or narrow size depending on where the widget will be placed. To get a better feel for the way the widget will look on your site as you experiment with settings, select one of the preset themes under Color and Design. Preview the widget.

If need be, adjust widget size by clicking Customize size. Specify a custom width, number of columns, and number of rows. If the number of products in the widget exceeds the number of rows, paging is automatically added. That is, if you make a 1-column, 4-row widget with 8 products for your blog's sidebar, there will be 2 pages in the widget.

If the selected preset theme does not match the ambiance of your blog, click the "Customize it" option, which lets you tweak the colors. When you're happy with the results, click "Save".

Make sure you are signed in to blogger (in another tab or browser window) before you continue. Then complete the process back on the Amazon widget-builder page by clicking "Add to my web page". It's not a bad idea to copy and paste the code into notepad or your favorite text editor in case you need it later.

Now, here's the step that will make your life easier: Click the Add to blogger link.

The next screen you see is a form in your blogger account to help you add the Amazon code as a Blogger gadget. Nice!

1. Choose the blog in which the widget is to appear.
2. Click "Edit content" and change all the ampersands (&) in it to &. It's important to do this because blogger uses XHTML Strict in the theme doctype. If you leave unescaped ampersands in a link, your page will not validate and the widget may not display properly.
3. Click the "Add widget" button. The Amazon code is automagically added to a blogger HTML/Javascript gadget.

Almost finished! On the blogger Layout screen, drag the HTML/Javascript into your chosen location, such as the sidebar or footer. Then, preview your blog. To make changes to the gadget in the blogger Layout screen, click Edit in the lower right corner of the gadget placeholder. You may want to remove the title since the Amazon widget already has an embedded title.

Done!

Alternatively, you can sign-in to blogger and go to your Layout tab. Click Add a Gadget in the sidebar or other element, and select HTML/Javascript. Paste the gadget code, change all instances of & to & and save it.

An example of an Amazon My Favorites gadget is in this blog's sidebar.
Enjoy!

Open a link in a new window, Part 2

Part 1 ended with this long example of the DOM window.open() method, containing all the specifications for the location, window_name, size, position, and browser chrome in the link itself. Note that the parameters (stuff inside the parentheses) should be on one line; they're wrapped here to fit the space:

<a href="http://destination.html"
 onclick="var newWin = window.open(this.href,
'mywin','right=0,top='40',height='500',
menubar='yes',scrollbars='auto',
resizable='yes'); newWin.focus(); 
return false;">Destination Title</a>

For more info on all the available parameters, see the w3chools.com article on HTML open()

The example code above is awfully long. What if you have a list or database of 500 product items that the user might randomly select for display in this handy single window? It would be better to store all the window.open() parameters in a separate script than to type them in each link. Less maintenance, smaller file size!

Use Javascript to open a new, reusable window

There is some additional code in the script below that makes it more robust. I can't take credit for it and I can't identify my original source because the same code is found in many scripts and tutorials on the web. I'm still grateful for it, though in a diffuse gauzy way.

In Javascript, everything following // is a comment. You can remove all the comments if you use the script, but I recommend keeping the commented opening and closing CDATA lines if you want your XHTML document to validate.

<script type="text/javascript">
//<![CDATA[
var newwindow = '';
function openwin(url) {
  // Check to see if newwindow is already open.
  // If so, display the url in it.
  if (!newwindow.closed && newwindow.location) {
      newwindow.location.href = url;
     } else {
  // If it is not open, open it.
  // The next 3 lines of code contain the window
  // parameters and are wrapped to fit this post.
  // Glue them together.
    newwindow=window.open(url,'newWin','right=0,top=40,
    height=500,width=500,menubar=yes,toolbar=yes,
    scrollbars=auto,resizable=yes');
  // If there is no parent window, use blunt force
  if (!newwindow.opener) newwindow.opener = self;
     }
  // If focus method is allowed, let newwindow grab it
  // and magically appear on top, even from the Taskbar
     if (window.focus) {newwindow.focus()}
  return false;
}
//]]>
</script>

Phew!

This is what the window variables and specs mean:

• The url is a variable. When clicked, each link specifies it's own url (this.href) as the value.
• window name is 'newWin', but it could be anything, even 'name'
• Open the new window 0px from the right and 40px from the top
• Make the window 500px high and 500px wide
• Display the browser's menubar,toolbar,scrollbars when needed, and note that you can use 1 instead of yes, and 0 instead of no
• Allow user to resize the window

Now, once the script is in the <head> of your document, you must add some code to each link that calls it:

<a href='http://destination.html'
 onclick='return openwin(this.href)'>

That's it! The code block inside (not including) the <script> tags can be moved to an external file with a .js extension. Keeping scripts separate from HTML code means that you can use the same script with many HTML files. Remove the CDATA lines if you do this and call the script like this, in the <head> of your document:

<script type="text/javascript" src="yourFilename.js"></script>

For more help, just Google javascript window.open. Enjoy!

Open a link in a new window, Part 1

Generally, it's best to let users decide if they want to open a link in a new browser window or tab. For some tasks, such as viewing selected items in a library's new books list or a product catalog, it's more convenient for the user to open a single reusable window than to go back and forth repeatedly. There are two basic methods for opening a new window, depending on the doctype of your web page:

1. Add the target="_blank" attribute to a link
2. Access the DOM window object with window.open()

Target Practice

The target attribute may still be used with HTML documents that do not specify a doctype, HTML doctypes, and XHTML Transitional, but is not allowed in XHTML strict. Even with XHTML Transitional, it would be better to let target fade into the West. Usage is simple (line wrapped to fit):

<a href="http://destination.html/" target="_blank">
Link title</a>

Let DOM open the window

Using the DOM lets you control the behavior of the link with optional parameters. To simply open a new window (IE) or tab (Firefox), attach the open() method to the link's onclick event (keep open() parameters on one line, wrapped here to fit):

<a href="http://destination.html"
 onclick="window.open(this.href); return false;">
Link Title</a>

To open a new window that grabs focus (is always on top) and can be reused (because it has a name - 'mywin') to prevent a pile of open windows:

<a href="http://destination.html"
 onclick="var newWin = window.open(this.href,
 'mywin'); newWin.focus();
 return false;">Destination Title</a>

To open a new reusable window and specify its size, position, and amount of browser chrome, add optional parameters (keep parameters on one line, wrapped here to fit space):

<a href="http://destination.html"
 onclick="var newWin = window.open(this.href,
'mywin','right=0,top='40',height='500',
menubar='yes',scrollbars='auto',
resizable='yes'); newWin.focus(); 
return false;">Destination Title</a>

For more info on all the available parameters, see the w3chools.com article on HTML open() The last example is getting long and complex, so if you have a list of links that should remain visible while the user selects and views item information, it would be preferable to move the repetitive window.open() specifications to a separate javascript in the <head> of the document or to an external script file. I'll post an example in Part 2 of this topic.

Making basic Amazon associate text links

Amazon provides extensive support for adding product links to associates' web pages, including: the Site Stripe toolbar for signed-in users, product images, and link wizards with copy and paste instructions. To someone who is familiar with the basics of HTML and the anatomy of a link, the instructions are understandable and easy to implement.

Nevertheless, there is a steady stream of questions from newbies about this most basic task on the Associates Discussion Boards. It's really not difficult unless the vocabulary of web building is unfamiliar to you. If that's the case, Amazon's instructions will have some mysterious holes that need filling. I hope this post provides some informational spackle for those holes.

First, turn on Site Stripe
To do this, sign-in to your Amazon associates account and click Links & Banners. Click the Site Stripe image, check all the options, then click "Turn On Site Stripe." You are the only one who sees this toolbar, and only if you are logged in to Amazon.com. The toolbar buttons you will use the most are "Link to this page" and "Discussion Boards."

Now, when you find a product page on Amazon that you want to link to, click the Link to this page button. It will automatically open the Customize and Get Link form on the Associates web site. Select Text Only (basic display) to make a text link. Click the Highlight HTML button, copy the code (CTRL-C) and paste it into notepad (CTRL-V) to keep it handy, or you can paste it directly into your web page's HTML or code view (not the WYSIWYG design view).

Important: Make sure you paste the code where you want your link to appear, within the opening and closing <body></body> tags. If you make a mistake, delete the new code, return to your HTML editor's design view, and click on the spot where you want the link. Return to code view and paste again.

The link will work, but it's very long, and in addition to the link, contains a hidden image for tracking purposes. Here's an example (all one line, but wrapped to fit this post):

<a href="http://www.amazon.com/gp/product/0596802447?
ie=UTF8&tag=greehaml-20&linkCode=as2&camp=1789&
creative=390957&creativeASIN=0596802447">CSS:
The Missing Manual</a><img 
src="http://www.assoc-amazon.com/e/ir?t=greehaml-20
&l=as2&o=1&a=0596802447" alt="" 
style="border: none !important; margin: 0px 
!important;" border="0" width="1" height="1" />

The code displays this link on your web page: CSS: The Missing Manual

If you have a code-heavy web page, or just want the shortest possible link that works, read on.

Short product links that work
First, there is an alternative to the long link code created by the link wizard. The shortest possible link that includes your Amazon associates Tag ID is easy to construct and usually works perfectly. You always test every link you add to your website, right?

You could delete everything after your tagID in the link generated by the link wizard to start making a short working link (all one line, but wrapped to fit):

<a href="http://www.amazon.com/gp/product/0596802447?
ie=UTF8&tag=greehaml-20"

Note that this fledgling link conveniently contains the ASIN (product ID) and your associate's tagID. Complete the link with an angle bracket (>), then add the Product title and the closing </a> tag (one line but wrapped to fit):

<a href="http://www.amazon.com/gp/product/0596802447?
ie=UTF8&tag=greehaml-20">CSS: the Missing Manual</a>

Ah, this version is more readable!

To make the link as short as possible, you can replace gp/product/ with dp/, omit ie=UTF8&, and add a / forward slash before the question mark to get this (one line, wrapped to fit):

<a href="http://www.amazon.com/dp/0596802447/?
tag=greehaml-20">CSS: the Missing Manual</a>

That's as good as it gets.

The most basic link format that works with your tagID, with information unique to each link is:

http://www.amazon.com/dp/ASIN/?tag=yourTagID

Some successful associates have commented that they consistently use the short form of these text links on their websites. They seem like happy folk and nothing has fallen out of the sky on them. I would conclude, though not out of long experience with Amazon, that it's a matter of personal preference.

If you decide to use short links often, a sainted person has made a bookmarklet that you can install in your browser. To use the bookmarklet, simply go to the amazon page you want to link to and click the bookmarklet to create the link code. Get the bookmarklet.

Photo credit for green teapot image

I derived my blog header image from an amazing photo by the artist, Doug Herren, of his industrial-strength green clay teapot. The photo is part of a set featuring his "industrial clay vessels and pedestals and more" in Libby Rosof's flickr photostream

Herren's works were a featured exhibit at the Snyderman Gallery in Philadelphia at the time this post was written. The gallery pages that were originally linked in this post are no longer available.

The image is used in accordance with the CC BY 2.0 generic attribution license which permits "share and remix" and the artist graciously granted permission for this use of the photograph.

Privacy Policy

Personal Information Collected on this Blog
No personally-identifiable information is solicited or collected from web visitors. If you choose to include your name and e-mail address in a comment, it would become available to other blog readers. If you are signed-in to your Google account when replying to a post, a link to your blog address is created unless you sign out first.

Anonymous Information Collected on this Blog
Anonymous data is collected by Google to provide aggregate statistics about visitors and usage. You, as an individual user, remain anonymous. Such data may include pages visited, your IP address, browser type, how you landed, whether via search engine results or a direct link, and how long you stayed. Such data is used for marketing purposes.

Cookies
This blog uses third party advertising companies to serve ads on blog template pages or blog posts. Google uses a DoubleClick DART cookie to serve ads to you based on your visit to this site and other sites on the Internet. If you would like more information about this practice and to know your choices about not having this information used by Google, click here. Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy.