Facebook Connect Tutorial for ACM's compute 2010 event. More details at http://compute.acmbangalore.org/tutorial.html

1. Facebook Connect Tutorial
Prateek Dayal
Muziboo.com
Mar 7th, 2010

2. Resources
Code: http://github.com/prateekdayal/fb-tutorial
This Presentation: http://www.slideshare.net/prateek.
dayal/facebook-connect-tutorial
FB Connect’s Docs:
http://developers.facebook.com/connect.php

3. Setting up a New App
Install the ’Developer App’ in Facebook
Create a new application (in fact two: one for production and
the other for testing)
The canvas callback url should point to your website (or your
dev machine)

5. SSH Tunnel Setup
Problem: You need to access your dev machine over the
internet and you don’t have a public IP
Solution: Use a ssh tunnel
On Linux machines
In /etc/ssh/sshd config put GatewayPorts yes
Restart the ssh server prateekdayal: # /etc/init.d/ssh
restart

6. Starting the Tunnel on localhost
Lets assume that you want to forward the local port 3000 to
port 3333 on your server (ex: prateekdayal.net)
prateek@marvin: /work/talks/acm$ ssh
prateek@prateekdayal.net -gNR 3333:localhost:3000
You can now access http://localhost:3000 at
http://www.prateekdayal.net:3333

7. Cross Domain Receiver File
Problem: Ajax calls from your domain to Facebook.com and
passing data from Facebook.com to your domain
Solution: Cross Domain Receiver File
A technique for passing data between different domains
Used for detecting login status, setting fb cookies on your
domain etc
You can get the file from Facebook’s Dev site
You have to place it relative to the root directory of your app
<site root>/xd receiver.html

9. Lets build a quick app
Objective: Comment on a blogpost with your Facebook ID and
post the comment on your news feed

10. Creating the Login page
File: public/fb-connect.html
Include FB Connect’s Javascript code
I have also included prototype.js to make manipulate the
DOM more easily
Add a form and ’Login with Facebook’ button
Add the JS code to render fbml tags 1
1
http://wiki.developers.facebook.com/index.php/Connect/
Authorization_Websites

12. Show User Info
File: public/fb-connect-show-info.html
Use XFBML tags to show name and profile pic 2
Also provide a Logout button 3
2
http://wiki.developers.facebook.com/index.php/XFBML
3
http://wiki.developers.facebook.com/index.php/Logging_Out_
And_Disconnecting

14. Detecting the Login State
File: public/fb-connect-detect-login-state.html
Problem: Every time we refresh the page we have to login
again
Solution: Pass ifUserConnected and ifUserNotConnected
options to FB Connect’s init function 4
Remove the separate handlers for login & logout
This can be used to automatically login users if they are
logged into FB (single sign-on)
4
http:
//wiki.developers.facebook.com/index.php/Detecting_Connect_Status

15. Posting to News Feed
File: public/fb-connect-feed-story.html
We can use FB.Connect.streamPublish to publish to News
Feed 5
FB allows pictures, mp3, flash etc to be attached to the feed
5
http://wiki.developers.facebook.com/index.php/Implementing_
Feed_Publishing_from_your_Website_or_Application

17. Server side stuff
Problem: You want to let users login with FB and connect
existing accounts
Solution: Read cookies set by FB (on your domain) to get
user id and session id
FB User ID can be used to identify the user on next login and
connect with your auth system
Session ID can be used to make FB API calls (to fetch
detailed user info etc)
Php, Ruby on Rails and other languages have libraries
available to make all this easy

19. Advanced Features
Extended session permission
Ask for user’s primary email address
Friend recommendation and invitation

20. A note on Platform Policies
Most of the data (including name) cannot be cached for more
than 24 hours
If a user de-authorizes your app, you need to delete data
received by API (and not direct submission)
Many more guidelines 6
6
http://wiki.developers.facebook.com/index.php/Storable_Data

21. Questions?
prateek@muziboo.com
@prateekdayal
http://www.prateekdayal.net
http://devblog.muziboo.com