Your SlideShare is downloading. ×
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Facebook Connect Tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Facebook Connect Tutorial

12,780

Published on

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

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
12,780
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
177
Comments
2
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Facebook Connect Prateek Dayal, Muziboo.com [email_address] @prateekdayal http://www.prateekdayal.net http://devblog.muziboo.com
  • 2.
    • Code: http://github.com/prateekdayal/fb-tutorial
    • Presentation: http://www.slideshare.net/prateek.dayal/facebook-connect-tutorial/
    • Docs: http://wiki.developers.facebook.com/index.php/Facebook_Connect
    Resources
  • 3. Setup a New Application
    • Install the 'Developer App' in Facebook
    • Create two new applications (production & testing)
    • The canvas callback url should point to your website (or your dev machine)
  • 4.  
  • 5. SSH Tunnel Setup
    • Tunnel makes development much easier
    • In /etc/ssh/sshd_config put GatewayPorts yes
    • prateekdayal:~# /etc/init.d/ssh restart
  • 6. Start the Tunnel
    • Local Port: 3000 & Remote Port: 3333
    • prateek@marvin:~/work/talks/acm$ ssh prateek@prateekdayal.net -gNR 3333:localhost:3000
  • 7. Cross Domain Receiver File
    • A technique for passing data between different domains
    • Used for detecting login status, setting fb cookies on your domain etc
  • 8.  
  • 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>
  • 10. Lets create the Login Page
    • Open file public/fb-connect.html
    • Include FB-connect's javascript code
    • Add a form and a 'Login with Facebook' button
    • Add the js code to render fbml tags
    • PS: I am using prototype.js to update divs etc
    • More Info - http://wiki.developers.facebook.com/index.php/Connect/Authorization_Websites
  • 11.  
  • 12. Show User Info
    • Open file public/fb-connect-show-info.html
    • Use XFBML tags to show name and profile pic
    • Provide a logout button
    • More Info -
    • http://wiki.developers.facebook.com/index.php/Logging_Out_And_Disconnecting
    • http://wiki.developers.facebook.com/index.php/XFBML
  • 13.  
  • 14. Detecting the Login State
    • Open file public/fb-connect-detect-login-state.html
    • Right now we have to login on every page refresh
    • User ifUserConnected/ifUserNotConnected
    • No need to have separate handlers for onLogin or for Logout
    • Can be used to provide single sign-on
    • More Info -
    • http://wiki.developers.facebook.com/index.php/Detecting_Connect_Status
  • 15. Posting to News Feed
    • Open File: public/fb-connect-feed-story.html
    • We can use FB.Connect.streamPublish to publish to news feed
    • You can attach picture, mp3, flash etc to your feed story
    • More Info -
    • http://wiki.developers.facebook.com/index.php/Implementing_Feed_Publishing_from_your_Website_or_Application
  • 16.  
  • 17. Server side stuff
    • You can read the user_id of the user & session_id from cookies set by FB's javascript
    • The session id can be used to make calls to FB API (to fetch detailed info etc)
    • The user_id can be used to link/create a new account on your site
    • Php/Ruby libraries available to make all this simple
  • 18.  
  • 19. Advanced Features
    • Extended session permission
    • Proxy email address
    • Friend recommendation
  • 20. 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)
    • More Info - http://wiki.developers.facebook.com/index.php/Storable_Data
  • 21. Questions?

×