hcard-user-profile-authoring: Difference between revisions
(expanded quite a bit with specific notes from experience with social network implementers) |
AndyMabbett (talk | contribs) (...or avatar; grammar tweaks; use "fn" to ensure that hCard based on partial instructions is valid) |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<h1>hCard user profile authoring</h1> | <h1>hCard user profile authoring</h1> | ||
{{TOC-right}} | {{TOC-right}} | ||
| Line 7: | Line 5: | ||
== recognizing what to markup == | == recognizing what to markup == | ||
Take a look at your profile page and note what elements in the page correspond to the following pieces of information | 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: | ||
* username | * username | ||
* "full name" (AKA their given-name and family-name and any additional-name(s)) | * "full name" (AKA their given-name and family-name and any additional-name(s)) | ||
* photo | * photo or avatar | ||
* hyperlink to their profile (often around their photo) | * hyperlink to their profile (often around their photo) | ||
* links to other profiles | * links to other profiles | ||
| Line 18: | Line 16: | ||
== find the minimally enclosing element == | == find the minimally enclosing element == | ||
Now find the smallest element on | Now find the smallest element on the profile page that contains all of the above. If no such element exists short of the <code>body</code> element, you can either use the body element as the containing element, or create a new <code>div</code> that precisely surrounds just the above elements. | ||
Add the class name "vcard" to that minimally enclosing element. | *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...''' | |||
... need to add more details on specific properties for hCard user profiles... | |||
== hCard XFN friends list == | == hCard XFN friends list == | ||
| Line 29: | Line 27: | ||
=== friends vs acquaintances vs contacts === | === friends vs acquaintances vs contacts === | ||
See [[xfn-clarifications]]. | See [[xfn-clarifications#mapping_community_site_.22friends.22|XFN clarifications: mapping community site "friends"]]. | ||
=== fan of vs my fans === | === fan of vs my fans === | ||
Markup any "fan of" links as rel="acquaintance". | 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 [[poshformat]] way of marking it up. rel="fan" should only be placed on links to people are fans of the current profile. | 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 [[poshformat]] 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 [[xfn-brainstorming]] for more discussion on marking up fans of vs. my fans. | ||
Latest revision as of 13:01, 7 February 2008
hCard user profile authoring
How to add hCard to a user profile page to turn it into a hcard-supporting-user-profile.
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:
- username
- "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
See XFN clarifications: mapping community site "friends".
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 poshformat 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.
for more
See hCard authoring.