• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Facebook Connect Tutorial
 

Facebook Connect Tutorial

on

  • 15,999 views

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

Statistics

Views

Total Views
15,999
Views on SlideShare
15,874
Embed Views
125

Actions

Likes
6
Downloads
174
Comments
2

1 Embed 125

http://www.slideshare.net 125

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • ola
    Are you sure you want to
    Your message goes here
    Processing…
  • hi plz help me to know about facebook connect
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Facebook Connect Tutorial Facebook Connect Tutorial Presentation Transcript

    • Facebook Connect Prateek Dayal, Muziboo.com [email_address] @prateekdayal http://www.prateekdayal.net http://devblog.muziboo.com
      • 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
    • 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)
    •  
    • SSH Tunnel Setup
      • Tunnel makes development much easier
      • In /etc/ssh/sshd_config put GatewayPorts yes
      • prateekdayal:~# /etc/init.d/ssh restart
    • Start the Tunnel
      • Local Port: 3000 & Remote Port: 3333
      • prateek@marvin:~/work/talks/acm$ ssh prateek@prateekdayal.net -gNR 3333:localhost:3000
    • Cross Domain Receiver File
      • A technique for passing data between different domains
      • Used for detecting login status, setting fb cookies on your domain etc
    •  
    • 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>
    • 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
    •  
    • 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
    •  
    • 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
    • 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
    •  
    • 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
    •  
    • Advanced Features
      • Extended session permission
      • Proxy email address
      • Friend recommendation
    • 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
    • Questions?