How to properly display a vCard or vCal

Question

Via a mobile App my users can send a reference object with their data to our server. This is either a calander event or a contact. The format used is vCal or vCard.

On my website I would like to display the reference object along with the data. Idealy a icon which on hover or click displays the vCard / vCal with a the possibility to save it. This doensn't have to be with ajax. My site uses jquery and has to be able to work in IE7 and higher.

I've found quite bunch of examples (mostly CV or gallery type stuff) in a range of technology's (microformats and so on). I'm looking for a more simple example.

What would be a good plugin or sollution for this?

many thanks.

Answer 1

You can use the hCard microformat to mark up the vCard data on your site, e.g.

<div class="vcard">
    <address class="adr author">
        <span class="type hide">work</span>
        <span class="fn">John Doe</span>
        <span class="role">Webdeveloper</span>
        <span class="street-address">Fooway 1</span>
        <span class="postal-code">1234 </span> <span class="locality">N.Y.</span>
        <span class="hide country-name">USA</span>
    </address>
    <div>
        <span class="tel">
            <span class="type">Tel</span>
            <span class="value">0800-1234567</span>
        </span>
        <span class="tel">
            <span class="type">Fax</span>
            <span class="value">0800-7654321</span>
        </span>
        <a class="email" href="mailto:[email protected]">Mail Me</a>
        <span class="url">http://www.example.com</span>
    </div>
    <div class="hcard-export">
    <a href="http://h2vx.com/vcf/http://www.stb-rueter.de/">
        <img src="/images//icons/hcard.png" alt="hCard Microformat" />
        <span>Download vCard</span>
    </a>
</div>

Then add a link to convert that via http://h2vx.com/vcf. The service will parse the URL you tell it to for any hCards on the site, convert them to a vCard and offer that for download then.