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.

Terminology

Microformats allows search engines, browsers, websites, or people like me to consume content on a site.

H-card is a type of microformat that serves as a contact card for people and organizations.

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 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, I created four different sections. Thankfully, Glenn Jones already wrote a JavaScript microformats parser called microformat-shiv. It’s licensed with MIT, so we can use it, yay!

Next, I need to find the representative h-card of the page. Following the instructions on the microformats wiki, I wrote the following code.

Next up, is making the vCard. For this, I had to look at the vCard 4.0 specification to figure out what the property names and values are. Then I browsed around different sites (takes you to a random Indieweb 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 (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.

Now for the final part, making the userscript. Inspired by Ryan Barret and his userscript Let’s Talk, 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 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.

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 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 🙂

Also posted on IndieNews{.u-syndication}