In a nutshell, its the industry standard for electronic business cards. You can attach them to emails or posts, just about anything. The great thing about a vCard is that it holds all the information that you’d need to share with someone – Name, Business, Phone, Email, Address, Logo, Notes, etc., much easier than a big long list that someone has to type in manually.
What’s great about having a vCard on your site is that anyone can download it, and as soon as they open it up it can be imported into their Address book (Mac) or Outlook (PC), or similar applications.
Here, I will be covering how to do this via a Mac. If you guys want a PC tutorial just hit me up with a comment afterwords and I’ll update the post with the additional instructions.
You’ll need a few things to get started.
1. A link icon
There’s nothing overly special about it, in and of itself it doesn’t contain anything. We’ll just be using it as a link for your visitors to grab your vCard file. Here are two that should work well (you can use whatever image you want, you can even grab that big icon up at the top of the post if you really want to get someone’s attention!).
(These have white backgrounds, so if you want to place these on a site that has another color other than white, you may have to hunt for one. For the best result, try and find an icon with a transparent background. These will work on any color.
All you have to do is right-click and hit “save-as” on any of those icons to grab it. Now remember – when the time comes to add the link to your site, you’ll need to drop the icon on your server (via FTP, or other methods, depending on how you maintain your sites). Since there are many many ways that this can be done, it’s hard to go over every route. If this part gets you stuck, shoot me a comment and I’ll try and see if we can get your specific problem resolved!
So, moving on.
2. Get your vCard.
Now is the fun part. Time to create and export your vCard.
First, go to your Address book app on your mac
Next, click on the small plus icon under the name column. This will create a brand new contact, or vCard.
Go ahead and fill out any information that you want to contain inside the vCard. Be as specific or vague as you want. I would suggest strongly adding an image – this will make your vCard pop when your customers or friends are searching through their contacts – as most people don’t add images to the contacts they have.
Once you’re finished and happy with the new contact you’ve created, right-click on your new contact in the list and select “EXPORT-VCARD.” IMPORTANT! When you save your vCard, make sure you name it without spaces or caps. The reason why is that when you drop your file on your site, you need to be able to link to it, and browsers don’t like spaces or caps.
Save it to your desktop (or somewhere that you can save it for future use – just in case). It will look like the image to the left (and will have a .vcf extension) Now a quick note: Just like the icon, your vCard will have to be stored somewhere on your site or on the web, otherwise there won’t be anyway to “link” to it. Make sense? Again, there are loads of ways to do this, so shoot me a comment for specific solutions.
3. Post your vCard.
Finally, it’s time to get it on your site. Now depending on what type of setup you are using, this may vary a bit – but for the most part the application is the same.
You’ll need 2 things to make this happen.
1. The URL of your icon
2. The URL of your vCard
If you’re doing this on your own site and you have to basically code the whole thing out from scratch, this is what you’ll need to do… (if you’re going to be posting this on lets say wordpress, or someting using a wysiwyg editor (if you don’t know what that is, click HERE) skip this part…
Here’s the HTML. Basically what you’re doing is creating a link, and instead of using text to make the link, you’ll be using an image (the icon).
<a href=”URLTOVCARDFILE“><img src=”URLTOICON“></a>
Now where it says URLTOVCARDFILE, place your full URL to where the vCard is located. Do the same with the URLTOICON, only use the icon’s URL.
For this example, I’ll use my VEEI DESIGN vCard.
<a href=”http://www.veeidesign.com/tuts/alex-vasquez.vcf”><img src=”http://www.veeidesign.com/tuts/img/vcard-icon-1.jpg”>
And when I post that it will look like this…
Simple and effective! Click on the icon to download the vCard and see it for yourself!
Hopefully this works out for you guys. Now obviously I didn’t want to make this tip a mile long, so like I said a few times through the tutorial, if you get stuck, or have issues with something specific, please add a comment and let me know – I’ll try and see if we can get any issues fixed. Thanks!