Add hCard to Your Site

Revision as of 21:40, 29 September 2008 (edit) Sancho (contribs) � Previous diff		Current revision (00:02, 11 November 2008) (edit) (undo) Dssgsdg (contribs) m (linked to useful tool - hcard validator)
(3 intermediate revisions not shown.)
Line 1:		Line 1:
	The other day we had OpenID and microformats evangelist Chris Messina over for a chat about Webmonkey. He told us, "you know, we appreciate all the love you give microformats, but when are you going to start applying them yourself?"		The other day we had OpenID and microformats evangelist Chris Messina over for a chat about Webmonkey. He told us, "you know, we appreciate all the love you give microformats, but when are you going to start applying them yourself?"
-	After a few minutes of hmm'ing and haw'ing, we agreed to do exactly that.	+	After a few minutes of hemming and hawing, we agreed to do exactly that.
	There's no reason not to. It only takes a little bit of HTML know-how and a few minutes of your time.		There's no reason not to. It only takes a little bit of HTML know-how and a few minutes of your time.
-	My task: change the contact information on the monkey-bites blog to include hCard information. It is also the Webmonkey way to write it up in the process.	+	Our task: change the contact information on the monkey-bites blog to include hCard information. It is also the Webmonkey way to write it up in the process.
	So here we go.		So here we go.
Line 17:		Line 17:
	For example, you see an address on a web page, and you can instantly associate it to an address. A browser sees this address and equates it with anything else on the page. Microformats handholds the browser into identifying it for exactly what it is. There are microformats for maps, addresses, phone numbers, calendar events, and so on. Hcard is one such microformat. It identifies addresses to the browser. As hCards grow more popular, future browsers will know what to do with them.		For example, you see an address on a web page, and you can instantly associate it to an address. A browser sees this address and equates it with anything else on the page. Microformats handholds the browser into identifying it for exactly what it is. There are microformats for maps, addresses, phone numbers, calendar events, and so on. Hcard is one such microformat. It identifies addresses to the browser. As hCards grow more popular, future browsers will know what to do with them.
-	How about an example?	+	===How about an example?===
	Here's an example of an hcard address as it appears to you and me through the browser:		Here's an example of an hcard address as it appears to you and me through the browser:
Line 50:		Line 50:
	</pre>		</pre>
	<br />		<br />
		+
		+	==The Practical Applications of hCard==
	There are many practical applications to microformats. Off the top of my head, perhaps I wanted to write a simple script to download a web page and look for hCard tags. The script would gather and put the information into a format my computer's address book will recognize. Once done, I'd have a program I can point to a website. It would scour the pages looking for hCards. If the website has any hCards in it, it would add it to my address book. Nifty!		There are many practical applications to microformats. Off the top of my head, perhaps I wanted to write a simple script to download a web page and look for hCard tags. The script would gather and put the information into a format my computer's address book will recognize. Once done, I'd have a program I can point to a website. It would scour the pages looking for hCards. If the website has any hCards in it, it would add it to my address book. Nifty!
Line 55:		Line 57:
	There are some Firefox toolbars that do exactly that sort of thing, and you can check them out at the end of this article. Keep in mind that microformats, like hCard, are an emerging technology. As Messina reminded us, if more people adopt it, the more likely it is going to catch on and make exchanging information all the more easier.		There are some Firefox toolbars that do exactly that sort of thing, and you can check them out at the end of this article. Keep in mind that microformats, like hCard, are an emerging technology. As Messina reminded us, if more people adopt it, the more likely it is going to catch on and make exchanging information all the more easier.
-	==Implementing HCards==	+	==Implementing hCards==
	The first step is to download the static page wrapping the monkey_bites blog. Every page in most browsers offer the ability to view_source. If you want to follow along, go to [http://www.webmonkey.com/blog monkey_bites], right click on the page near our masthead (where all our names are) and select '''View Page Source'''.		The first step is to download the static page wrapping the monkey_bites blog. Every page in most browsers offer the ability to view_source. If you want to follow along, go to [http://www.webmonkey.com/blog monkey_bites], right click on the page near our masthead (where all our names are) and select '''View Page Source'''.
Line 146:		Line 148:
	<br />		<br />
-	To see what it looks like, head over to [http://www.webmonkey.com/blog monkey_bites].	+	To see what it looks like, check out the side rail over on the [http://www.webmonkey.com/blog monkey_bites] blog.
-	Note: We omitted a lot of our personal information, like addresses, from our finalized example above. It's simply because we don't have our entire address on the sidebar of our wiki or blog for obvious reasons -- we are afraid of the government and extra-terrestrials.	+	Note: We omitted a lot of our personal information, like addresses, from our finalized example above. To put it simply, we don't have our entire address on the sidebar of our blog for obvious reasons: we are afraid of the government and extra-terrestrials.
	==Support for hCard==		==Support for hCard==
Line 163:		Line 165:
	* [http://blog.codeeg.com/tails-firefox-extension/ Tails Extension]		* [http://blog.codeeg.com/tails-firefox-extension/ Tails Extension]
	* [http://www.orch8.net/ AlchemyPoint Extension]		* [http://www.orch8.net/ AlchemyPoint Extension]
		+	* [http://hcard.geekhood.net hCard Validator]
	'''Internet Explorer Support'''		'''Internet Explorer Support'''
-	The upcoming release of Internet Explorer 8 is rumored to support microformats.	+	The upcoming release of Internet Explorer 8 is rumored to support microformat

---

Current revision

The other day we had OpenID and microformats evangelist Chris Messina over for a chat about Webmonkey. He told us, "you know, we appreciate all the love you give microformats, but when are you going to start applying them yourself?"

After a few minutes of hemming and hawing, we agreed to do exactly that.

There's no reason not to. It only takes a little bit of HTML know-how and a few minutes of your time.

Our task: change the contact information on the monkey-bites blog to include hCard information. It is also the Webmonkey way to write it up in the process.

So here we go.

This article is a wiki. If you want to add your own advice to creating an hCard in HTML, add your advice here.

Contents 1 A Little Background 1.1 How about an example? 2 The Practical Applications of hCard 3 Implementing hCards 4 Support for hCard

A Little Background

If you don't know about hCard information or microformats, you might want to check out our Introduction to Microformats. In short, microformats add tags to information on a website that to you and me is obvious.

For example, you see an address on a web page, and you can instantly associate it to an address. A browser sees this address and equates it with anything else on the page. Microformats handholds the browser into identifying it for exactly what it is. There are microformats for maps, addresses, phone numbers, calendar events, and so on. Hcard is one such microformat. It identifies addresses to the browser. As hCards grow more popular, future browsers will know what to do with them.

How about an example?

Here's an example of an hcard address as it appears to you and me through the browser:

Here's an example of how an hCard looks like in HTML code:

<div id="hcard-Scott-Gilbertson" class="vcard">
        <a class="url fn" href="http://blog.wired.com/monkeybites/">Scott Gilbertson</a>
        <div class="org">Wired News</div>
        <a class="email" href="mailto:scott_gilbertson@wired.com">scott_gilbertson@wired.com</a>
        <div class="adr">
            <div class="street-address">3rd Floor, 520 Third Street</div>
            <span class="locality">San Francisco</span>,
            <span class="region">CA</span>,
            <span class="postal-code">94107</span>
            <span class="country-name">USA</span>
        </div>
    </div>

The Practical Applications of hCard

There are many practical applications to microformats. Off the top of my head, perhaps I wanted to write a simple script to download a web page and look for hCard tags. The script would gather and put the information into a format my computer's address book will recognize. Once done, I'd have a program I can point to a website. It would scour the pages looking for hCards. If the website has any hCards in it, it would add it to my address book. Nifty!

There are some Firefox toolbars that do exactly that sort of thing, and you can check them out at the end of this article. Keep in mind that microformats, like hCard, are an emerging technology. As Messina reminded us, if more people adopt it, the more likely it is going to catch on and make exchanging information all the more easier.

Implementing hCards

The first step is to download the static page wrapping the monkey_bites blog. Every page in most browsers offer the ability to view_source. If you want to follow along, go to monkey_bites, right click on the page near our masthead (where all our names are) and select View Page Source.

This is what it will look like:

<ul>
   <li><span><a href="/blog/author/snackfight">Michael Calore</a></span> | 
      <a href="mailto:mcalore@webmonkey.com"><span class="email_icon">    </span>E-mail</a> | 
      <a href="/user/profile/snackfight">View profile</a>
   </li> 
   <li><span><a href="/blog/author/sancho">Scott Loganbill</a></span> | 
      <a href="mailto:sloganbill@webmonkey.com"><span class="email_icon">    </span>E-mail</a> | 
      <a href="/user/profile/sancho">View profile</a>
   </li> 
   <li><span><a href="/blog/author/duvander">Adam DuVander</a></span> | 
      <a href="mailto:wired@duvander.com"><span class="email_icon">    </span>E-mail</a> | 
      <a href="/user/profile/duvander">View profile</a>
   </li> 
   <li><span><a href="/blog/author/luxagraf">Scott Gilbertson</a></span> | 
      <a href="mailto:sgilbertson@webmonkey.com"><span class="email_icon">    </span>E-mail</a> | 
      <a href="/user/profile/luxagraf">View profile</a>
   </li> 
</ul>

We want to incorporate the hCard code in the example at the top of the article. hCards take on a very similar format to vCards. vCards are those confusing files attached to emails that, when you double click them, open up a random email program you thought you deleted a long time ago.

For those of you who keep these email address books current by importing vCards, good news for you! For those of us who don't, just sleep tight secure in your knowledge there are some people out there that know what vCards do. Let's move on, shall we?

Okay, so each div, a and span tag contains an identification (id=) or class (class=) attribute that tells you what it is for.

This identifies the section as being an hCard, but since hCards share a format with vCards, we add it to the "vcard" class.

<div id="hcard-Scott-Loganbill" class="vcard">

This anchor tag makes my name, designated fn for family name, a link. In this case I'm making it clickable to my user profile on Webmonkey. You can add your blog if you want or just remove the href= reference entirely.

<a class="url fn" href="http://www.webmonkey.com/user/profile/sancho">Scott Loganbill</a>

Nominating "org" as your class for the subsequent tag identifies your organization or where you work. I work for Wired News and identified as such.

<div class="org">Wired News</div>

My email address. Adding the mailto: part is a simple HTML trick to automatically open an email program when the link is clicked on.

<a class="email" href="mailto:scott_loganbill@wired.com">scott_loganbill@wired.com</a>

A nested div and span will designate my address. All class identifiers you choose to use need to be entered exactly as it is below.

   <div class="adr">
      <div class="street-address">520 Third Street, 3rd Floor</div>
      <span class="locality">San Francisco</span>,
      <span class="region">CA</span>,
      <span class="postal-code">94107</span>
      <span class="country-name">USA</span>
    </div>

You can always remove or replace any part of your vCard. For example, it won't break the standard if you remove your address.

Don't forget the last </div> to close off the opening hCard/vCard tag.

So while we put the example above in the oven, I'll pull out this following example of complete hCards for the Webmonkey crew I prepared before the show.

<ul>
<li>
   <div id="hcard-Michael-Calore" class="vcard">
   <a class="url fn" href="/blog/author/snackfight">Michael Calore</a>  | 
   <a class="email" href="mailto:mike@webmonkey.com"><span class="email_icon">    </span>E-mail</a>  | 
   <a class="url" href="/user/profile/snackfight">View profile</a>
   </div>
</li>
<li>
   <div id="hcard-Scott-Loganbill" class="vcard">
   <a class="url fn" href="/blog/author/sancho">Scott Loganbill</a>  | 
   <a class="email" href="mailto:scott@webmonkey.com"><span class="email_icon">    </span>E-mail</a>  | 
   <a class="url" href="/user/profile/sancho">View profile</a>
   </div>
</li>
<li>
   <div id="hcard-Adam-DuVander" class="vcard">
   <a class="url fn" href="/blog/author/duvander">Adam DuVander</a>  | 
   <a class="email" href="mailto:wired@duvander.com"><span class="email_icon">    </span>E-mail</a>  | 
   <a class="url" href="/user/profile/duvander">View profile</a>
   </div>
</li>
<li>
   <div id="hcard-Scott-Gilbertson" class="vcard">
   <a class="url fn" href="/blog/author/luxagraf">Scott Gilbertson</a>  | 
   <a class="email" href="mailto:sgilbertson@webmonkey.com"><span class="email_icon">    </span>E-mail</a>  | 
   <a class="url" href="/user/profile/luxagraf">View profile</a>
   </div>
</li>
</ul>

To see what it looks like, check out the side rail over on the monkey_bites blog.

Note: We omitted a lot of our personal information, like addresses, from our finalized example above. To put it simply, we don't have our entire address on the sidebar of our blog for obvious reasons: we are afraid of the government and extra-terrestrials.

Support for hCard

Eager to get ahead of the curve? The following browsers and extensions currently support microformats.

This section was copied from Tutorial:Get_Acquainted_with_Microformats. If you fix anything here, you should probably fix it there too.

Firefox Support Firefox 3 provides an API for microformat support, but currently has no user interface. The following add-ons feature microformat support.

• Greasemonkey script (uses Greasemonkey extension)
• Microformats Bookmarklet
• Operator Extension
• Tails Extension
• AlchemyPoint Extension
• hCard Validator

Internet Explorer Support The upcoming release of Internet Explorer 8 is rumored to support microformat

• This page was last modified 00:02, 11 November 2008.