Microformats Bookmarklet
September 25th, 2006Inspired 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:
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.
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:
- Load external module: jQuery†.
- Load second external module: microformats.js (the main module).
- Apply a new inline CSS styles (because IE doesn't support CSS style sheet injection).
- Load the new HTML for the overlay.
- 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.
If you see any other issues or have any suggestions, or just feedback, please feel free to leave a comment below.
Lordy! This is amazing! You’ve done a cracking job on this, thanks!
Brilliant! Can’t wait to throw this into a few special projects I’ve got going on… :)
There’s a few small issues with the date format in the hCalendars, in particular when the dtstart is just the date without the time.
Should be simple to fix though.
I can’t seem to get a title on hcalendar events from upcoming.org, for instance: http://upcoming.org/event/102697/
I’m using Safari on MacOSX 10.4.7.
Great work BTW!
Very well done, perhaps it would work well with the highlighting CSS stylesheet, e.g. All Microformats are highlighted and then this dialog is revealed when you select one.
I really like this tool! It looks good, it works well. Thanks :)
Using my work computer (WinXP with MS Outlook as the vCard reader). It works great in Firefox/Win, except when trying to save the hCard. hCalendar events save just fine (Outlook recognizes the iCal format), but for some reason it can’t read the hCard. Any suggestions, maybe I’m missing something (besides a Mac, of course).
it’s good and work’s well.
This looks really great. I mean it would be great to use it not only as a bookmarklet in ones browser but also as an additional functionality on any site offering data marked as hCard or hCalendar. Have you consider licensing it by any chance (or maybe you already have but I’ve missed something)?
I’ve been marking my clients pages [hCard for contact data] without even bothering to tell them. In 90% of all times it is not worth the trouble of explaining what is that I am actually doing. Still, such a nice feature almost out of the box would be a great addition.
Awesome.
I’ve had a go with it in Camino. It works great, except (fairly obviously) downloading vCards. Camino saves them as a file called “download”, meaning you have to manually add ”.vcf” to get Address Book to work with them.
No idea if Camino provides anything similar to Safari’s “data:” mock-protocol.
And now, if I may go off on a tangent…
I think for mass adoption of something like this, the functionality either needs to get implemented natively in the most popular browsers, or needs to get implemented directly on web sites. And for automatic adding to calendar/address book, I guess we’ll definitely need browsers to understand what to do with .vcf etc. files.
Great tool, thank you for making it.
I don’t know enough about scripting to evaluate the conflict, but I noticed an odd interaction between the bookmarlet and <a href=”http://www.newsvine.com”>Newsvine</a>.
Given that there is currently no microformat data on Newsvine this is not really an issue, but it is an interesting behavior that may cause problems with other sites.
Issue:
The bookmarklet alert window appears and the website is grey-ed out as intended, but the website navigation bar is layered over the top of the bookmarlet alert window.
I’m guessing their is something going on with the <code>z-index</code>.
Excellent work. An explicit close button or link in the top right corner would make this even easier to use.
Luckily I have this IE 6 at work and can test the bookmarklet ;-) It does not work for me, though.
Otherwise, this looks great, thank you! Well done!
I’ll try it on Firefox later.
Very nice!
Holy crap-my-pants, this is amazing! Beautiful work, my friend.
This sort of thing makes me feel much better about adding Microformats to some of my recent sites.
Thank you.
I’ve tweaked the interface to also include a close button as suggested and given the background a bit of a gradient.
You don’t accpet short date like YYYYMMDD, although it seems to be a valid format.
I think this bookmarklet is great, but I found one funny issue: after showing overlay, it seems to add characters of ”#?” to URL in the address bar. I just tested using Safari2, so I don’t know about other browsers.
The ”#?” is the href of the links in the overlay. This allows me to add javascript onclick functions without breaking the XHTML of the web page.
Also – the ”#?” doesn’t/shouldn’t change the page in any way what so ever. Let me know if you see different and I’ll try to resolve it.
Thanks.
@Michel – the problem wasn’t in the short date format, but with the offset as you said in your email. The fix also have been applied to test for the offset first. Thanks.
Any chance you could expand the functionality to extract hreview items? Tails in firefox doesn’t work with MacOSX, but does handle reviews. Not seen Tails in action but your bookmarklet is pretty damn slick.
I’m no guru in this area but it would appear to me that a good combination would be to put together some client side css/java script combo. CSS takes care of the detection and displays the appropriate icon in the lower right or upper right corner. Clicking on the icon would call your script and there you have it. I would build it myself but I’m way too slow in the implementation department.
Hey, take a look in my website and see what it happens! (http://www.revolucao.etc.br/) I implement microformats anywhere, but when I click in the bookmaklet, the overlay window apears in the footer of my site without any style! Do you know what it is?
Hey, I discover why this script does not work in Adactio and why was not working in my website. Was the mime type: application/xhtml+xml. I change that in my site and the problem is gone… Make an update in your post about that!
Your script and idea is very cool! Congratulations!
Hi! Very nice content. Interesting how can you do all that? I’m trying to build my site, but have no success for now((.
Great Code.
One small issue – if you run this more than one time it add the script links to the DOM. It might be better to enscapsulate all the business inside one function and in the bookmarklet test for the function. If the function exists run it, but if not load the script into the DOM.
I am actually using this as the basis of a screen scrapper – I need something that displays part of a page on a particular site, reformmated as text.
cheers
update: I added the ids for the script and CSS to the remove function
Just found this and am blown away by it…it’s such a great tool. Thanks!
Hey, this is just awesome. I’m just getting into using microformats, and this is an excellent tool.
One feature request: the bookmarklet doesn’t seem to parse <span class=”uid”> into a UID: field. Can you add that?
Hi,
I thought I would have a bash at making this work in IE. I have managed to get something working (although not yet perfect). My instance just supports hCards at the moment (not hCalendar). What I did:
http://mark.mclaren.googlepages.com/hcard.html
@Mark – awesome work. I actually thought it wouldn’t be possible because of the way I created the vcard on the fly – but I love the ‘decodeURIComponent’ component in IE.
Really, really great work.
There is a bug where there are more than one Microformat on the page – the saved MF chooses the last MF rather than the selected MF (give it a test on http://microformats.org).
I’ll drop you an email offline and if we can nail that bug, I’ll update the latest version of the Microformat bookmarklet and add a credit to you for the IE conversion.
What’s the possibility of getting this to work with greasemonkey?
Fantastic booklet, however I am having an issue with multiple addresses (postal and pref) in the way they are displayed in the final outputted vcard (they seem to be merged).
My data is at http://test.collectionsaustralia.net/org/102
hiya,
Nice Work, i have seen this around before, nice to see it in use and at work!
^licks^
Jamieknight & Lion
Just so you know, this appears to be broken on the Safari 3 Mac beta (522.11).
@Marnen - thanks for the catch - I've upgraded to Safari 3 and released the bug fix now.
Yes, it looks like it's fixed. Thanks!
Great work, Remy!
My only gripe is that it doesn't work properly with OS X Address Book and Unicode.
The problem is that Address Book currently works only with UTF-16-BE encoded vCards. Specifying ;CHARSET=UTF-8 or ENCODING=UTF-8 doesn't work.
Given that most webpages are in UTF-8, an UTF-8 to UTF-16-BE conversion is needed. It could be performed in Javascript or, perhaps, there is already a nice web service for doing that (perhaps this one: http://www.iconv.com/iconv.htm). Also, you might want to use jQuery's $.browser.safari to only perform this conversion for Safari users.
Heck, maybe I should do this myself and give you a patch. Please contact me.
Cheers!
Hi,
This code is fantastic. The only problem I can see with it is when it is ignoring the abbr tag (in some places) such as
It is placing UK in the country field rather than United Kingdom. Thanks for a very informative piece of code.
Thanks for this, I'm a late comer to microformats, but it's working nicely in iCab v4ß - but not in Demeter...
Hmm flickr does not seem to parse right with this bookmarklet ..
http://www.flickr.com/photos/till/2198002194/
One comment: to close the overlay via 'esc' key would be kewl!
Thanks for the wonderful bookmarklet.
I'm having an issue where the exported .vcf does not export fist and last names properly. I'm no sure whether it's my markup or the bookmarklet. I'm suspecting it's the latter since it works fine with Tails for Firefox, and my example is taken directly from the hCard creator.
Here's my test site. In exported .vcf both "Barrrettt, Fred" get put as a family-name and given-name is left blank. Expected: "Fred" should be in given-name and "Barrrett" should be in family-name.
Any clue? (name deliberately misspelled)
Hi,
This is wonderful!
Is there any chance to see additionnal microformats supported any time?
Thanks anyway.
The vcards don't seem to handle line breaks correctly, see:
http://www.beckdecorso.com/index.html
Also, I found this awesome bookmarklet while looking for a greasemonkey script to insert microformats into pages - then i could download them! Kind of like data detectors in os x mail.
@Emir - thanks for pointing that bug out. I've fixed that bug now, and tested it on your site.
@Steven - also thanks - I've stripped line breaks from single line fields, i.e. from name, etc. but not from address.