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

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

4. I can haz Agenda?
1 Intro and Stats
2 What is FB Connect
3 How it’s done
4 Demo
5 Thoughts, Questions

5. 1.Introandstats.

6. Intro and Stats
We don’t like this!

7. Intro and Stats
Solutions

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

9. 2.WhatisFBConnect?

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

11. What is FB Connect?
Interaction.

12. What is FB Connect?
Typical web view.

13. 3.Howit’sdone!

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

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

16. 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;}

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

18. 4.Demonstration.

19. 5.Questionscomments.
Via Twitter @jewgonewild your question #FBMIA