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)

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’

57. What not to do
Credit: Flickr user ‘mikebehnken’

60. Am I supposed to click those?

61. Am I supposed to click those?

62. Am I supposed to click those?

63. VIP?

64. Show them why
Credit: Flickr user ‘Ben Terrett’

67. Lower the hurdle
Credit: Flickr user ‘San Diego Shooter’

79. Social context
Credit: Flickr user ‘Ben Terrett’

88. Permissions
Credit: Flickr user ‘elphs rule’

92. Respect privacy
Credit: Flickr user ‘ex.libris’

95. Use the pre-built tools
Credit: Flickr user ‘spunquee’

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

101. http://facebook.com/developers

104. 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

105. The basics

106. The basics

107. Initializing the XML namespace

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

109. Initializing the XML namespace
<fb:login-button></fb:login-button>
<fb-profile-pic></fb:profile-pic>

110. The basics

111. The basics

112. The basics

113. The basics

114. The basics

115. The basics

116. Cross domain receiver file
Filename: xd_receiver.htm
Root of your Connect URL (from application settings)

117. “We’re doin’ it live!”
Credit: Flickr user ‘breff’

118. How to go from good to great.
Credit: Flickr user ‘ciordia’

119. 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’

120. Why should they Connect?
Credit: Flickr user ‘ciordia’

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

122. NFO - News Feed Optimization
“NFO is the new SEO”
Justin Smith, Inside Facebook
Credit: Flickr user ‘ciordia’

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

124. NFO - News Feed Optimization
JibJab.com
Credit: Flickr user ‘ciordia’

125. NFO - News Feed Optimization
JibJab.com Plancast.com
Credit: Flickr user ‘ciordia’

126. NFO - News Feed Optimization
JibJab.com Plancast.com Thread.com
Credit: Flickr user ‘ciordia’

127. NFO - News Feed Optimization
JibJab.com Plancast.com Thread.com
NBC.com
Credit: Flickr user ‘ciordia’

128. NFO - News Feed Optimization
JibJab.com Plancast.com Thread.com
NBC.com CBS.com
Credit: Flickr user ‘ciordia’

129. NFO - News Feed Optimization
JibJab.com Plancast.com Thread.com
NBC.com CBS.com TV.com.com
Credit: Flickr user ‘ciordia’

130. What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links

131. What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links

132. What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links

133. What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links

134. What you should be tracking
• Measure feed story prompts (publish vs cancel)
• Split test images, copy, and action links

135. LPO - Landing Page Optimization
Credit: Flickr user ‘fivesensescoffee’

136. Credit: Flickr user ‘fivesensescoffee’

137. Credit: Flickr user ‘fivesensescoffee’

138. Tools
Credit: Flickr user ‘fivesensescoffee’
Amigo! Photography’

139. Tools
Facebook Connect Wizard
http://developers.facebook.com/setup.php

140. Tools
API Test Console
http://developers.facebook.com/tools.php

141. Tools
Facebook Connect Playground
http://developers.facebook.com/tools.php?connect_wizard

142. Tools
Facebook Widgets
http://www.facebook.com/facebook-widgets/

143. 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

144. That’s it!
Questions?
Slides will be on slideshare.net/ryanmerket