Facebook Connect Prateek Dayal, Muziboo.com [email_address] @prateekdayal http://www.prateekdayal.net http://devblog.muzib...
<ul><li>Code:  http://github.com/prateekdayal/fb-tutorial </li></ul><ul><li>Presentation:  http://www.slideshare.net/prate...
Setup a New Application <ul><li>Install the 'Developer App' in Facebook </li></ul><ul><li>Create two new applications (pro...
 
SSH Tunnel Setup <ul><li>Tunnel makes development much easier </li></ul><ul><li>In  /etc/ssh/sshd_config   put  GatewayPor...
Start the Tunnel <ul><li>Local Port: 3000 & Remote Port: 3333 </li></ul><ul><li>prateek@marvin:~/work/talks/acm$  ssh prat...
Cross Domain Receiver File <ul><li>A technique for passing data between different domains </li></ul><ul><li>Used for detec...
 
xd_reciver.html <site_root>/xd_receiver.html <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http...
Lets create the Login Page <ul><li>Open file  public/fb-connect.html </li></ul><ul><li>Include FB-connect's javascript cod...
 
Show User Info <ul><li>Open file  public/fb-connect-show-info.html </li></ul><ul><li>Use XFBML tags to show name and profi...
 
Detecting the Login State <ul><li>Open file  public/fb-connect-detect-login-state.html </li></ul><ul><li>Right now we have...
Posting to News Feed <ul><li>Open File:  public/fb-connect-feed-story.html </li></ul><ul><li>We can use  FB.Connect.stream...
 
Server side stuff <ul><li>You can read the  user_id  of the user &  session_id  from cookies set by FB's javascript </li><...
 
Advanced Features <ul><li>Extended session permission </li></ul><ul><li>Proxy email address </li></ul><ul><li>Friend recom...
Platform Policies <ul><li>Most of the data (including name) cannot be cached for more than 24 hours </li></ul><ul><li>If a...
Questions?
Upcoming SlideShare
Loading in …5
×

Facebook Connect Tutorial

13,348 views

Published on

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

Published in: Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
13,348
On SlideShare
0
From Embeds
0
Number of Embeds
127
Actions
Shares
0
Downloads
179
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Facebook Connect Tutorial

  1. 1. Facebook Connect Prateek Dayal, Muziboo.com [email_address] @prateekdayal http://www.prateekdayal.net http://devblog.muziboo.com
  2. 2. <ul><li>Code: http://github.com/prateekdayal/fb-tutorial </li></ul><ul><li>Presentation: http://www.slideshare.net/prateek.dayal/facebook-connect-tutorial/ </li></ul><ul><li>Docs: http://wiki.developers.facebook.com/index.php/Facebook_Connect </li></ul>Resources
  3. 3. Setup a New Application <ul><li>Install the 'Developer App' in Facebook </li></ul><ul><li>Create two new applications (production & testing) </li></ul><ul><li>The canvas callback url should point to your website (or your dev machine) </li></ul>
  4. 5. SSH Tunnel Setup <ul><li>Tunnel makes development much easier </li></ul><ul><li>In /etc/ssh/sshd_config put GatewayPorts yes </li></ul><ul><li>prateekdayal:~# /etc/init.d/ssh restart </li></ul>
  5. 6. Start the Tunnel <ul><li>Local Port: 3000 & Remote Port: 3333 </li></ul><ul><li>prateek@marvin:~/work/talks/acm$ ssh prateek@prateekdayal.net -gNR 3333:localhost:3000 </li></ul>
  6. 7. Cross Domain Receiver File <ul><li>A technique for passing data between different domains </li></ul><ul><li>Used for detecting login status, setting fb cookies on your domain etc </li></ul>
  7. 9. xd_reciver.html <site_root>/xd_receiver.html <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; > <head> <title>Cross-Domain Receiver Page</title> </head> <body> <script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.debug.js&quot; type=&quot;text/javascript&quot;></script> </body> </html>
  8. 10. Lets create the Login Page <ul><li>Open file public/fb-connect.html </li></ul><ul><li>Include FB-connect's javascript code </li></ul><ul><li>Add a form and a 'Login with Facebook' button </li></ul><ul><li>Add the js code to render fbml tags </li></ul><ul><li>PS: I am using prototype.js to update divs etc </li></ul><ul><li>More Info - http://wiki.developers.facebook.com/index.php/Connect/Authorization_Websites </li></ul>
  9. 12. Show User Info <ul><li>Open file public/fb-connect-show-info.html </li></ul><ul><li>Use XFBML tags to show name and profile pic </li></ul><ul><li>Provide a logout button </li></ul><ul><li>More Info - </li></ul><ul><li>http://wiki.developers.facebook.com/index.php/Logging_Out_And_Disconnecting </li></ul><ul><li>http://wiki.developers.facebook.com/index.php/XFBML </li></ul>
  10. 14. Detecting the Login State <ul><li>Open file public/fb-connect-detect-login-state.html </li></ul><ul><li>Right now we have to login on every page refresh </li></ul><ul><li>User ifUserConnected/ifUserNotConnected </li></ul><ul><li>No need to have separate handlers for onLogin or for Logout </li></ul><ul><li>Can be used to provide single sign-on </li></ul><ul><li>More Info - </li></ul><ul><li>http://wiki.developers.facebook.com/index.php/Detecting_Connect_Status </li></ul>
  11. 15. Posting to News Feed <ul><li>Open File: public/fb-connect-feed-story.html </li></ul><ul><li>We can use FB.Connect.streamPublish to publish to news feed </li></ul><ul><li>You can attach picture, mp3, flash etc to your feed story </li></ul><ul><li>More Info - </li></ul><ul><li>http://wiki.developers.facebook.com/index.php/Implementing_Feed_Publishing_from_your_Website_or_Application </li></ul>
  12. 17. Server side stuff <ul><li>You can read the user_id of the user & session_id from cookies set by FB's javascript </li></ul><ul><li>The session id can be used to make calls to FB API (to fetch detailed info etc) </li></ul><ul><li>The user_id can be used to link/create a new account on your site </li></ul><ul><li>Php/Ruby libraries available to make all this simple </li></ul>
  13. 19. Advanced Features <ul><li>Extended session permission </li></ul><ul><li>Proxy email address </li></ul><ul><li>Friend recommendation </li></ul>
  14. 20. Platform Policies <ul><li>Most of the data (including name) cannot be cached for more than 24 hours </li></ul><ul><li>If a user de-authorizes your app, you need to delete data received by API (and not direct submission) </li></ul><ul><li>More Info - http://wiki.developers.facebook.com/index.php/Storable_Data </li></ul>
  15. 21. Questions?

×