Facebook Connect in 3 Hours


  by Ryan Merket / ryanmerket.com

  February 24th, 2010




Credit: Flickr user ‘stuckinpub...
About me


  I wear a lot of hats

  I used to work at Facebook

  Co-founded Ping.fm


Credit: Flickr user ‘09traveler’
Credit: Flickr user ‘laanba’




 About me




                               I grew up in Texas
Credit: Flickr user ‘codydildy




  But now live in Oakland, CA
Ground Rules

  Ask a question at anytime (it’s a workshop)


  or send questions to @merket on Twitter




Credit: Flickr...
Our Agenda

                                   1. Why Facebook Connect?

                                          2. Back...
Why Facebook Connect?




Credit: Flickr user ‘jshappel’
400 million monthly active users

  Larger than Brazil


  60 million Connect users

Credit: Flickr user ‘nathaninsandiego’
83% people trust their friends
  over any other source.




Credit: Flickr user ‘spamily’
Identity




Credit: Flickr user ‘olivia townsend’
Identity




Credit: Flickr user ‘olivia townsend’
Identity




Credit: Flickr user ‘olivia townsend’
MOM
                                             DAD



         BOSS                               WIFE


               ...
Stream
• Stories
• Comments
• Photos
• Post to stream
• Events
• Notes
... and more
Stream
• Stories
• Comments
• Photos
• Post to stream
• Events
• Notes
... and more
Stream
Credit: Flickr user ‘laughingsquid’ - Facebook wall art




  1. Authentication

  2. Permissions

  3. Sharing

  4. Priv...
1. Authentication




Credit: Flickr user ‘gats’
1. Authentication




Credit: Flickr user ‘gats’
1. Authentication




Credit: Flickr user ‘gats’
1. Authentication




                             Facebook users = Your users

Credit: Flickr user ‘gats’
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions




Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_pe...
2. Permissions
                              • publish_stream




Credit: Facebook Developers Wiki - More info: http://wik...
2. Permissions
                              • publish_stream
                              • read_stream




Credit: Face...
2. Permissions
                              • publish_stream
                              • read_stream
                ...
2. Permissions
                              • publish_stream
                              • read_stream
                ...
2. Permissions
                              • publish_stream
                              • read_stream
                ...
2. Permissions
                              • publish_stream
                              • read_stream
                ...
2. Permissions
                              • publish_stream
                              • read_stream
                ...
2. Permissions
                              • publish_stream
                              • read_stream
                ...
3. Sharing




Credit: Mock up
4. Privacy
4. Privacy


With great power comes
greater responsibility
4. Privacy


With great power comes
greater responsibility

          Respect users’ privacy settings.
4. Privacy


With great power comes
greater responsibility

          Respect users’ privacy settings.
              Never...
4. Privacy


With great power comes
greater responsibility

          Respect users’ privacy settings.
              Never...
Sweet. But what can I do with it?




Credit: Flickr user ‘mikebehnken’
Make it easy and obvious

Credit: Flickr user ‘mikebehnken’
What not to do




Credit: Flickr user ‘mikebehnken’
Am I supposed to click those?
Am I supposed to click those?
Am I supposed to click those?
VIP?
Show them why




Credit: Flickr user ‘Ben Terrett’
Lower the hurdle




Credit: Flickr user ‘San Diego Shooter’
Social context




Credit: Flickr user ‘Ben Terrett’
Permissions




Credit: Flickr user ‘elphs rule’
Respect privacy




Credit: Flickr user ‘ex.libris’
Use the pre-built tools




Credit: Flickr user ‘spunquee’
Great. How do I get started?




Credit: Flickr user ‘spunquee’
http://facebook.com/developers
Setting up your server


  Your server will need to be able to send and receive
              data from api.facebook.com

...
The basics
The basics
Initializing the XML namespace
Initializing the XML namespace



<fb:login-button></fb:login-button>
Initializing the XML namespace



<fb:login-button></fb:login-button>

<fb-profile-pic></fb:profile-pic>
The basics
The basics
The basics
The basics
The basics
The basics
Cross domain receiver file
Filename: xd_receiver.htm
Root of your Connect URL (from application settings)
“We’re doin’ it live!”
Credit: Flickr user ‘breff’
How to go from good to great.
Credit: Flickr user ‘ciordia’
Results: Huffington Post’s referral traffic from FB has increased >300%
                         since they implemented re...
Why should they Connect?
Credit: Flickr user ‘ciordia’
NFO - News Feed Optimization




Credit: Flickr user ‘ciordia’
NFO - News Feed Optimization



                                   “NFO is the new SEO”
                                Ju...
NFO - News Feed Optimization




Credit: Flickr user ‘ciordia’
NFO - News Feed Optimization



                                JibJab.com




Credit: Flickr user ‘ciordia’
NFO - News Feed Optimization



                                JibJab.com   Plancast.com




Credit: Flickr user ‘ciordia’
NFO - News Feed Optimization



                                JibJab.com   Plancast.com   Thread.com




Credit: Flickr ...
NFO - News Feed Optimization



                                JibJab.com   Plancast.com   Thread.com




               ...
NFO - News Feed Optimization



                                JibJab.com   Plancast.com   Thread.com




               ...
NFO - News Feed Optimization



                                JibJab.com   Plancast.com   Thread.com




               ...
What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links
What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links
What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links
What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links
What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links
LPO - Landing Page Optimization
Credit: Flickr user ‘fivesensescoffee’
Credit: Flickr user ‘fivesensescoffee’
Credit: Flickr user ‘fivesensescoffee’
Tools




Credit: Flickr user ‘fivesensescoffee’
                     Amigo! Photography’
Tools
Facebook Connect Wizard
http://developers.facebook.com/setup.php
Tools
API Test Console
http://developers.facebook.com/tools.php
Tools
 Facebook Connect Playground
http://developers.facebook.com/tools.php?connect_wizard
Tools
Facebook Widgets
http://www.facebook.com/facebook-widgets/
Links
One Page by Shuffle Interactive
http://ryanmerket.com/connectdocs/
Facebook Developers Wiki
http://wiki.developers.fa...
That’s it!


Questions?




  Slides will be on slideshare.net/ryanmerket
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Facebook Connect in 3 Hours
Upcoming SlideShare
Loading in …5
×

Facebook Connect in 3 Hours

11,832 views
10,729 views

Published on

Facebook Connect in 3 Hours

* Quick overview of the benefits of integrating with Facebook Connect: more traffic, engagement, registration.
* How to determine what to build: evaluating and adding the right features of Facebook Connect to your website.
* How to get started: integrating Facebook Connect authentication to your site, social widgets
* How to go from good to great: figuring out transformative impact and how to optimize (A/B test, iterate, repeat)

3 Comments
51 Likes
Statistics
Notes
No Downloads
Views
Total views
11,832
On SlideShare
0
From Embeds
0
Number of Embeds
400
Actions
Shares
0
Downloads
686
Comments
3
Likes
51
Embeds 0
No embeds

No notes for slide

Facebook Connect in 3 Hours

  1. Facebook Connect in 3 Hours by Ryan Merket / ryanmerket.com February 24th, 2010 Credit: Flickr user ‘stuckinpublic’
  2. About me I wear a lot of hats I used to work at Facebook Co-founded Ping.fm Credit: Flickr user ‘09traveler’
  3. Credit: Flickr user ‘laanba’ About me I grew up in Texas
  4. Credit: Flickr user ‘codydildy But now live in Oakland, CA
  5. Ground Rules Ask a question at anytime (it’s a workshop) or send questions to @merket on Twitter Credit: Flickr user ‘laughingsquid’
  6. Our Agenda 1. Why Facebook Connect? 2. Back to the basics 3. What can I do with it? 4. Great. How do I get started? 5. We’re doin’ it live! 6. Go from good to great Credit: Flickr user ‘gats’
  7. Why Facebook Connect? Credit: Flickr user ‘jshappel’
  8. 400 million monthly active users Larger than Brazil 60 million Connect users Credit: Flickr user ‘nathaninsandiego’
  9. 83% people trust their friends over any other source. Credit: Flickr user ‘spamily’
  10. Identity Credit: Flickr user ‘olivia townsend’
  11. Identity Credit: Flickr user ‘olivia townsend’
  12. Identity Credit: Flickr user ‘olivia townsend’
  13. MOM DAD BOSS WIFE GF From High School Social graph Credit: Flickr user ‘FLC’ Ex-BOSS
  14. Stream • Stories • Comments • Photos • Post to stream • Events • Notes ... and more
  15. Stream • Stories • Comments • Photos • Post to stream • Events • Notes ... and more
  16. Stream
  17. Credit: Flickr user ‘laughingsquid’ - Facebook wall art 1. Authentication 2. Permissions 3. Sharing 4. Privacy Basics of Facebook Connect
  18. 1. Authentication Credit: Flickr user ‘gats’
  19. 1. Authentication Credit: Flickr user ‘gats’
  20. 1. Authentication Credit: Flickr user ‘gats’
  21. 1. Authentication Facebook users = Your users Credit: Flickr user ‘gats’
  22. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  23. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  24. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  25. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  26. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  27. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  28. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  29. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  30. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  31. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  32. 2. Permissions Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  33. 2. Permissions • publish_stream Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  34. 2. Permissions • publish_stream • read_stream Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  35. 2. Permissions • publish_stream • read_stream • email Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  36. 2. Permissions • publish_stream • read_stream • email • read_mailbox Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  37. 2. Permissions • publish_stream • read_stream • email • read_mailbox • offline_access Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  38. 2. Permissions • publish_stream • read_stream • email • read_mailbox • offline_access • create_event Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  39. 2. Permissions • publish_stream • read_stream • email • read_mailbox • offline_access • create_event • rsvp_event Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  40. 2. Permissions • publish_stream • read_stream • email • read_mailbox • offline_access • create_event • rsvp_event • sms Credit: Facebook Developers Wiki - More info: http://wiki.developers.facebook.com/index.php/Extended_permissions
  41. 3. Sharing Credit: Mock up
  42. 4. Privacy
  43. 4. Privacy With great power comes greater responsibility
  44. 4. Privacy With great power comes greater responsibility Respect users’ privacy settings.
  45. 4. Privacy With great power comes greater responsibility Respect users’ privacy settings. Never show old data.
  46. 4. Privacy With great power comes greater responsibility Respect users’ privacy settings. Never show old data. Don’t surprise the user.
  47. Sweet. But what can I do with it? Credit: Flickr user ‘mikebehnken’
  48. Make it easy and obvious Credit: Flickr user ‘mikebehnken’
  49. What not to do Credit: Flickr user ‘mikebehnken’
  50. Am I supposed to click those?
  51. Am I supposed to click those?
  52. Am I supposed to click those?
  53. VIP?
  54. Show them why Credit: Flickr user ‘Ben Terrett’
  55. Lower the hurdle Credit: Flickr user ‘San Diego Shooter’
  56. Social context Credit: Flickr user ‘Ben Terrett’
  57. Permissions Credit: Flickr user ‘elphs rule’
  58. Respect privacy Credit: Flickr user ‘ex.libris’
  59. Use the pre-built tools Credit: Flickr user ‘spunquee’
  60. Great. How do I get started? Credit: Flickr user ‘spunquee’
  61. http://facebook.com/developers
  62. Setting up your server Your server will need to be able to send and receive data from api.facebook.com You will need to create a tunnel for local development
  63. The basics
  64. The basics
  65. Initializing the XML namespace
  66. Initializing the XML namespace <fb:login-button></fb:login-button>
  67. Initializing the XML namespace <fb:login-button></fb:login-button> <fb-profile-pic></fb:profile-pic>
  68. The basics
  69. The basics
  70. The basics
  71. The basics
  72. The basics
  73. The basics
  74. Cross domain receiver file Filename: xd_receiver.htm Root of your Connect URL (from application settings)
  75. “We’re doin’ it live!” Credit: Flickr user ‘breff’
  76. How to go from good to great. Credit: Flickr user ‘ciordia’
  77. Results: Huffington Post’s referral traffic from FB has increased >300% since they implemented registration and called it out. Increase connected users Credit: Flickr user ‘ciordia’
  78. Why should they Connect? Credit: Flickr user ‘ciordia’
  79. NFO - News Feed Optimization Credit: Flickr user ‘ciordia’
  80. NFO - News Feed Optimization “NFO is the new SEO” Justin Smith, Inside Facebook Credit: Flickr user ‘ciordia’
  81. NFO - News Feed Optimization Credit: Flickr user ‘ciordia’
  82. NFO - News Feed Optimization JibJab.com Credit: Flickr user ‘ciordia’
  83. NFO - News Feed Optimization JibJab.com Plancast.com Credit: Flickr user ‘ciordia’
  84. NFO - News Feed Optimization JibJab.com Plancast.com Thread.com Credit: Flickr user ‘ciordia’
  85. NFO - News Feed Optimization JibJab.com Plancast.com Thread.com NBC.com Credit: Flickr user ‘ciordia’
  86. NFO - News Feed Optimization JibJab.com Plancast.com Thread.com NBC.com CBS.com Credit: Flickr user ‘ciordia’
  87. NFO - News Feed Optimization JibJab.com Plancast.com Thread.com NBC.com CBS.com TV.com.com Credit: Flickr user ‘ciordia’
  88. What you should be tracking • Measure feed story prompts (publish vs cancel) • Split test images, copy, and action links
  89. What you should be tracking • Measure feed story prompts (publish vs cancel) • Split test images, copy, and action links
  90. What you should be tracking • Measure feed story prompts (publish vs cancel) • Split test images, copy, and action links
  91. What you should be tracking • Measure feed story prompts (publish vs cancel) • Split test images, copy, and action links
  92. What you should be tracking • Measure feed story prompts (publish vs cancel) • Split test images, copy, and action links
  93. LPO - Landing Page Optimization Credit: Flickr user ‘fivesensescoffee’
  94. Credit: Flickr user ‘fivesensescoffee’
  95. Credit: Flickr user ‘fivesensescoffee’
  96. Tools Credit: Flickr user ‘fivesensescoffee’ Amigo! Photography’
  97. Tools Facebook Connect Wizard http://developers.facebook.com/setup.php
  98. Tools API Test Console http://developers.facebook.com/tools.php
  99. Tools Facebook Connect Playground http://developers.facebook.com/tools.php?connect_wizard
  100. Tools Facebook Widgets http://www.facebook.com/facebook-widgets/
  101. Links One Page by Shuffle Interactive http://ryanmerket.com/connectdocs/ Facebook Developers Wiki http://wiki.developers.facebook.com/index.php/Facebook_Connect Facebook Connect Marketing Portal http://www.facebook.com/advertising/?connect
  102. That’s it! Questions? Slides will be on slideshare.net/ryanmerket

×