What are microformats?

• 
• contact • Operator • coffee • sessions • search

Problem statement

• Why does every new "social" site make you:
  • re-enter all your personal profile info?
  • re-add all your friends?
  • re-turn off notifications?
  • re-specify privacy preferences?
  • re-block negative people?
  • re-... etc.
• social network fatigue problem - Brian Oberkirch

What continues to be the problem?

• How many site profiles / icons?
• What happens when you:
  • get promoted?
  • change companies?
  • move to a new city?
  • want to change your icon?
• How many sites do you have to update?
• "profile update/maintenance problem"

What else continues to be a problem?

• On how many websites do you have "friends"?
• What happens when you:
  • meet someone at a conference
  • establish a good friendship
  • or never want to see someone again?
• How many friends lists do you have to update?
• "social network update/maintenance problem"

Goal: user control over data

• move or syndicate for example:
  • your profile information
  • your friends lists and relationships
  • your profile equivalency / identity consolidation
• Acknowledge and give users control of their data.
• data portability + URL stability = data syndicatability

Goal: easier for users

• New social networks should let you import/subscribe:
  • your profile information
  • your friends list and relationships
• from any existing profile of yours
• portability enables syndication enables subscription
• = "social internetwork", a network of social networks

Goal: easier for sites

• Easier for sites = more adoption:
  • Accessible to web designers (not just developers)
  • Use modern web design practices (e.g. POSH)
  • Incremental results for incremental effort
  • Modular solutions - building blocks (not "all in one")
• Make it easy for current sites:
  • Work with current URLs (don't require new URLs)
  • Work with current content (don't require duplication)
  • Also helps reliability per the DRY principle

Building Block: profile information

• 
  screenshot by Tara Hunt. Some rights reserved.
• info:
  • name
  • photo
  • notes
  • blog hyperlink
• Building block: hCard
• examples
  • dentist
  • 2007 dConstruct speakers

Building Block: profile equivalency

• figure by GMPG. Some rights reserved.
• users hyperlink to identities
  • social network profile(s)
  • home page
  • blog
  • OpenID(s)
• Building block: XFN rel="me"

Building Block: friends list

• screenshot from Twitter.
  icons copyrighted by their owners.
• friends lists with:
  • hyperlinks to their profiles
  • friend icons
  • name (<img alt=".." />)
• Building blocks:
  • hCards for their link, icon, name
  • XFN for relationships

Social Network Portability: How-To

• Publish microformats building blocks in user profiles
  • hCard on user profile pages
  • XFN rel="me" hyperlinks to user blogs/home pages
  • hCard+XFN friends lists
  • XFN rel="me" to separate friends list pages
  • XFN+HTML4 pagination rel="me next", rel="me prev"
• 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

How To: hCard profiles

• 
  screenshot by Tara Hunt. Some rights reserved.
• • <div class="vcard">
  •  <div class="fn">Chris Messina</div>
  •  <img class="photo" src="cm.png"
      alt="Photo of Chris" />
  •  <div class="note">
  •   <p>Chris is originally...</p>
  •   <p>...</p>
  •  </div>
  •  <a class="url" rel="me"
    href="http://...">Chris's blog</a>
  • </div>

How To: XFN rel="me" profile equivalency

• screenshot from Pownce.
  icons copyrighted by their owners.
• • <a rel="me" href="http://flickr.com/people/...">
 Flickr Profile</a>
  • <a rel="me" href="http://technorati.com/...">
 Technorati Profile</a>
  • <a rel="me" href="http://pownce.com/t">
 Pownce Profile</a>
  • <a rel="me" href="http://twitter.com/t">
 Twitter Profile</a>
  • <a rel="me" href="http://upcoming.yahoo.com/...">
 Upcoming Profile</a>
  • <a rel="me" href="http://tantek.com/">
 tantek.com</a>
• rel="me" link symmetry required for profile equivalency

How To: hCard+XFN friends lists

• screenshot from Twitter.
  icons copyrighted by their owners.
• • <span class="vcard">
  •  <a class="url" rel="contact"
   href="http://twitter.com/davemc500hats">
  •   <img class="fn photo"
  •        alt="Dave McClure" src="dmc500.png" />
  •  </a>
  • </span>
  • <span class="vcard">
  •  <a class="url" rel="contact"
   href="http://twitter.com/factoryjoe">
  •   <img class="fn photo"
  •        alt="Chris Messina" src="cm.png" />
  •  </a>
  • </span>
  • ... etc.

How To: separate friends page

• screenshot from Twitter.
  icons copyrighted by their owners.
• • <a rel="me" href="/t/friends">View All…</a>
• be sure to link from friends page back to the profile with rel="me"

How To: paginated friends lists

• screenshot from Twitter. icons copyrighted by their owners.
• "Previous" and "Next" links on a paginated friends list
  • <a rel="me prev" href="/t/friends?page=6">&#171; Previous</a>
  • <a rel="me next" href="/t/friends?page=8">Next &#187;</a>

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

hCard import subscribe to sign up users

• most widely supported profile format
• more hCard users than any one site
• single field sign up?
• beware 3rd party authorization
  • the user trusts your site
  • phishing problems with roundtrips
  • enrollment authorization MITM problems
  • for more: CHI 2006: Why Phishing Works
• consider implementing OpenID in addition
  • but insist on not sacrificing user experience

find friends

• improvement: don't ask my Twitter!
• Pownce: Add Friends
• problem: new friends from Twitter
• syndicate friends lists!
• problem: what if same nickname is different people?
• problem: each network one at a time?

find friends across the web

• 
  original photo by Jeremy Keith. Some rights reserved.
• use Google SG API
  1. other sites I'm on
  2. friends across sites

Social Network Portability incentives

• Why would any company support this?
  • Some actually "do the right thing"
  • Get more users sooner
  • Trustworthy data/syndication host
  • Open standards network effects
  • Outgrow the competition

Social Network Portability non-goals, dangers

1. Do not ask for other username/passwords
   • Gmail / Yahoo Mail etc. passwords
   • Teaches users bad habits - to be phished
2. Don't spam users' address books
   • Quechup did this last year to great disdain
3. Avoid violating user expectations -Adaptive Path
   • users expect signup email address is private
   • consolidating identities based on email bad
   • obvious: don't publish user's email
   • less obvious: don't publish a unique hash
   • hashes can be used to auto-consolidate

Social Network Portability: what next

• Implement today based on public data
• Keep up with updates on wiki:
• microformats.org/wiki/social-network-portability
• Add your site as you implement each aspect.
• look into OAuth support for private data

Colophon

• XHTML
• CSS
• S5 v1.1xoxo
• XOXO
• hCard
• hCalendar
• rel="license"
• Presentation text is Public Domain.

Thanks!