hCard is a semantic web-friendly derivative of vCard (as used to import/ export from the Mac OS X Address Book). This post is a short "how to" describing a method for adding contact information to your blog posts in a cross-platform format that your readers can store without effort.
The RSS client NetNewsWire now detects microformats—hCard/ vCard for contacts and hCalender for calendar events. I noticed that the odd site has started displaying the tell-tale icon indicating associated contact information:
Adding hCard to your posts
I wanted my hCard to be available from any page in my site, so I added the following code to my WordPress footer.php template:
<p class="vcard" id="hcard-Bruce-McKenzie" style="display: none;">
<img class="photo" src="data:image/jpeg;base64,/9j/4AAQ...[edited]...gK6D//2Q==" alt="Photo of Bruce McKenzie" />
<a class="url fn" href="http://www.bioneural.net/contact/">Bruce McKenzie</a> is a <span class="title">General Practitioner</span> based in <span class="adr"><a class="url" href="http://maps.google.com/maps?q=wellington,+new+zealand"><span class="locality">Wellington</span></a>, <span class="country-name">New Zealand</span>.</span>
He blogs at <a class="url" href="http://www.bioneural.net">bioneural.net</a> (<a class="url" href="http://feeds.feedburner.com/bioneuralnet">feed</a>) and can be contacted (<span class="tz">+12:00</span> UTC) as <span class="note"><a href="skype:b%2Emckenzie?chat">b.mckenzie</a> on Skype</span>.
</p>Notice that the paragraph containing my hCard data is styled out so that it doesn't display at the footer of my page:
If CSS is disabled, however, the hCard information is revealed to the world and the use of "natural language" makes things human-readable:
Tip: An easy way to encode a photo is to e-mail yourself a JPEG photo then select the message in Mail and choose View > Message > Raw source. Now copy the base64-encoded text block into the image scr, adding a "data:image/jpeg;base64," prefix.
Accessing hCard via NetNewsWire
At this point when readers use NetNewsWire to read one of your posts your hCard should be automatically detected, although it appears that not all of the specification is supported. They can select to download your contact details via the drop-down menu:
Selecting your name will open a dialogue box asking if the person should be added to your Address Book. If you confirm, the person will be added as a contact:
Making your hCard browser-friendly
If visitors are viewing your posts with a browser like Safari, they won't know you have microformats hidden in your code. Luckily it's easy to add a visual indicator that can be used to extract your hCard data and convert it into a vCard for download; you don't need to host a separate vCard file on your server. Using the beta Technorati Contacts Feed Service service and some JavaScript, we can include the following code (again, this went into my footer, but it could go anywhere):
<a href="javascript:void(location.href='http://feeds.technorati.com/contacts/'+escape(location.href))" title="Download vCard for Bruce McKenzie"><img src="<?php bloginfo('template_directory'); ?>/styles/bioneural/vcard_add.png" alt="vCard" /></a>The user just needs to click on the vCard icon. The resulting hCard-contacts.vcf file (in your default downloads location) can now be imported into Address Book:
Notice that, on this occasion, the encoded photo is imported and the source of the data is recorded (the URL of the actual page used for the download).
Tip: The Operator add-on for Firefox detects embedded microformats—although it does seem to slow page loading significantly and doesn't handle the encoded image.
This looks like it could be a great thing if only I could get it to work... I have noticed that the vCard that is downloaded when clicking on any of the icons (your page and mine) is not correctly formatted as Apple's Address Book 4.1/Mac OS X 10.5.1 will not import it. When I open the downloaded "vCard" in a text editor it is empty.
From Technoati's pages I have tried both of theirs and only the one with the button on the hcard page actually works. The favelet link doesn't work either.
Please let me know if you can see where the problem lies...
Have you tried to download it on a different computer Sean? I'm running a clean install of 10.5.1; I downloaded your vCard via the JavaScript in your page fine; it imported into Address Book fine; and the contents look as they should in a text editor. Perhaps something has gone awry with your machine?
Note that I can't open your page in Windows XP/ Internet Explorer 7, because it doesn't know how to handle the non-standard .xhtml file extension you are using.
Bruce, thank you for your help... there must be something wrong with my install as it worked on another friend's system as well.
To validate xhtml 1.1 strict the validator wouldn't validate without strange comments without .xhtml extension. It is becoming standard from what I saw in the w3c pages but it's Microsoft that's not standard...
Sean, I'm unclear what you mean by .xhtml becoming standard. XHTML is a standard, as used on this site, with a .html file extension and a content-type declaration of text/html (as recommended by the W3C). I notice your page uses no content-type which, as I understand it, should be set to application/xhtml+xml if you are using a .xhtml file extension. Using .xhtml excludes most of your potential audience from viewing your site; I guess this is why I've never come across anyone else using it.
Bruce, thank you for your help. I read somewhere that there's an error on the validation page for XHTML. I have added the content-type application/xhtml+xml to my page and changed the extension to html and I get this warning from the xhtml validator...
" Conflict between Mime Type and Document Type
The document is being served with the text/html Mime Type which is not a registered media type for the XHTML 1.1 Document Type. The recommended media type for this document is: application/xhtml+xml
Using a wrong media type for a certain document type may confuse the validator and other user agents with respect to the nature of the document, and you may get some erroneous validation errors. How to fix this problem? One of the following techniques should help:
If you are serving a static file on a Web server, changing its extension should help. Use e.g .xhtml for XHTML or .mathml for MathML.
You may need to reconfigure your Web server. This Setting up MIME Types tutorial has instructions for Apache, Tomcat and IIS.
If the document is generated dynamically, the scripting language should allow you to set up the mime type: this article on MIME Types and Content Negotiation has examples in PHP, Perl, and ASP."
Because of this message I changed the extension to .xhtml and it passed without a message. My server is configured properly and the document is also setup properly...
I don't understand why you did that. application/xhtml+xml is paired with .xhtml, and text/html with .html; W3C advice is to go with the latter.
As you can see I'm sort of new to this and the warning message from the validation page had confused me... It still does but I'm going to leave it text/html and .html...
Hi Bruce, very useful article, it's great to see hCard popularity increasing, if others are looking for an easy way to generate the hCard HTML content one of my colleagues created an online 'hCard-o-matic'. It's New Zealand specific but I'm sure the output could be easily tailored for other countries.