recognizing what to markup
Take a look at your user's profile page and note what elements in the page correspond to the following pieces of information about the person whom the profile page represents:
- "full name" (AKA their given-name and family-name and any additional-name(s))
- photo or avatar
- hyperlink to their profile (often around their photo)
- links to other profiles
- links to instant messaging services
- other contact info (like email)
- location info (address, or even just city or country)
find the minimally enclosing element
Now find the smallest element on the profile page that contains all of the above. If no such element exists short of the
body element, you can either use the body element as the containing element, or create a new
div that precisely surrounds just the above elements.
- Add the class name "vcard" to that minimally enclosing element.
- Add the class name "fn" to the element containing the "full name".
- This page is a stub. ... need to add more details on specific properties for hCard user profiles...
hCard XFN friends list
In order to support hCard+XFN friends lists, add hCard and XFN markup to the friends list on the profile page, as well as adding a rel="me" to any "View All..." type links to view the entire friends list (or even the first page thereof).
friends vs acquaintances vs contacts
fan of vs my fans
Markup any "fan of" links as rel="acquaintance".
There is no current XFN or microformat for marking up the link relationship to people that are "my fans", however, you MAY use rel="fan" as a poshformats way of marking it up. rel="fan" should only be placed on links to people who are fans of the current profile. However links to people that the current profile is a fan of MUST NOT be marked up with rel="fan".
See XFN Brainstorming for more discussion on marking up fans of vs. my fans.
See hCard authoring.