26. Building Block: proďŹle information
â˘
info:
â˘
name
â˘
photo
â˘
notes
â˘
hyperlink to his blog
â˘
Building block: hCard
27. Building Block: proďŹle equivalency
users hyperlink to their identities
â˘
social network proďŹle(s)
â˘
home page
â˘
blog
â˘
OpenID(s)
Building block: XFN rel=quot;mequot;
28. Building Block: friends list
â˘
friends lists with:
â˘
hyperlinks to their proďŹles
â˘
friend icons
â˘
name (in img alt text)
â˘
Building blocks:
â˘
hCards for their link, icon, name
â˘
XFN for relationships
29. Social Network Portability: How-To
â˘
Publish microformats building blocks in user proďŹles
â˘
hCard on user proďŹle pages
â˘
XFN rel=quot;mequot; hyperlinks to user blogs/home pages
â˘
hCard+XFN friends lists
â˘
XFN rel=quot;mequot; to separate friends list pages
â˘
XFN+HTML4 pagination rel=quot;me nextquot;, rel=quot;me prevquot;
â˘
Subscribe to microformats for proďŹles. Let the user:
â˘
subscribe to their hCard user proďŹle
â˘
subscribe to their hCard+XFN supporting friends lists
â˘
more: microformats.org/wiki/social-network-portability
30. How To: hCard proďŹles
<div class=quot;vcardquot;>
 <div class=quot;fnquot;>Chris Messina</div>
 <img class=quot;photoquot; src=quot;cm.pngquot;
      alt=quot;Photo of Chrisquot; />
 <div class=quot;notequot;>
  <p>Chris is originally...</p>
  <p>...</p>
 </div>
 <a class=quot;urlquot; rel=quot;mequot;
    href=quot;http://...quot;>Chris's blog</a>
</div>
31. How To: XFN rel=quot;mequot; proďŹle equivalency
â˘
<a rel=quot;mequot; href=quot;http://flickr.com/people/...quot;>
 Flickr Profile</a>
â˘
<a rel=quot;mequot; href=quot;http://technorati.com/...quot;>
 Technorati Profile</a>
â˘
<a rel=quot;mequot; href=quot;http://pownce.com/tquot;>
 Pownce Profile</a>
â˘
<a rel=quot;mequot; href=quot;http://twitter.com/tquot;>
 Twitter Profile</a>
â˘
<a rel=quot;mequot; href=quot;http://upcoming.yahoo.com/...quot;>
 Upcoming Profile</a>
â˘
<a rel=quot;mequot; href=quot;http://tantek.com/quot;>
 tantek.com</a>
rel=quot;mequot; link symmetry required for proďŹle equivalency
32. How To: hCard+XFN friends lists
<span class=quot;vcardquot;>
 <a class=quot;urlquot; rel=quot;contactquot;
   href=quot;http://twitter.com/davemc500hatsquot;>
  <img class=quot;fn photoquot;
       alt=quot;Dave McClurequot; src=quot;dmc500.pngquot; />
 </a>
</span>
<span class=quot;vcardquot;>
 <a class=quot;urlquot; rel=quot;contactquot;
   href=quot;http://twitter.com/factoryjoequot;>
  <img class=quot;fn photoquot;
       alt=quot;Chris Messinaquot; src=quot;cm.pngquot; />
 </a>
</span>
... etc.
33. How To: separate friends page
â˘
<a rel=quot;mequot; href=quot;/t/friendsquot;>View AllâŚ</a>
be sure to link from friends page back to the proďŹle with
rel=quot;mequot;
34. How To: paginated friends lists
quot;Previousquot; and quot;Nextquot; links on a paginated
friends list
â˘
<a rel=quot;me prevquot; href=quot;/t/friends?page=6quot;>«
Previous</a>
â˘
<a rel=quot;me nextquot; href=quot;/t/friends?page=8quot;>Next
»</a>
35. Social Network Portability publishing support
â˘
What sites and companies support this?
Lots!
â˘
Check microformats wiki for latest:
â˘
hCard supporting user proďŹles
â˘
hCard+XFN supporting friends lists
http://microformats.org/wiki/hcard-supporting-user-proďŹles
http://microformats.org/wiki/hcard-xfn-supporting-friends-list