Microformats Bookmarklet

Inspired by John Hicks microformats Safari mock, it was quickly apparent that this (or a version of this) functionality was possible through a bookmarklet.

Bookmarklet

To use the bookmarklet, drag the link below on to your bookmark toolbar:

Microformats

Originally I had intended for the entire logic behind the Microformats overlay to be within the bookmarklet. However, it’s particularly difficult to get all the code on one line, and this more simplistic bookmarklet means upgrades will take automatic effect.

Usage

The bookmarklet has been primarily been designed for Safari, as Firefox has Tails. However, the Microformats Bookmarklet supports Safari, Firefox and IE (both 6 and 7).

Click on the bookmarklet once it has been saved, to bring up an overlay window of all the hCards and hCalendars within the current page.

Example of Microformats bookmarklet running

To save an individual item, click on the item heading and it will automatically (if you’re using Safari) save the .vcf or .ics files and import them in to Address Book or iCal.

If you are saving your vcard or vevent in IE, it will prompt you to save an HTML file - make sure that when you save, you name it appropriately so that you can import it properly.

To close the overlay, click anywhere outside of the window (i.e. in the darkened area).

The Logic

If anyone is interested, here’s roughly what is happening behind the scenes for the bookmarklet to work:

  1. Load external module: jQuery†.
  2. Load second external module: microformats.js (the main module).
  3. Apply a new inline CSS styles (because IE doesn't support CSS style sheet injection).
  4. Load the new HTML for the overlay.
  5. Search for vCard and vCalendar classes and capture all the information according to the guidelines laid out by Microformats††.

† Because jQuery saves so much coding time, and it’s a superb library to use.

†† The bookmarklet currently only supports hCards and hCalendars, but should be straight forward to support more formats where appropriate.

Known Issues

A lot of cross site testing took place for this bookmarklet, so I do know of a few places it doesn’t work.

I’ve seen a problem where the overlay simply doesn’t appear. I think this may be due to the site also using Prototype (since I’m using jQuery which may be conflicting). I have only seen this occur on Multipack members page.

Since hCards and hCalendars are defined using classes, a page with a lot of markup can take a number of seconds to parse all the information.

I have tried to parse all the different fields in the hCards and hCalendars, but I may have missed a few, particularly in the hCard. All sites I tested had all the information correctly imported.