Creating vCards from h-cards
Tags: web
Published: 2023-01-06 02:51:03

---
title: Creating vCards from h-cards
published: true
date: 2015-12-27 15:17:12 UTC
tags: Web
canonical_url: https://brandonrozek.com/blog/2015-12-27-creating-vcards-from-h-cards/
---

Microformats is semantic HTML used to convey metadata. Using an userscript, I can generate a vCard from the representative h-card of the page. The code for this is on this gist [here.](https://gist.github.com/brandonrozek/e0153b2733e947fa9c87)

### Terminology

[Microformats](http://microformats.org/wiki/Main_Page) allows search engines, browsers, websites, or people like me to consume content on a site.

[H-card](http://microformats.org/wiki/h-card) is a type of microformat that serves as a contact card for people and organizations.

[vCard](https://en.wikipedia.org/wiki/VCard) is the standard for electronic business cards. They’re most likely used in your phone to store contacts.

Userscript is essentially JavaScript that runs in the [Greasemonkey](http://www.greasespot.net/) extension.

### What I’ll need

- Microformat parser
- Way to find the representative h-card
- Way to generate a vCard from an h-card
- The userscript itself

### Implementation

To keep everything in small [reusable components](https://en.wikipedia.org/wiki/Modular_programming), I created four different sections. Thankfully, [Glenn Jones](http://glennjones.net/) already wrote a JavaScript microformats parser called [microformat-shiv.](https://github.com/glennjones/microformat-shiv) It’s licensed with [MIT](https://tldrlegal.com/license/mit-license), so we can use it, yay!

Next, I need to find the representative h-card of the page. Following the [instructions](http://microformats.org/wiki/representative-h-card-parsing) on the microformats wiki, I wrote the following code.

<!-- raw HTML omitted --><!-- raw HTML omitted -->

Next up, is making the vCard. For this, I had to look at the [vCard 4.0 specification](https://tools.ietf.org/html/rfc6350) to figure out what the property names and values are. Then I browsed around different <!-- raw HTML omitted -->sites<!-- raw HTML omitted --> (takes you to a random [Indieweb](https://indiewebcamp.com/) site)  to figure out which properties are the most common.

The properties I ended up adding to the vCard.

- name
- photo
- telephone numbers
- URLs
- [IMPPs](https://en.wikipedia.org/wiki/Instant_Messaging_and_Presence_Protocol) (Instant Messaging and Presence Protocol)
- emails
- roles
- categories
- notes

 As I was browsing around, I noticed that a few people would have empty values for certain properties on their h-card. To avoid having this show up on the vCard, I added a filter that takes out empty strings.

<!-- raw HTML omitted --><!-- raw HTML omitted -->

Now for the final part, making the userscript. Inspired by [Ryan Barret](https://snarfed.org/) and his userscript [Let’s Talk,](https://github.com/snarfed/misc/blob/master/userscripts/lets_talk.user.js) this userscript brings all of the above modules together. First it grabs the microformats from the page using microformat-shiv.

For some reason, when I tried filtering it by ‘h-card’ it froze my computer. So I wrote my own little filter instead.

After I grab the representative h-card from the page using the little module I wrote, I generated a vCard. With the vCard generated, I set up a little HTML and CSS to display the link in the top left corner of the screen.

The link is actually a [data uri](https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs) that has all of the information of the vCard encoded in it. Depending on your browser, once you click the link you might have to hit CTRL-S to save.

<!-- raw HTML omitted --><!-- raw HTML omitted -->

Sadly, I have no way of controlling the file name when you save it so you’ll have to manually rename it to something more meaningful than a random string of characters. Also remember to add the extension ‘.vcf’ for it to be recognized by some devices.

### Conclusion

Fire up your favorite userscript handling tool and add the [script](https://gist.github.com/brandonrozek/e0153b2733e947fa9c87) in! Of course, since it’s pure JavaScript, you can also add it to your own site to serve the same purpose.

I ran into a small problem loading a contact onto my Android 5.0.2 phone. Apparently, they don’t support vCard 4.0 yet so I had to go into the file and change the line that says “VERSION 4.0” to “VERSION 3.0” which then allowed me to import the file into my contacts.

As with all the code I write, feel free to comment/criticize. I love hearing feedback so if you spot anything, [contact me](mailto:brozek@brandonrozek.com) 🙂

Also posted on [IndieNews](http://news.indiewebcamp.com/en){.u-syndication}