In Part 1 of this series, I explained various implementations of the rel microformat on A Blog Not Limited. While explaining rel-me, I briefly touched on the XFN microformat.
It's now time to spend some more time on this very cool microformat, which was one of the first.
Putting a Human Face on Links
Created by the GMPG, the XHTML Friends Network is an amazingly simple and decentralized way to represent human relationships by using the rel attribute in links (<a>).
The concept is identical to what I described in Part 1 for link-based relationships:
<a href="http://twitter.com/emilylewis" rel="me">Twitter</a>
In this example, the addition of rel="me" indicates that the link destination (href) references a page about me (or for which I am responsible).
The XFN microformat takes this "human" referencing for link-based relationships further than what I've already discussed.
We Are All Connected
XFN extends the concept of rel-me beyond an individual's personal identification to the social relationships a person has. You simply add multiple values that describe those relationship to the rel attribute of a link.
For example, I frequently reference my friend and boss, Ian, in my blog articles:
<a href="http://www.iso-100.com/" rel="met colleague co-worker friend">Ian Pitts</a>
In this example, I've added rel="met colleague co-worker friend" to the link referencing his personal blog. The rel values indicate that:
- I have
metIan in person. - Ian is a
colleague, meaning that I regard him as a peer with similar interests and skills. - Ian is my boss and, therefore, a
co-worker. - I consider Ian my
friend(isn't he lucky).
How We Are Connected
The XFN specification provides relationship values that are intentionally simplistic.
Friendship/Familiarity
Only one value from this list can be used:
friend: varies according to personal definitions. At its base, it is the highest level of "intimacy" in the familiarity category.acquaintance: implies a mutual familiarity.contact: someone for whom you have contact information.
Physical
met indicates someone you have met in person. Can exist independently of all other values.
Professional
One or both of these values can be used:
colleague: someone with similar interests and/or skills; a peer.co-worker: someone who shares an employer with you.
Geographic
Only one of these values can be used:
co-resident: someone with whom you share a street address.neighbor: a much broader geographic reference, usually someone that lives nearby (however you define that), but not at the same street address.
Familial
Only one of these values can be used:
child: someone you parented, either biological or adoptive.parent: someone who parented you, either biological or adoptive.sibling: someone with whom you share a parent, again either biological or adoptive, as well as through marriage.spouse: someone to whom you are (or feel you are) married, legally or not.kin: any relative of yours, either through blood, marriage or adoption.
Romantic
Any one or all of these values can be used:
muse: someone who inspires you.crush: someone to whom you are attracted, but who may not reciprocate the feelings or even know you are alive.date: someone you date on a regular basis.sweetheart: someone with whom you are emotionally and/or physically intimate, and to whom you are committed.
Because of my own confusion when I began this endeavor, I feel it is worth explaining the muse value. Even though it exists in the romantic category, it is from a comparative perspective in relation to rational. Inspiration isn't rational, thus it is romantic.
I frequently include links to some of my heroes in the industry (Jeffrey Zeldman, Eric Meyer and Jason Santa Maria, to name a few). And for all of these, I include rel="muse".
This in no way indicates a romantic relationship. I simply (deeply) admire their work and look to them often for inspiration.
And just as a personal aside: I found the descriptions of these these romantic values extremely funny and entertaining.
Personal Identity
me indicates a link to yourself at a different location (href).
This is the only "relationship" that exists on its own exclusive of all other relationship values.
I'm hoping it is obvious why, but in case it isn't just consider that even if you feel you are a friend to yourself, assigning the friend value is redundant. As is met and all the others. You just don't need them and they aren't valid.
Deliberately Simple = Effective
Even me, as a very detail-oriented person, can appreciate the simplicity and effectiveness of these values. Rather than debating that someone is, for example, a supervisor or subordinate, simply accept that co-worker is a broader value that encompasses both.
It is worth mentioning that there is no specific order that needs to be followed when using these values.
Additionally, reciprocity in these values isn't required. So, if you reference a person as a friend and they reference you as an acquaintance, it isn't a problem (unless you suffer from extremely low self-esteem and take it personally).
Specifying a Profile
Update: 04/21/2010
Recently, the microformats community completed updates to the profile URIs for all microformats. The correct values have been updated in this article. See my Microformats Profile URIs Updated post for further details.
In addition to declaring rel values on links to anyone you know, the GMPG recommends you also let browsers and search engines know that your pages support XFN by specifying the XFN profile in the <head> of pages with XFN-friendly links.
For me, I chose to declare the profile on all of my pages since my <head> is maintained in a global include file. This just makes it easier for me to maintain, plus, at a minimum, rel="me" appears on all my pages (in the footer links to my Flickr, Delicious, iLike and Twitter profile pages):
<head profile="http://gmpg.org/xfn/11">
Update: 09/30/2008
I recently discovered there is a combined profile for all non-draft microformats that can be used in a document <head>:
<head profile="http://purl.org/uF/2008/03/http://microformats.org/profile/specs">
If you are using one or more microformats on a page, you can use this combined profile if the microformats are non-draft (which XFN is).
However, for draft microformats, you need to specify the profile for that particular microformat. Thus far, all of the microformats I've discussed in this series (with the exception of rel-home) are non-draft.
Tell the World
The GMPG also advises letting folks know that your site is XFN-friendly. They even provide a badge you can add to your site:
Personally, I'm not a big fan of buttons and badges. I prefer a less obtrusive aesthetic. But I do support the effort, so I added an XFN link to my footer:
<a href="http://gmpg.org/xfn" title="XHTML Friends Network Friendly">XFN</a>
Make It Easier for Yourself
While simply adding an attribute and a few values to hyperlinks barely constitutes "heavy-lifting," there are a few tools available that make XFN easier to implement:
- XFN 1.1 Creator is a web-based wizard that creates links with proper XFN values, and is available in several languages.
- MT Blogroll 2.12 Manual is a plug-in for Movable Type that allows you to define XFN relationships for blogroll links.
- XFN Link Creator is another wizard that create links with XFN values. It also allows you to specify containing markup, as well as
titlevalues for links. - WordPress Links Manager is configured to allow you to define XFN relationships for blogroll links.
- WP Microformatted Blogroll 0.2 is a WordPress plugin that outputs microformat-annotated links on your blog.
- rel-lint is a JavaScript-based bookmarklet that checks for known XFN values and flags those it doesn't recognize.
The Semantic Web
I know I've said it over and over again (and this won't be even close to the last time I say it): semantics are one of the primary benefits of microformats, and XFN is no exception.
The use of microformats adds structure and meaning to web content, making it both human– and machine–readable. And, even better, they do it by using existing standards for markup and data. Brilliant!
Microformats bring us one step closer to The Semantic Web envisioned by Tim Berners-Lee.
The Social Web
As much as semantics alone give me reason to implement microformats on this blog, I realize it may not be enough for some people. For those folks, I suspect the "social" aspects of XFN may be more important.
Social Search
Rubhub is a social search engine where you can submit your site, and it is indexed and compared to other sites in the rubhub index to identify any social relationships.
Once indexed, you can see the social results of your site, including other sites tied to your identity (via rel="me") and sites from people who reference you (including how they reference you).
Visualizations
XFN Graph creates spider diagrams of how sites link to each other, providing a visual representation of social relationships between site/blog authors. From this, you can see how people connect to others and find new people who share similar interests as you.
Connectivity
Using XFN, Google's Social Graph API makes it easier to find friends in new places on the web.
Its My Connections demo application, for example, shows how you are connected to other people. Here's a snapshot of results from A Blog Not Limited:
Friend Lists
There are many sites, particularly social networking sites, that support XFN markup on friends/contacts lists. Both Twitter and LinkedIn, for example, add rel="contact" to their link lists of followers and contacts.
Taking it a step further, several sites publish hCard+XFN friends lists, which can be used for importing/subscribing to other sites that support hCard+XFN. (I'll be covering the hCard microformat in greater detail in Part 3 of this series.)
This lays the foundation to ultimately allow users to change social network information on one site and have other sites automatically updated.
Identity Consolidation
As I mentioned in Part 1, XFN is essential for identity consolidation.
Social Networking Sites
For example, many social networking sites include rel="me" with their profile page links, including Flickr, Twitter, LinkedIn and more. So, where any page claims the other, the divided identity is consolidated.
ClaimID
Also, there are online identity consolidation services that use XFN. claimID, for example, allows you to manually set up a profile with all of your online identities consolidated on one page, each of which can be annotated with rel="me". Here's a snapshot of my claimID profile with links that include the rel-me microformat:
An added benefit of setting up a claimID profile is that it gives you an OpenID.
OpenID is an open, decentralized and free framework for user-centric digital identity. It uses existing web technologies to transform existing digital identities (such as a blog, photostream, etc.) into an account that can be used at sites supporting OpenID logins. This isn't really relevant to the XFN discussion, but still pretty cool.
Plaxo
There is also Plaxo's Open Social Graph, which features a crawler that starts with a URL you enter and searches for rel="me" links. It then crawls those links, as well, until it runs out of links to follow.
It also searches for bi-directional links to establish a "verified claim" that it is the same person at both locations (href). Here's a snapshot of the crawler results for A Blog not limited:
Plaxo's online address book and social networking service also supports XFN by automatically adding rel="me" to any personal sites you add to your profile. Each of the links for "Emily on the Web" from my Plaxo profile have the rel-me microformat annotated:
Even Google's Social Graph API features a demo application, Site Connectivity, that shows your consolidated identity by listing sites it knows is you, as well as those it thinks might be. Here's a snapshot of the results I got for A Blog Not Limited:
A Bit of Style
Also mentioned in Part 1, you can use CSS attribute selectors to uniquely style links with specific rel values.
For example, say you wanted to take advantage of the XFN microformats icons, you would use attribute selectors to declare:
a[rel~="friend"]:before {content: url(xfn-friend.png);}
In browsers supporting the CSS 2.1 specification (which would not be that bitch of a browser IE6), this could display as:
Coming in Part 3
That concludes my take on XFN. Getting Semantic With Microformats, Part 3 will cover the hCard microformat.
Stay tuned …
Update: 9/22/2008
I recently discovered that Christophe Ducamp has translated this article in French: Parvenir à la Sémantique avec les Microformats, 2ème partie – XFN.
Unfortunately, I don't read French, so I can't attest to the translation. But in the spirit of spreading the good word about microformats, I'm going to promote the translation and hope it is accurate. The way I see it, the more people who know about microformats, the better.
Update: 11/04/2008
Jan Sládek has translated this article in Czech: Kódujme sémanticky s mikroformáty: 2. část - XFN.
I don't read Czech either, so I can't speak for the translation. But the intention is good, so I'm promoting it.
Update: 11/27/2008
Jia Mi has translated this article in Chinese: 使用微格式来丰富网站语义: XFN.
♥ Share the Love