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.

So when Chris mentions JavaScript badges for del.icio.us, I think of Ed Eliot’s PhpDelicious or how to get similar results in WordPress. Naturally when he had the splendid idea to add captioning to YouTube videos with Google’s JavaScript API, I asked myself if there wasn’t a better way. There is, but to my surprise neither YouTube nor Yahoo! Video take advantage of that capability:

1. It’s common practice to implement text content in Flash via XML.
2. DFXP is a W3C XML standard for captioning videos.
3. There are free tools like MAGpie for creating captions, and they all support DFXP.
4. If YouTube or Yahoo! Video would allow users to upload and attach a DFXP file to a video, it would become dead easy for anybody to caption it. Not only for the filmmaker, captioning could be crowdsourced!

Just anticipating Joe Clark’s inevitable (and justifiable) objection: of course captioning is not an easy thing that anybody can do, to do it right it requires people with special training. But considering the number of videos on those platforms the only affordable and practical solution to provide any captioning at all is crowdsourcing. That can also be applied to the control of quality, accuracy, or reporting abuse.

Of course this would enhance primarily accessibility, but the XML files would further help search engines to index video content. And their marketing people would love such a feature for the positive PR!

Well, I submitted the suggestion both to Google and Yahoo!, you can vote on the Yahoo! Developer Network for it (Google is more closed-lipped). I’m curious who will be the first to offer that feature …

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.