Make your site more social with Facebook Connect

2,845 views

Published on

Facebook Developer Garage Miami 2009 presentation slides.

Sample code from preso can be checked out from google code: svn checkout http://facebook-connect-demo.googlecode.com/svn/trunk/ facebook-connect-demo-read-only

2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,845
On SlideShare
0
From Embeds
0
Number of Embeds
185
Actions
Shares
0
Downloads
27
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Make your site more social with Facebook Connect

  1. 1. FB Connect in under 15 Make your site social in 15 minutes or less ;-) Emmanuel Pozo Twitter @Jewgonewild Co Founder at Pikchur.com 05.30.2009
  2. 2. I can haz Agenda? 1 Intro and Stats 2 What is FB Connect 3 How it’s done 4 Demo 5 Thoughts, Questions
  3. 3. 1.Introandstats.
  4. 4. Intro and Stats We don’t like this!
  5. 5. Intro and Stats Solutions
  6. 6. Intro and Stats FB Connect Usage Stats ▪ Released on December 4th 2008 ▪ 1 million + users and growing ▪ Average large connect site has 2,500 - 8,000 users ▪ Few applications with tens of thousands & iPhoto is the only app with hundreds of thousands of users ▪ FB Connect is the leading identity platform
  7. 7. 2.WhatisFBConnect?
  8. 8. What is FB Connect? FB Connect.. ha? ▪ Single sign on service ▪ Seamlessly connect user’s Facebook account to your site ▪ Keeps the experience social ▪ Enables easy sharing experience
  9. 9. What is FB Connect? Interaction.
  10. 10. What is FB Connect? Typical web view.
  11. 11. 3.Howit’sdone!
  12. 12. How it’s done Step 1 ▪ Download API wrapper classes ▪ Create an app (http://www.facebook.com/developers/createapp.php) ▪ Go to Connect tab & set Connect URL ▪ Base Domain (optional for subdomain access) ▪ Grab your app’s API key. You’ll need it
  13. 13. How it’s done Step 2 ▪ Create cross domain communication channel file. ▪ xd_receiver.htm with the following JS ▪ Place it in your apps root or wherever you want to serve the connect pages.
  14. 14. How it’s done Step 3 ▪ Initialize FB connect libraries via JS ▪ <script type=”texgfjdhgjgdfgggggggggggggggggggggggggggg ▪ <script type=”text/ javascript”>FB.Bootstrap.requireFeatures([“Connect”], ” ▪ Call the connect login dialogue ▪ function fbLogin() {FB.Connect.requireSession(function() { window.location.href = '/oauth/index/facebook'; }); return false;}
  15. 15. How it’s done Step 4 ▪ Easy part is over ▪ Get to work! ▪ Take full advantage of the FB API. ▪ Pull in users friends,statuses,photos etc.
  16. 16. 4.Demonstration.
  17. 17. 5.Questionscomments. Via Twitter @jewgonewild your question #FBMIA

×