Add downloadable contact details to your site in 5 minutes

Author: James Braithwaite

When your out and about meeting up with clients, it’s handy to have their details on your mobile, iPod or SatNav. Most companies provide these details on their contact page, but if you want to get them in your phone, you’ve got to visit the contact page, create a new contact, then to do loads of copy and pasting, blah blah blah.

We think this is boring, time consuming and unnecessary. We’d like to make it as easy as possible for you to have our details, which is why from today we’ve started to provide our contact details as downloadable vCards on our profile pages and contact page which you can download and easily sync to your devices. We think you should be doing this to, so here’s a quick “how to” which show just how eas this was.

Step 1 – Create your vCards

The easiest way is to open up Address Book and create a new contact for each person. Fill in all the details you want to share like URLs, business address, even a mobile number if you want to get personal.

Note: So far I’ve not managed to get images to work, if anyone has any ideas on how to attach a mugshot to an exported card please let me know in the comments.

Step 2) Exporting

Export each card individuality (multiple contacts don’t go down too well) and upload to your server. We recommend you put them in a separate directory as you need to write a special htaccess rule.

Step 3) The Science bit

Next you need to tell the browser that it should expect a vCard instead of a regular text document. For this we’ll be writing a .htaccess rule. Create a new file called .htaccess in the vCard directory and write the following line.

AddType text/x-vcard .vcf

Save and close. Yep that’s it. Now point your browser to the vCard. In our case to see it in action. Once the card has downloaded AddressBook on Mac or Windows will appear and import the card. Magic.

Step 4) Link to it

So you’ll probably want to put a link to that on your contact page and make it look pretty, we gave it a class of dvcard and added this little snippet of CSS to our stylesheet to make it stand out.

.dvcard {
margin-bottom: 20px;
padding-left: 20px;
background: url(images/vcard.png) left top no-repeat;
display: block;

(Address Book icon comes from the wonderful famfamfam silk icons.)

How easy was that? Your contact details can now be easily added to your clients mobile, iPod and other devices. If it’s not working for you let us know in the comments and we’ll do our best to help!