Starting August 15th, the AWS Product Advertising API, as the former E-Commerce Service is now called, will only accept signed requests. The plugin will stop working if you don’t update. Thus I needed to re-engineer a few functions of my WordPress Amazon Machine Tags Plugin.

What you need to do is:

• Update to version 3.0 of the plugin.
• If you didn’t adapt any files just overwrite them. If you customized the CSS or XSL files, take care that you don’t overwrite yours. Also the XSL namespace must reflect the API version used in the plugin (2009-07-01), i.e. xmlns:aws= "http://webservices.amazon.com/ AWSECommerceService/ 2009-07-01"
• Get your Secret Access Key in addition to your existing Access Key ID. Your future requests will be signed using the secret key.
• Go to the plugin’s admin interface and enter the secret key.
• Some people experienced a few minutes where the items didn’t show up, instead they got the untransformed XML code. After a few minutes the problem resolved itself. My guess is that Amazon cached the XSL files, the versions mismatched, therefore the XML wasn’t transformed. That’s why I renamed the XSL files so that the new ones will be used. If you want to be sure, also delete the cached files amtap-aws-items-for-post-*.html in your wp-content/cache directory.

If you encounter any problems with the update, re-install the old version and let me know what went wrong so that we can fix it together until August 15th.

You can also support the plugin by translating it. There’s an empty PO file in the package. With a tool such as Poedit it’s fairly easy to translate everything. Thanks.

• A link to Google Maps when JavaScript is disabled.
• Support for the Google AJAX API Loader.
• Using the small map control.
• Keyboard accessibility for all control elements within the map.

As a fallback without JavaScript — because people disable it, because their mobile device doesn’t support it, or because it gets filtered by corporate proxies — Patrick used the little known Google Static Maps API, but for some reason he missed adding the link to Google. Here is the fix:

1. <div id="map">
2. <a href="http://maps.google.com/maps ?f=q&amp;output=html &amp;q=50.110950+8.684666" title="Google Maps">
3. <img src="http://maps.google.com/staticmap?hl=en &amp;center=50.112267,8.678384 &amp;markers=50.110950,8.684666,red &amp;zoom=15&amp;size=500x300 &amp;key=[Your API Key]" alt="City map of Frankfurt" width="500" height="300" />
4. </a>
5. </div>

Then I changed how the map is embedded. As it seems that the API loader is more current, I preferred that way:

1. <script type="text/javascript" src="http://www.google.com/jsapi?key=[Your API Key]"></script>
2. <script type="text/javascript" src="/js/accgmap.js"></script>
3. <script type="text/javascript">
4. google.load( 'maps', '2', { 'language' : 'en' } );
5. google.setOnLoadCallback( GMAP.initMap );
6. </script>

Using the small control elements is trivial: SmallMapControl(). The next thing I wanted to change was keyboard access to all controls, in particular for the map type, i.e. Map | Satellite | Hybrid. Patrick refers to an id, but I found that all relevant controls have a title, so I just checked for that attribute. I also dropped setting the style attribute in JavaScript as that belongs in the CSS file. His original function GKeyboardPatch() now looks like this (note the while loop for a slightly better performance):

1. GKeyboardPatch: function( map ) {
2. var button, divs = map.getContainer().getElementsByTagName( 'div' );
3. var i = 0;
4. while ( divs[i] ) {
5. if ( divs[i].getAttribute( 'log' ) || ( divs[i].getAttribute( 'title' ) && divs[i].getAttribute( 'title' ) != '' ) ) {
6. button = document.createElement( 'button' );
7. button.setAttribute( 'value', divs[i].getAttribute( 'title' ));
8. divs[i].appendChild( button );
9. if ( divs[i].getAttribute( 'log' )) { // only control buttons
10. // override the IE opacity filter that Google annoyingly sets
11. divs[i].style.filter = '';
12. // should really set to 'transparent'
13. divs[i].style.background = 'url( http://www.google.com/ intl/en_ALL/mapfiles/transparent.png )';
14. }
15. }
16. i++;
17. }
18. }

Now remember I said I’d rather separate style and behaviour, so here are a some lines of CSS with the setting of width and height for the #map being most relevant, otherwise it will collapse:

1. #map {
2. height: 300px;
3. overflow: hidden;
4. position: relative;
5. width: 500px;
6. }
7. #maps-static, #maps-static img {
8. display: block;
9. }
10. #map span.note {
11. display: none;
12. }
13. #map button {
14. background: transparent;
15. border-style: solid;
16. border-width: 0;
17. cursor: pointer;
18. height: 100%;
19. left: -2px;
20. margin: 2px;
21. overflow: hidden;
22. padding: 2px;
23. position: absolute;
24. text-indent: -100em;
25. top: -2px;
26. width: 100%;
27. }
28. #map a:focus, #map a:active, #map button:focus, #map button:active {
29. outline: 2px dashed #61bf1a;
30. }

And that’s it, thanks again to Patrick for the solid foundation I built upon. Now download the JavaScript code and try to tab through the map below.

Actually on the other website I extracted hCard microformats from the page as well and displayed the addresses on the map, but I was lazy and used jQuery. I thought it doesn’t look well here mixed with Patrick’s clean DOM scripting, but feel free to take it from the original website.

What are the alternatives? Using background-images with off-screen text? Bad code:

1. <a href="foo" class="button">
2. <span>Alternative Text</span>
3. </a>

1. a.button, button {
2. background: url(foo.gif) 0 −26px no-repeat;
3. display: block;
4. height: 52px;
5. overflow: hidden;
6. position: relative;
7. width: 150px;
8. }
9. span {
10. left: −9999px;
11. position: absolute;
12. top: auto;
13. }

That’s a bad idea with accessibility issues. Screen readers will be able to read the text, but if somebody with low vision has high-contrast custom stylesheets, it is likely that the background-image won’t be displayed. Still the alternative text will be invisible off-screen, so the link or button becomes unusable.

A better solution

Now Google’s accessibility specialist T.V. Raman explained their idea for replacing images with sprites. Here are screenshots of Google search results with images, and with background images disabled:

Google puts the alternative text behind the background image simply by attaching it on the span element, not the anchor. So when CSS or background images are turned off, the text just reappears.

1. <a id="logo" title="Go to Google Home" href="http://www.google.com/">
2. Google
3. <span></span>
4. </a>

1. #logo {
2. display: block;
3. height: 52px;
4. overflow: hidden;
5. position: relative;
6. width: 150px;
7. }
8. #logo span {
9. background: url(foo.gif) 0 −26px no-repeat;
10. height: 100%;
11. left: 0;
12. position: absolute;
13. top: 0;
14. width: 100%;
15. }

There’s only an issue if you have a lot of alternative text, perhaps combined with text zoom, so that it doesn’t fit in the reserved space. But I can live with that.

Congratulations to Google for this ellegant solution, and it’s so simple! Why didn’t I think of it?

1. Let’s start with the simplest transformation, pulling the number of people who have bookmarked your post on del.icio.us. There are two components: one line of PHP code to insert the result in the footer of a page (found in template file single.php), and a few lines of XSLT for the transformation:

   1. <?php inlineRSS(
   2. 'delicious-incoming-' . $id,
'http://feeds.delicious.com/rss/url?url=' . get_permalink(), 60, 'inline-rss-linked.xslt');
   3. ?>

   The function inlineRSS() takes four arguments: the filename where you want to cache the result, the feed URI, the time to cache in minutes, and the filename of the transformation stylesheet. The latter has to be in the same directory as inlineRSS.php (the plugin).

   1. <xsl:template match="/rdf:RDF">
   2. <xsl:if test="count( rss:item ) &gt; 0">
   3. Saved by <span class="linked-in"><xsl:value-of select="count( rss:item )" /></span> other people.
   4. </xsl:if>
   5. </xsl:template>

   Download: inline-rss-linked.xslt

2. In the sidebar of this blog you see a section “current reading” which displays my latest five del.icio.us entries I have tagged with show-in-blog. Because I’m too lazy to add a description on del.icio.us there is just the title and the tags, minus “show-in-blog.” Here is the code for sidebar.php:

   1. <?php inlineRSS(
   2. 'delicious-links',
'http://feeds.delicious.com/rss/ your-delicious-name/show-in-blog', 60, 'inline-rss-delicious.xslt');
   3. ?>

   Of course “your-delicious-name” needs to be replaced.

   Download: inline-rss-delicious.xslt

3. Finally there is a list of my upcoming events, including microformatted semantic information. The XSLT is a little longer, but not really complicated. You just need to replace the upcoming ID with your own.

   1. <?php inlineRSS(
   2. 'upcoming',
'http://upcoming.yahoo.com/ syndicate/v2/ my_events/ 123456', 60, 'inline-rss-upcoming.xslt');
   3. ?>

   Download: inline-rss-upcoming.xslt

I’d like to point out that this is certainly not the only, and perhaps not even the best way to implement feeds into your site, but it’s pretty convenient once you’ve installed inlineRSS.

Chris Heilmann approaches the issue with a client side plugin to distribute tasks from the server to the client. His JavaScript is insofar unobtrusive as the list of inline del.icio.us links is replaced with an external link to his del.icio.us category, but then you give away the responsibility that the list is accessible as well. That’s why I would prefer a server side solution.

Ed Eliot has written a script to create a very pretty server side del.icio.us badge that I highly recommend, but it’s not as universal as the inlineRSS plugin, and it’s not a WordPress plugin to begin with (the same applies to his neat SimpleRSS script). But both Chris’ and Ed’s solutions are decent alternatives to take into consideration.

In this article

• Introduction
• Installation
• FAQ
• Changelog
• Discussion

Introduction

I always wanted to implement one thing since I started the blog: a simple inclusion of Amazon items. I didn’t want to search through results that existing plugins provided. When I wrote about something like a book, I already used machine tags to identify the subject! So I found the inspiration to write my first real WordPress plugin: Amazon Machine Tags.

Here’s what it does:

1. It identifies any tag in the machine (or triple) tag form book:isbn=1234567890 or amazon:asin=1234567890. That works with native tags from WordPress 2.3 and later, Bunny’s Technorati Tags, Jerome’s Keywords, or as inline text (see below).
2. Then it gets the item information and a thumbnail image from the Amazon Web Services API. That’s the real thing including prices and such, no cheap RSS feed.

3. The item(s) are displayed in the sidebar or in a blog article with a link to the visitor’s best match (if the ip2country plugin is installed) or a default Amazon shop of your choice. See examples in the sidebar.

   The “best match” is based on the visitor’s location. If she is from one of the six countries where Amazon has shops, that locale is chosen. If he is from Europe, the preferred language is matched to either France, Germany, or UK, with UK as default. If it’s neither a locale nor Europe, amazon.com is the default. Based on your location, do you think that’s a reasonable approach?

   Note that some items, like books in any language other than English, are only available from certain locales, so a visitor from the UK might not see German books you recommend.

4. If you are an Amazon Associate for that locale, your Associate ID is included automatically.

You can edit the server-side, semantic and valid XHTML output via XSLT, change the CSS, or translate the admin interface through .po files. Actually Amazon loads the XSLT file from your server and processes it on theirs, so you shouldn’t block HTTP access to the plugin directory, and localhost doesn’t work either.

Results can be cached for anything between one second and one hour, so you don’t need to worry even when you run an extremely popular blog.

The YUI Connection Manager is included to verify the Access Key in the admin interface via REST and unobtrusive AJAX.

I hope this little piece of software serves you well and you like it.

Installation

1. Get the latest version of the plugin from the WordPress site.
2. Upload the whole amazon-machine-tags folder into the /wp-content/plugins/ directory.
3. Activate the plugin through the “Plugins” menu in WordPress.
4. Get an Amazon Web Services Access Key.
5. Create a wp-content/cache/ directory with permissions set to 755, or 777 if you create the directory as root user.
6. Put <?php AMTAP::get_items(); ?> in your sidebar and start using machine tags.
7. Edit amtap-blog.css if you like.
8. If you want to use tags in a blog article, write [amtap book:isbn=1234567890] or [amtap amazon:asin=1234567890]. Thanks to paulinepauline for that idea.

Frequently Asked Questions

Does it work in the sidebar on Pages, too?

Posts have tags, pages don’t, so it doesn’t work on those by default. But there’s a plugin called tags4page that enables tags for pages. Works like a charm.

Is there a limit of how many items can be requested?

Yes, Amazon has a limit of 10 items per request. Since they are separate requests, you can use a maximum of 10 items in the content plus a maximum of 10 in the sidebar.

Would it be possible to cache the images?

Technically it wouldn’t be a problem, but the Amazon Web Services license explicitly forbids caching of images (see 5.1.10). Sorry.

I need to a larger thumbnail (medium), but can’t seem to find a place to edit the size of the image being requested.

The image size can be edited in the XSLT. The original result is a XML file that is transformed by Amazon using your local copy of amtap-html-sidebar.xsl and amtap-html-content.xsl, respectively. Replacing every occurance of .//aws:TinyImage with .//aws:MediumImage should do the trick.

You can view the original XML when you activate the “debug” option in the admin interface so that the request string is printed as a comment in the sidebar’s source code. XSLT is a very powerful tool, and there’s a lot more in the XML, for example customer reviews.

Are all options really required?

No. The only required field is the Amazon Web Services Access Key. You can leave the others, they are set to defaults then.

Changelog

• 3.0 (2009-07-31): Added signed requests for the new Amazon authorization requirement. Updated the API version to 2009-07-01 (please note: if you use your own XSL files, you must update the version in the XML namespace URL). Updated links.
• 2.0 (2008-07-18):
  1. Added fields for editing the sidebar headline, link target, and displaying rating stars.
  2. Added an error message if the plugin is run from a private IP address space like localhost.
  3. Changed priorities for price selection, they are now: LowestNewPrice, ListPrice, first offer, LowestUsedPrice.
  4. Added support for the display of an artist name.
  5. Added rating stars.
  6. Fixed EAN numbers with a dash.
  7. Fixed cutting of titles after a period.
  8. Changed CSS and XSL files. Take care when you edited those.
• 1.1.3: Changed amtap-admin.css and amtap-admin.inc.php to make the admin interface look prettier with WordPress 2.5.
• 1.1.2: Fixed a bug in amtap.php when there are no other tags but default tags.
• 1.1.1: Fixed the sort order of inline items, a bug for returning an error message when the cache file is not writable, and added Amazon’s limit of 10 items per request.
• 1.1.0: Fixed the display of inline tags on the home page. Improved regular expression for filtering inline tags.
• 1.0.6: Fixed a bug introduced through the new default items function when there were no items to be displayed in the sidebar.
• 1.0.5: Added an option for default items on every page. Changed amtap-html-sidebar.xsl to sort items in the order of the request.
• 1.0.4: Bugfix for replacement of dollar characters in content. Also content items are now cached separately.
• 1.0.3: Fixed the display of inline tags on category pages.
• 1.0.2: Changed the plugin path from amtap to amazon-machine-tags for consistency with the file structure in the zipped file.
• 1.0.1: Bugfix for native WordPress tags.

The presentation is now available for download in English or German under a Creative Commons license, so you can re-use material as long as you quote me.

Let’s face it: all of us have heard the phrase “blind people are not our target group,” either from clients or colleagues. There are a few noble souls who actually care about other people’s needs, but business is mostly about money.

So I explained how businesses lose money by ignoring accessibility. Because accessibility is not only about blind people: it’s about color blind, about old people, young people with learning disabilities, or people who are not fluent in a language. Fundamentalists will deny, but there’s also a close relation to device independence.

You may decide to ignore “a few disabled,” but you cannot ignore half of the population: accessibility is becoming a social and economic imperative.

You won’t believe how much myth and misinformation is out there. Some say it’s deprecated. In fact it never was. It is part of XHTML 2 and XHTML Basic, and there is a target module in XHTML 1.1, the modularized version of XHTML. The attribute is not included in HTML 4.01 Strict and XHTML 1.0 Strict because it was then considered to be related to frames and iframes, but it’s not marked “deprecated.” It was simply not in the core set of modules for the XHTML 1.1 driver.

Some people argued it’s a behavior and thus belongs into unobtrusive JavaScript. But then clicking on a link to get to another page is also some functionality, and nobody would think of replacing anchors with loads of bloated script to simulate such a basic behavior.

So I ended up extending the extensible with a customized DTD:

1. <?xml version="1.0" encoding="iso-8859-1"?>
2. <!-- Bring in the XHTML 1.1 driver -->
3. <!ENTITY % xhtml11.dtd
4. PUBLIC "-//W3C//DTD XHTML 1.1//EN"
5. "http://www.w3.org/TR/xhtml11/ DTD/xhtml11.dtd">
6. %xhtml11.dtd;
7.  
8. <!-- Bring in the Target Module -->
9. <!ENTITY % xhtml-target.mod
10. PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"
11. "http://www.w3.org/TR/ xhtml-modularization/DTD/ xhtml-target-1.mod">
12. %xhtml-target.mod;

However, now I have to bid farewell to that bizarre old friend: the working draft of XHTML 1.1 Second Edition includes the target module in the core set, finally. I’m relieved because tinkering with DTDs is a pain, but it had style …

Note that in the current version target is not yet included in XHTML 1.1 Schema, but I have been assured it will definitely be in the final version.

Parsing JavaScript freezes the browser. Therefore put CSS in the head and JavaScript near to the </body> so that it is parsed when the page has been rendered.

The arch enemy of performance are HTTP requests. Many browsers still can’t handle more than two or four requests at a time. Keep the number of files down, your website will be faster.

There are several techniques with the aim to reduce the number of files:

1. “A single large file is fastest.” (Nate Koechley) That’s why Yahoo! apparently has such an amount of inline CSS. They found out browser caching is not as effective as they thought, in particular not on a user’s start page. So they deliver “inline” CSS. Actually writing inline CSS is a maintenance nightmare, but delivering CSS content inline doesn’t mean the files can’t have separate lives on the server: concatenate the files with a server side technique of your choice.

   Update: A couple of months later Nate explained that further: when your page is likely to be a user’s start page, caching plays a minor role, thus “inline” CSS is faster. Otherwise use external files, aggregate them, and make sure they are cached (see below).

2. Enforce caching. Another IE bug prevents image caching. Add the following to your .htaccess, httpd.conf or vhost.conf settings:

   1. <IfModule mod_expires.c>
   2. ExpiresActive On
   3. ExpiresByType image/jpg "access plus 1 day"
   4. ExpiresByType image/jpeg "access plus 1 day"
   5. ExpiresByType image/gif "access plus 1 day"
   6. ExpiresByType image/png "access plus 1 day"
   7. </IfModule>

3. Reduce the number of background images with techniques like CSS Sprites or Sliding Doors. Instead of four images of rounded corners you only need one and get the mouseover state for free! The green download button on mozilla.com is based on that technique. And Yahoo! uses CSS Sprites to combine a huge number of icons.

   

   Please note this approach is only for decorational background images that degrade gracefully. It’s not for img elements. Be careful when you use it for foreground images. And if text comes as a graphical representation, it can become inaccessible for screen reader users, zoom readers, or people with stylesheets switched off. Use real text instead.

   Also note changing the background-position causes IE6 to flicker, related to the caching bug above. To avoid it, simply add the following:

   1. <script type="text/javascript">
   2. try { document.execCommand( "BackgroundImageCache", false, true); } catch(e) {};
   3. </script>

4. Aggregate files. Ed Eliot wrote a nice script to merge JavaScript or CSS files, bonus respect for the advanced versioning and caching features.

   But remember the cases when it doesn’t make sense to merge CSS files: your IE bugfixes still belong in conditional comments. If you use the @import rule to filter antique browsers from getting advanced styles, you can’t drop it. And if you want to merge stylesheets for different media (e.g. print), make sure the code is enclosed in something like

   1. @media print {
   2. /* style sheet for print goes here */
   3. }

   In an updated version Ed added JSMin to strip comments and excess whitespace. JSMin works like a charm for JavaScript files. But it cuts a few space characters too much so that the syntax of CSS selectors changes therefore for now I have abandoned the idea to compress them too. See Jens Meiert’s comment below for a recommendation to minimize CSS.

   His original code requires the C version of JSMin with PHP safe_mode turned off. If you prefer a pure PHP version, get the PHP version of JSMin and my adapted version of the script.

I’m still in awe how fast one of my own websites became! Thanks to the guys at Yahoo! for the inspiration and for most of the research this article is based upon. Even JSMin was written by an employee of Yahoo! Speaking about Yahoo! employees: Chris, I hope there are still enough topics for your Vitamin article. I wanted to write about performance anyway, and to my surprise I read yesterday that you have similar plans. See ya in Paris.