As the ideas of social media extends into the design of many modern websites, the addition of user profiles and friend lists are becoming more common. So what is the best practice for making your social network data portable with mircoformats.

Marking-up profiles and friend lists with mircoformats to any site is a relatively simple HTML coding process and involves the use of hCard and XFN. If you are not yet familiar with mircoformats I would recommend reading microformats.org/wiki/ for a quick overview.

Profiles

Most social network sites follow a standard architecture which has a profile page for each user, often with an easy to remember URL. The information about a user on this page should be marked-up with hCard.

Where you have additional pages containing other user information such as friends list you should link to them using the XFN mircoformats rel="me" attribute. The use rel=”me” will tell any parser that the linked page is also about this user

[sourcecode language="html" wraplines="true"]
<a rel="me" href="../glennjones/friends/">Your friends</a>
[/sourcecode]

Often friends list can be so long that you need to use pagination and break them into several pages. You should also mark-up the pagination links with rel="me next" and rel="me prev".

[sourcecode language="html" wraplines="true"]
<a rel="me next" href="../glennjones/friends/2">Page 2</a>
[/sourcecode]

Using rel=”me” to link to profiles on sites allows for a parser to create a consolidated identity from many different sources.

Defining the representative hCard

Often you will find that a profile page will end up with more than one hCard. There could be a compact friends list that uses the hCard-XFN pattern or other content which carries hCard mark-up such hAtom. The representative hCard concept, defines how to mark-up an hCard so that a parser can identify it as representing the profile owner. There are two patterns:

The first is an hCard where the uid, url attribute and the page source url all have the same value.

[sourcecode language="html" wraplines="true"]
<div class="vcard">
<a class="fn n url uid" href="http://www.glennjones.net/">
<span class="given-name">Glenn</span>
<span class="family-name">Jones</span>
</a>
</div>
[/sourcecode]

The second is where rel=”me” is on the same link as class=”url”
[sourcecode language="html" wraplines="true"]
<div class="vcard">
<a class="fn n url" rel="me" href="http://www.glennjones.net/">
<span class="given-name">Glenn</span>
<span class="family-name">Jones</span>
</a>
</div>
[/sourcecode]
Personally, I would use the rel="me" pattern. Because rel="me" is also the method for telling the parser that this element is a link to another profile.

Friends lists

Traditionally, XFN has been used to define relationships with friends. XFN is a simple mircoformat that allows you to represent these human relationships using rel attribute on hyperlinks.

[sourcecode language="html" wraplines="true"]
<a rel="friend met" href="../adactio" >Jeremy Keith</a>
[/sourcecode]

Although XFN can describe relationships well, it lacks the richness of hCard which is more suited to describing information such as names. The mircoformats community have started to promote the use of the joint hCard-XFN design pattern to take advantage of this. Below are the three most commonly used patterns.

1. A text list of friends full names
[sourcecode language="html" wraplines="true"]
<li class="vcard">
<a class="fn n url" rel="friend met" href="../adactio">
<span class="given-name">Jeremy</span>
<span class="family-name">Keith</span>
</a>
</li>
[/sourcecode]

2. A group of icons with no visible text
When using icons without text, the alt attribute can be used to define the fn (formatted name) of the friend.
[sourcecode language="html" wraplines="true"]
<li class="vcard">
<a class="url" rel=" friend met" href="../adactio">
<img class="photo fn" src="adactio.jpg" alt="Jeremy Keith"/>
</a>
</li>
[/sourcecode]

3. A group of icons with a username marked-up as a nickname
If you wish to use usernames rather than a full name you can change the image attributes to define a nickname.
[sourcecode language="html" wraplines="true"]
<li class="vcard">
<a class="url" rel="friend met" href="../adactio">
<img class="photo fn nickname" src="adactio.jpg" alt="adactio"/>
</a>
</li>
[/sourcecode]

I would always try and display the full name as visible text. One of the fundamental concepts of mircoformats is not to hide your data. That said, all three patterns will work.

Mapping relationship values

You will often have to create a mapping of values between your sites and XFN. If your system does not differentiate the strength of a relationship, use the default rel="acquaintance".

Trying out your mark-up

I have built a portable social network parser which can be used to test your mark-up. There is a public API on the backnetwork labs site which can produce either XML or JSON. There is also a demonstration of how a registration page could consume a site marked-up with mircoformats.

Note

This is an area of ongoing development, so some of this information may change as the portable social network concepts mature. Its always best to check the mircoformats wiki.