Contact details in one click

At some stage everyone has laboriously copied and pasted contact details from a website into their address book. Wouldn't it be nice if you could just click a graphic and see the details turn up in your address book?

This tutorial will show how to create a button that will import contact details into an address book. All you need is some knowledge of XHTML and a graphics editor. But before the explanation you want to see it working don't you?

How is it done? Meet Microformats

Unless you have been hiding for the last year you will probably have heard of Microformats. The idea is that Microformats add an additional level of meaning to your XHTML using what's already available. So if you know XHTML and CSS the good news is that Microformats will be easy.

Take this example of contact details on a web page:

<p>George Ornbo</p>
<p>Shape Shed</p>
<p>email: george@shapeshed.com</p>
<p>address: 22 Centre Square, 17 Hardwicks Way, London SW18 4AG, UK</p>
<p>tel: +44 (0)2081419116</p>

Microformats sprinkle in some class names to give further semantic meaning to the code. They also allow other programs to access the information contained within the class names. There is even a handy hcard generator to do the work for you. Otherwise you can review the hcard specification. You can attach the class name to any element so you are free to use the full power of XHTML to display it. So now my contact details look like this:

<div class="vcard">
 <a class="url fn" href="http://www.shapeshed.com">George Ornbo</a>
 <div class="org">Shape Shed</div>
 <a class="email" href="mailto:george@shapeshed.com">george@shapeshed.com</a>
 <div class="adr">
  <div class="street-address">22 Centre Square, 17 Hardwicks Way</div>
  <span class="locality">London</span>
  <span class="postal-code">SW18 4AG</span>
  <span class="country-name">UK</span>
 </div>
 <div class="tel">+44(0)208 1419116</div>
</div>

Have a look at the example page. You can place this XHTML in the same page or a page anywhere on the web - it doesn't matter.

Creating the vcard

Now I've got my contact details in semantic code I can do things with it. Like send it to a page that will generate a vCard. This is what we use with the image link. Brian Suda has a big Microformat brain and has written code to transfer an hCard on any page into a vCard. Amazing. So to generate a vCard from my XTHML page I just send the details to the script with the link: http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.shapeshed.com/examples/hcard/. The user doesn't care of course and they get my contact details in just one click.

<a href="http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.shapeshed.com/examples/hcard/"><img src="{filedir_1}hcard_example.jpg" alt="Add me to your address book" title="Add me to your address book" width="400" height="121" /></a>

Amazed? This is just the beginning

Using Microformats in your code is a great way to give people access to your data without building a full scale API. I believe we are just seeing the beginning of some amazing uses of Microformats that will allow relative novices to publish, manipulate and work with data published with just the power of HTML. Who needs a database?

Comments

ram Jan 19 2007

hi ,its really a professional work....thx for providing this kind of tutorial work 2 us.
I wil be thankful 2 u ,if u will provide a some more material 2 my mail id....i’m a beginner 2 dis IP course including html,dhtml & xml.

Ben Ward Jan 25 2007

Nice work on the hCard tutorial. That’s a really well written introduction. A couple of things to contribute for you.

First of all, do remember that you can use any HTML element for your microformat class names; not just span and div. It can be clear in examples to stick to generic mark-up, but anything is allowed (this is why the microformat specs themselves use span and div).

In your case, you don’t have to remove the p elements, they can be kept as containers in whatever way best suits your mark-up.

Second, I notice that in the microformatted version, you’ve dropped the â€˜tel:â€™ text prefix from your phone number, to fit in with having the tel class on the div. One little, under-documented trick is that you could instead write this:

<div class="tel">tel: <span class="value">44(0)208 1419116</span></div>

With the above, only the â€˜valueâ€™ portion should be extracted by hCard parsers.

Anyhow, good work!

Las Vegas guy Jun 3 2007

That is just brilliant. I’m going to try to add that to my wife’s website right now. Thanks for the great tutorial!

Wayne Aug 23 2007

Great tutorial, George!

It is simple (simple is GOOD) and straightforward, which is more than I can say for all those other geeky hCard tutorials I have come across so far. Others may understand them but I certainly do not.

Just one question: Is it okay if I use your “Add me to your address book” graphic? If not, do you know where I can find a good (FREE) alternative? I could probably design one but it is unlikely to look as good as yours.

I have not checked out your other tutorials as yet but I certainly intend to.

Cheers :-)

George Ornbo Aug 23 2007

@Wayne - Chris Messina at Factory Joe has created some great icons for hCards and other Microformats. The zip file for the images is here. Also there are some further free icons on the Microformats wiki.

David Zlotin Feb 27 2008