I said on Friday that I'd show you how to add XFN markup to an hCard.  First off though I should probably say what XFN is... XFN stands for XHTML Friend Network. It's basically a way to show relationships (think MySpace, etc.) by simply using hyperlinks.

In order to show these relationships we simply add a rel attribute to a hyperlink and use a set of pre defined relationship types (friend, met, crush, etc.). It's rather basic, doesn't take much, and doesn't cause any compatibility issues (in most instances anyway). For example, you can use it with hCards since hCards use the class attribute and XFN uses the rel attribute. While this might not seem all that useful, we can use these two items to create a nice directory or a contacts list. These items could then be crawled by outside sources (although I don't know of any hCard/XFN crawler at the moment). Anyway, to help you out and show you how easy it is to add to your code, I modified the vCard code further to add in XFN markup.

VCardWithXFN.zip (1.55 kb)

With this, there are two added fields an URL and also a list of relationships (which is an enum type in the file, and also we can have more than one relationship specified). The enum list of relationships are the ones possible for XFN. However if you set the URL and add at least one relationship, the person's name will become a link pointing to the web site you specify with the appropriate relationships. And once we add it, we can format each relationship type using CSS. For example:

That would take all links marked as crush and bold them. Seems simple enough, but there are a couple down sides:

1. No real use for XFN at present. Since there isn't a decently used crawler out there matching up people based on XFN information there really isn't much use for the information other than to tell the net that you're a coworker with Billy Bob (or Jimmy, or whomever since I don't know who you work with). Sites like Twitter and LinkedIn use it for friends lists and some sites can use it to import friends lists, but it's still not used to its fullest potential.
2. It doesn't cover all instances. I like reading stuff that Scott Guthrie posts on his blog, so I have him on my blog roll. However I've never exactly met the guy, I'm not friends with him, etc. So how do I classify him? OK, thats not the best example as he'd fall under colleague but what if he were a botanist who posted pictures that I liked or something? There are certain situations where none of the tags work (they should add a cool tag or something, I don't know).
3. No one coming to your site is going to care. To be honest, no one is going to take the time to find out that the bolded crush link means you have a crush on that person. Not a single one of them. You could create a legend but people still wont care that much... Maybe I'm wrong but I don't think I've ever bothered to check (on the sites that were using XFN) what the relationship to the person was...

So basically to sum it all up, it has potential. If you use it in a personalized contacts list or something along those lines (or on a company intranet, with some crawling tech put in place to keep track of the information), it could be useful. So download the code, try it out, leave feedback, and happy coding.

   

It's amazing how little you post when you get sick... Or program for that matter... However I do have an update for you today. A little while ago, I posted about vCards, how to create them, what they were, etc. There really isn't that much to them to be honest. However you can actually take that information and embed it in your HTML with the help of hCards.

hCards are basically just HTML representations of a vCard. They do this by using the class attribute of an item to determine what the information is. So for example, the email item could be a div or an a (as in <a href=...) object with the class set to email. Then anything you place before the closing tag would be classified as the email of the hCard. All we need to do is make sure that we enclose all of this in an object that has the class of "vcard". That's all there is to it. So for example:

That would be a valid hCard (although missing a bit of information, such as my email, phone number, etc.). And since it uses the class attribute, we can use CSS to format the item the way that we want without hindering anything (which means the average person wouldn't even know that they're looking at a hCard).  In order to make your lives easier, I've modified my vCard code to output an hCard as well:

VCard.zip (1.17 kb)

You may wish to go in and modify it a bit since it is set up for individuals and not organizations, doesn't have address information, geo information, etc. However, it should show you how incredibly easy it is to create an hCard. Once I get it working, I'll show you how to add in XFN information into the mix... For now though, download the code, leave feedback, and happy coding.

   

Have you ever created your own website, or even a business website, where you wanted to have an easy way for individuals to add you to their contacts list without having to type it in themselves? That's where the vCard comes in. A vCard is a file format that is used to exchange business information (basically a digital business card). They're small, efficient, etc. and the best thing about a vCard is they're extremely easy to create:

The code above takes in some information (first name, last name, telephone number, etc.) and returns a vCard in string format so you can put it in a file (vcf is the common file extension) or really anything you want. Anyway, use the code, leave feedback, and as always happy coding.