I’ve always hated the fact that we still, for the most part, have to manually input contact information from a website that we want to keep in our address book. How is that possible in these incredible web 2.0 days with all of the social networking websites and new technologies popping up all over the place? You know the drill, you’re surfing the web and you go to the Contact Us page for a vendor or client and you do the old copy and paste trick and then it always winds up as data entry in your address book.Well, that could all be a thing of the past thanks to the hcard. What is the hCard? I will give you a quick and dirty rundown but here is the official website for the hCard with more information than anyone would ever need to know. Here is the official description of the hcard:
The hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard (RFC2426) properties and values in semantic HTML or XHTML. hCard is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom, RSS, and arbitrary XML.
Translation in human speak? The hcard can generate a vcard with your contact information that any visitor to your website can download and open and automatically import into their address book.
Here is a list of just some of many websites that are already using the hcard. Most of them will display something like this:
Add to Address Book
How do you create this voodoo, you ask? Well, most of the work is done by the hcard creator ! On this webpage you simply fill out the forms with the contact information that you want to share with the world and click the Build it button to generate the code you will need. Here is the screen:
Important to note: You are not limited to the fields on this form! You can add much more information manually with a text editor if you so choose. Here is a list of hcard samples.
Let’s use this blog as the guinea pig for hcard. I entered the contact information I wanted to share with the world about myself and my blog and the hcard creator generated the following code:
<a class=”url fn n” href=”http://thepaisano.wordpress.com“> Paisano
Pai in Yo Face
<a class=”email” href=”mailto:thepaisano@gmail.com”>thepaisano@gmail.com</a>
Atlanta,GA, 30313
USA
Home:+1.404.492.6209
This <a href=”http://microformats.org/wiki/hcard”>hCard</a> created with the <a href=”http://microformats.org/code/hcard/creator”>hCard creator.
<img class=”logo” src=”http://thepaisano.files.wordpress.com/2007/12/hcard.gif” alt=”HCard logo” />
I copied the code to a text editor (notetab is the best ). What do you do now with this gobbly-gook? Well, you can paste it into your website or blog (sidebar in WordPress as in this example).
This is what the hcard creator code generated on my blog:
Hmmm… I see you scratching your feeble attempt at a goatie and I hear you muttering something like “All that work for that?” OK, we’re not done yet, cha cha. Put your can of Mountain Dew down and check this out.
In order to create a vcard that someone can download and import into their address book, the hcard code must be converted into a vcard. Fortunately for us, Technorati has setup a site that just that!
The Technorati Contact Feed service will convert your code by simply adding the URL to the page on your website that contains your hcard code. All you have to do is add this one line of code to the bottom of the hcard creator code you already have. It will look something like this (just change the website information with yours URL):
Just for cosmetic reasons, I also added another line of code to include the official hcard logo next to the Add to Address Book link.
<img class=”logo” src=”http://thepaisano.files.wordpress.com/2007/12/hcard.gif” alt=”HCard logo” />
Here are some of the official logos you will see.
After adding these two new lines of code to the hcard creator generated code that I already pasted into my wordpress sidebar widget, I got the following result:
When some clicks the Add to Address Book link they will see the following screen:
They can click save but most people will click the Open button which will open the new contact form in their default address book (in this case it is Outlook but it will work with any address book that supports the vcard standard which most do). See below:
Done. No more data entry and typing. Click click click and your contact information can be automatically added to address books.
Technorati hcard favelet adds a link to your favorites link toolbar that will allow you easily add any existing hcards on websites you visit.
Final Thoughts: While I am glad that some brilliant people actually came up with the hcard, it still has a long way to go before it becomes the solution for automatic importing of contact information from websites. It is still to cumbersome and requires far too many manual processes. Even the hcard creator needs much improvement. There are too many fields and options that it doesn’t handle. I guarantee you that there will be many fast and easy hcard generators coming to a web near you very soon!