How to use Microformats to create a "Add to Address book" link

Posted on 2008-11-06
Last Modified: 2012-05-05

I would like to add an "Add to Address book" link on my website, such that when a user clicks the link they are prompted to add the contact info to their Outlook/Mac Mail address book

(please see attached screenshot of example)
Question by:mindfriction12
    LVL 54

    Expert Comment

    How exactly can we help with this?  Are you commited to using the Microformat's format (i.e. the hCard I believe) or will that or a vCard format work?  Do you know the specs or format to use for that "style" of data or is that what you need?
    What server language or technology are you using (e.g. ASP, PHP, .NET, Perl)?  This would have to be done with server script or code so that is a key to any solution we would help you with.  The server would not only need to get the info to go in the "card" but also format it properly and send it (with the proper headers) to the browser so the user would have the option to download/save.  If you just need some general help to know the header(s) to use then let me know but specifics will depend on the server language/technology.
    One note ... I am not familiar with Microformats so if you must use it and need details on the specs of the "data" then I am not sure I will be able to help.  Most likely if you are interested in that format you already have those details though and need just general help on how to get it made and sent to the browser.
    Let me know if you have a question or how this helps.

    Author Comment

    hi bol,

    first thanks for your reply. Ive familiarized myself with hCard even found a "wizard" to format contact info the hCard microformat ( BUT i just dont know how to enable such that a user can click the link and it prompts to download a vCard i.e. an Outlook Business Card?
    LVL 54

    Accepted Solution

    Thanks for the response and info.  I have looked into hCard a little more and it will be different than what you saw on the site above for vCard.  It might be easier for you but the user needs to have an addon or extension for their browser to recognize it.  All you do is put the info in a specific format in the html.  The browser will see it and using the addon (or in the case of IE a bookmarklet) can grab that info from the html and export it to your contact list.  At least that is how they describe it happening.
    The page above actually uses a method like what I described in my previous comment.  It makes the vCard with server script and sends it to the browser with a special header so the browser knows to download/save it.  The link "Add to Address book" points to that server script page.  It sounds like you aren't interested in this method but I wanted to clarify it since you do like the effect on the other site and they use vCard.  You won't get the exact same process with hCard but it might be easier for you (if the user supports it) and the result would be the same.
    Let me know how this helps or if you have a question.

    Author Comment

    hi bol,

    making it download  like the above page is exactly what i would like to do... i just google for and found exactly that, a server side script which forces with a vcard content type and here's a nice little PHP class i think i'll use ;)

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now