Tag Archives: XHTML Friends Network

Focus on Microformats

A number of sites have recently implemented a new breed of pre-filled registrations. This idea is called portable social networks. It enables one social networking site to access the public profile data of another via the use of microformats.

As the concepts of social media extend into the design of many modern sites, the addition of user profiles and friend lists are becoming common. It’s a relatively simple process to mark up your site so that they can become part of this exchange of data.

If you’re not yet familiar with microformats, they ‘re documented at http://microformats.org/wiki/Main_Page Most social media sites follow a common architecture, which contains a profile page for each user . The foundation is to mark up all your user information on this page with hCard microformat. if the information is fragmented there’s and include pattern that enables you to glue it all into one hCard.

Where you have additional pages containing other useful user information, such as a friend list, you should add the XFN rel=”me” attribute to any link. This will tell a parser that the linked pages are also about the user.

<a rel=”me” href=”../nareshsadasivan/friends/”>Friends</a> Often, friend list can be so long that you need to use pagination and break them into several pages. You should mark up any pagination links with rel=”me next” or rel=”me prev” . Although XFN can describe relationships well, it lacks the richness of hCard. The microformats community has now started promote the use of the joint hcards XFN design pattern for marking up friend lists.

When using icons without text , the alt attribute can be used to define the formatted name of the friend. You may have to create mapping between your site’s own relationship values and XFN. If your system doesn’t differentiate the strength of a relationship, use the default value rel=”acquaintance”. There are now sites the pull together information from multiple online identities across the net, so it’s also good  practice to add the rel=”me” to any link to an external profile.