Hack 62 Create Banner Ads for Your Site

Amazon banner ads and product recommendation ads are a quick way to link into the associates program.

Banner ads are a common way to advertise on the Web, and if you want to add them to your site to make some money for your site-building efforts, the associates program is an easy way to make that happen. Amazon has dozens of premade buttons and banners you can add to your site (http://www.amazon.com/assoc-art). You can save any of the images locally, and then build an appropriate associate link [Hack #59] to Amazon for the banner.

For example, you could take a "camera & photo" graphic (Figure 5-5) and save it to your hard drive as camera_banner.jpg.

Figure 5-5. Amazon "camera & photo" banner

You would then create an associate link with a redirect URL to the Camera & Photo section (browse node 502394). Putting it all together would look something like this:

<a href="http://www.amazon.com/exec/obidos/redirect?tag=insert associate [RETURN] 
tag &path=tg/browse/-/502394 /">
<img src="camera_banner.jpg" width="467" height="58" border="0">
</a>

While perhaps not as effective as linking to individual products, adding a banner like this to your site takes only a few seconds. There are many banners and graphics to choose from on Amazon's site, all arranged by category. Finding one appropriate to your site's content shouldn't be hard.

62.1 Product Recommendation Banners

If you don't have time to search out and link to specific products related to your site, you can let Amazon's recommendations engine do the work for you. Amazon has a simple URL-based system where you provide a subject area or keyword and they provide a banner ad with targeted product recommendations.

Amazon can generate the code for keyword banners for you. From the associates central extranet (http://associates.amazon.com), click "Build-A-Link" from the top menu, then "Build some" next to "Keyword Links." This will create all the code you need, which you can copy and paste into your site. You can also preview all of the banner styles available?from vertical banner ads to boxes of varying size. Another option called "Individual Item Links" lets you create a box that links to one specific product, complete with an image, the price, and a "Buy from Amazon.com" button.

If you'd like to work with the banners programmatically, though, you'll need to know the URL format for creating them. The base URL format looks like this:

http://rcm.amazon.com/e/cm?t=insert associate tag&l=st1&search=[RETURN]
insert keyword&mode=insert product catalog&p=insert ad style&o=1&f=ifr

As you can see, the key variables in the URL are:

search: The keyword or subject area.
mode: The product catalog to show the items from (e.g., books, magazines, music). There's a good list in [Hack #64].
p: The banner ad style (or placement). Each placement is a value from 1 to 17, with styles 8-16 showing product recommendations. The rest are generic graphic banners.

Say you run a site about French cooking and you'd like to add an Amazon banner ad. You could create one with the keywords French cooking, showing books, in banner style 13.

http://rcm.amazon.com/e/cm?t=insert associate [RETURN] 
tag &l=st1&search=French%20cooking &mode=books &p=13 &o=1&f=ifr

This URL produces the banner shown in Figure 5-6 with specific product recommendations.

Figure 5-6. Product recommendation banner for the keywords "French cooking"

Each time the banner is requested, different recommendations will appear, rotating through Amazon's top recommended items for that particular keyword. If you'd like to expand the products recommended even further, you may want to use some scripting to rotate through several keywords and modes [Hack #63].

62.2 Customize Product Recommendation Banners

You can't change the static Amazon images that are part of the banners, but you can change the background color, link color, and text color of the section displaying books. This lets you tailor the ad to the design of your site. As mentioned earlier, Amazon provides a nice interface called Build-A-Link for customizing the banners and generating the necessary code, but you can also play with the URL to customize the results. The following variables set colors:

bg1: The background color as a hex color value.
fc1: The text color as a hex color value.
lc1: The link color as a hex color value.

A hex color value is six-character alphanumeric representation of color used for web pages. #000000 is black and #FFFFFF is white, with hundreds of variations in between. When using hex color values in recommended product banner URLs, omit the # sign.

Expanding on the previous example, you can set the colors of the French cooking banner to match a site with black background:

http://rcm.amazon.com/e/cm?t=insert associate tag &[RETURN]
l=st1&search=French%20cooking&mode=books&p=13&o=1&f=ifr&[RETURN]
bg1=000000 &fc1=FFFFFF &lc1=FF6600

This URL yields the banner in Figure 5-7.

Figure 5-7. Product recommendation banner with customized colors

Another variable you can set is lt1. This sets the name of the target window. By setting this value to _blank, product pages will always open in a new window. Otherwise, they open in the current window.

62.3 Add the Product Recommendation Banners to Your Site

Each banner isn't a single image?it's made up of images and HTML. But you can include them easily with an <iframe>. An HTML iframe (inline frame) is similar to a standard frame, but it's included seamlessly in the page. Just include the banner's URL in the src attribute of the iframe. You can also include one of the standard banners with a link in between the <iframe></iframe> tags for browsers that don't support iframes:

<iframe marginwidth="0" marginheight="0" width="468" height="60"
   scrolling="no" frameborder="0"
src="http://rcm.amazon.com/e/cm?t=insert associatetag&l=st1&[RETURN]
search=o'reilly&mode=books&p=13&o=1&f=ifr">

   <a href="http://www.amazon.com/exec/obidos/redirect-home/[RETURN]
insert associate tag">
   <img src="http://g-images.amazon.com/images/G/01/associates/[RETURN]
books2000/clock468x60a3.gif" 
        width="468" height="60" border="0" alt="Shop at Amazon.com">
   </a>
</iframe>

You'll need to adjust the width and height of the iframe to fit the size of the banner Amazon creates. Once it's all together, it embeds easily in any HTML page, as shown at the top of the page in Figure 5-8.