I got no time for your rambling, old man, show me the code…

The rambling

Does anybody remember vcards? Does anybody still use them?? Does anybody still care??? And why are vcards called hcards, or is it the other way around??

Anyhow! I guess the only question that really matters is: Does Google care? It would appear that they do.

I know Microformats have lost some of their shine to the now-favored (at least by Google) microdata, but they both are still mined, as are RDFa apparently, for search results, and who knows what else.

I use them pretty regularly, mostly just for people’s names when I mention them in a post, but if I’m working on a client site that renders data that can be marked-up with “rich snippets” (as the collection of these meta-mark-ups are known), I add them. I suppose mostly because I’m kind of a geek, but also because I feel like “why not, someday to someone, it just might be useful.”

So, to the point of this post! It didn’t take long for me to get tired of trying to remember how to properly structure vcards, so I went on the hunt for a WP Plugin that would let me enter the data I wanted to add. And of course, they exist.

Or at least they did… The only one I can find reference to now is Micro Anywhere, which adds a button to your editor toolbar. When clicked, a panel appears allowing you to enter data into form fields, and, based on what you enter, an appropriate vcard is inserted into your content. However… Micro Anywhere assumes I want a div, which I rarely do, so I had to manually go and change all the divs to spans. Annoying.

Then I stumbled on Post Snippets, which allowed me to insert a boilerplate-version of a vcard, then manually add the person’s details. Again, still doing manual editing, though at least this time I was editing content not code, but then I installed a color scheme plugin for the editor, and the Post Snippet button no longer appears in the “Text” edit mode… Annoying, again.

So, now to the point of this post!

The code

This is primitive, but it suits my needs. I will likely push it to GitHub at some point, and perhaps even enhance it to handle more data. But for now, what I need is a vcard that displays first and last name and links to the person’s URL.

To do this, I created the following function:

if (!function_exists( 'atg_vcard_shortcode' )) {
	function atg_vcard_shortcode( $atts ) {
		return '<span class="vcard" itemscope="" itemtype="http://data-vocabulary.org/Person"><a class="url" itemprop="url" href="'.esc_attr($atts[2]).'" rel="v:url"><span class="fn n" itemprop="name"><span class="given-name">'.esc_attr($atts[0]).'</span> <span class="family-name">'.esc_attr($atts[1]).'</span></span></a></span>';
	}
}
add_shortcode( 'vcard', 'atg_vcard_shortcode' );

Then use that function thusly:

[vcard Aaron Grogg https://aarontgrogg.com/]

And get output like this:

<span class="vcard" itemscope="" itemtype="http://data-vocabulary.org/Person">
	<a class="url" itemprop="url" href="https://aarontgrogg.com/" rel="v:url">
		<span class="fn n" itemprop="name">
			<span class="given-name">Aaron</span> 
			<span class="family-name">Grogg</span>
		</span>
	</a>
</span>

Über simple, the shortcode simply sends three variables (they can also be wrapped in single- or double-quotes, if either name has a space in it) to the vcard shortcode. The vcard shortcode calls my function atg_vcard_shortcode. That function returns a string that inserts the three variables from the shortcode into the vcard mark-up I created, which is a mash-up of microdata & Microformats.

Easy-peasy, super-simple, feel free to harvest. Put the function part in your functions.php and enter the shortcode into any Post of Page, and you get nice, valid, “useful” rich snippets for your users (and Google) to consume.

Happy vcarding,
Atg

Top⇪