The document discusses how social networks can be made more interoperable by adopting common standards like microformats to publish user profile and friend network information. This would allow profile and friend data to be portable between sites and avoid siloed data. Specific microformats like hCard and XFN are presented as ways to mark up user profiles, links to other profile pages, and friends lists so they can be reused across sites to connect the social web in the way the original web connected via hyperlinks. Examples are given for how to implement hCards and XFN in profiles, profile equivalency links, and friends lists.

1. The Future Social Web

2. sr bna

3. The problem with
social networks...

4. They don’t
work together.

5. (unlike the Web)

6. The future of
social networks...

7. Make them
work together.

8. (like the Web)

9. Make it so.

10. Small pieces. Loosely joined.

11. Axioms of Web Architecture
Simplicity
Modular Design
Decentralization

12. Why don’t our social apps work this way?

13. Control
Speed
Privacy
Clean Experience

14. Missing: the power of remixable data

15. Social networking fatigue

16. brian@brianoberkirch.com
photo by Lane Hartwell

17. brianoberkirch.com
photo by Lane Hartwell

18. twitter.com/brianoberkirch
photo by Lane Hartwell

19. flickr.com/people/brianoberkirch
photo by Lane Hartwell

20. http://upcoming.yahoo.com/user/40960/
photo by Lane Hartwell

21. last.fm/user/brianoberkirch
photo by Lane Hartwell

22. How can we make social networks more
hackable? Portable? Efficient?

23. Don’t make me repeat myself.
Profile information
Friend networks
Preferences

24. Could these sites work together?

25. We have the technology:

26. Building Block: profile information
•
info:
•
name
•
photo
•
notes
•
hyperlink to his blog
•
Building block: hCard

27. Building Block: profile equivalency
users hyperlink to their identities
•
social network profile(s)
•
home page
•
blog
•
OpenID(s)
Building block: XFN rel=quot;mequot;

28. Building Block: friends list
•
friends lists with:
•
hyperlinks to their profiles
•
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 profiles
•
hCard on user profile 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 profiles. Let the user:
•
subscribe to their hCard user profile
•
subscribe to their hCard+XFN supporting friends lists
•
more: microformats.org/wiki/social-network-portability

30. How To: hCard profiles
<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; profile 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 profile 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 profile 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;>&#171;
Previous</a>
•
<a rel=quot;me nextquot; href=quot;/t/friends?page=8quot;>Next
&#187;</a>

35. Social Network Portability publishing support
•
What sites and companies support this?
Lots!
•
Check microformats wiki for latest:
•
hCard supporting user profiles
•
hCard+XFN supporting friends lists
http://microformats.org/wiki/hcard-supporting-user-profiles
http://microformats.org/wiki/hcard-xfn-supporting-friends-list

36. Open for business.

41. http://josephsmarr.com
+

45. We are on the cusp of
the Social Web
The pie is about to get a lot bigger