Traxo Presentation - Facebook Garage Dallas 09

1,833 views

Published on

Traxo Presentation - Facebook Garage Dallas 09

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,833
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Traxo Presentation - Facebook Garage Dallas 09

  1. 1. how many of these 10 travel sites do you use? multiple usernames, passwords, confirmation emails, etc. different systems and formats 10 of 10,000+ travel sites worldwide. 6/26/2009 Page 2
  2. 2. B2B 3rd Party Apps Reservation & Partners Unlocks, Info locked Aggregates & in 10,000+ Structures websites Travel Data B2C Website Our ‘blackbox’ TripBuilder ® (Key IP) 6/26/2009 Page 3
  3. 3. on traxo.com, friends can: • share travel plans • seek travel advice • see travel matches . . . automatically
  4. 4. Why Facebook Connect? • travel is social • fb becoming de facto identity standard • unprecedented distribution • close to seamless social graph portability
  5. 5. 2009 fbFund Finalist
  6. 6. More on Layouts facebook_init.ctp • Included by Other Layouts (default.ctp) • Inserted Near the Footer
  7. 7. Integration Points – Connect Site • Connect Button • Facebook Icon • Profile Pictures • Invite Friends • Publish Actions
  8. 8. Integration Points - Facebook.com • App Canvas • Feed / Stream • Profile • Tabs
  9. 9. Configuring Your Application • From your Facebook Developer Account • API Key, App Secret, App ID • Connect URL – http://example.com/ • Canvas URL – http://apps.facebook.com/yourappname/
  10. 10. Configuring Your Application • Canvas Callback URL – http://example.com/connect/ • Post-Authorize Callback URL – http://example.com/connect/app_authorize • Post-Remove Callback URL – http://example.com/connect/app_remove
  11. 11. CakePHP Application Structure • app_controller.php • config/bootstrap.php • models/facebook.php • controllers/connect_controller.php • views/connect/ • views/layouts/ – facebook.ctp – facebook_init.ctp – facebook_loader.ctp • vendors/facebook
  12. 12. Installing Facebook PHP Libary • app/vendors • svn co URL facebook • app/vendors/facebook – facebook.php – facebookapi_php5_restlib.php – jsonwrapper/ http://wiki.developers.facebook.com/index.php/PHP URL: http://svn.facebook.com/svnroot/platform/clients/php/trunk
  13. 13. Facebook-Specific Layouts • app/views/layouts – facebook.ctp (Canvas Layout) – facebook_init.ctp – facbook_loader.ctp – CSS/JS • Use <link rel=”src”> • Append a Version Number
  14. 14. Configuring the Cake Install • app/config/bootstrap.php • Add Define statements: – FB_APP_ON – FB_APP_NAME – FB_APP_URLNAME – FB_APP_ID – FB_APP_SECRET – FB_API_KEY – FB_BUNDLE_ID_GENERIC
  15. 15. Local Database Tables • Map FB_UID to Local User Accounts • FB_id BIGINT • (Optional) Session_key VARCHAR(140) • Review Facebook Connect TOS for Storable Parameters.
  16. 16. xd_receiver.php • app/webroot/xd_receiver.php • http://example.com/xd_receiver.php • Use PHP to Handle SSL Switching <php if ( $SSL ) { ?> <script src="https://www.connect.facebook.com/js/api_lib/v0.4/ XdCommReceiver.js" type="text/javascript"></script> <?php }else{ ?> <script src="http://static.ak.connect.facebook.com/js/api_lib/ v0.4/XdCommReceiver.js" type="text/javascript"></script> <?php } ?>
  17. 17. app_controller.php • Parent Controller for All App Controllers • beforeFilter() – User login/logout status probably set here – Great place to check for Facebook users – Called before every controller action – Calls to • facebookInit() • facebookAuth()
  18. 18. app_controller.php • Protected function facebookInit() { App::import('Vendor', 'facebook/facebook'); $fb = new Facebook( FB_API_KEY, FB_APP_SECRET ); if ($loggedInFacebookId = $fb->get_loggedin_user()){ $this->loggedInFacebookId = $loggedInFacebookId; $this->set("loggedInFacebookId", $loggedInFacebookId); if ($fb->api_client->users_isAppUser($loggedInFacebookId) || $fb->api_client->added){ $this->isFacebookAppUser = true; } } }
  19. 19. app_controller.php • Protected function facebookAuth() { if (!FB_APP_ON) { return true; } if ($loggedInFacebookId) { // check for local mapping against FB user // if found, log them in with native methods }
  20. 20. Connect Controller • Central Location For All Facebook Connect Actions • Some Actions Will Be Receivers For Facebook POST'd Responses • Could Be Expanded To Other Services
  21. 21. Connect Controller • connect/app_authorize • connect/app_remove • connect/app_disconnect • connect/new_user • connect/existing_user • connect/connected • connect/canvas • connect/invite_friends • connect/invite • connect/post_invite
  22. 22. app_authorize • User Connects on Your Site • Post-Authorize Callback URL • Capture and Store FB_UID • No User Interface http://wiki.developers.facebook.com/index.php/Account_Linking http://wiki.developers.facebook.com/index.php/Post-Authorize_URL
  23. 23. app_remove • User Removes Your App From Within Facebook • Post-Remove Callback URL • Delete Local Mapping Records • No User Interface • New Feature: Account Reclamation http://wiki.developers.facebook.com/index.php/Post-Remove_URL
  24. 24. app_disconnect • Triggered by User Action on Your Site • Same as User Removing Your Application From Within Facebook. • Post-Remove Callback URL • No User Interface • Optional, But Recommended $fb->api_client-> auth_revokeAuthorization($fb_uid)
  25. 25. registerUsers / unregisterUsers • Creates / Removes Associations For Existing User Accounts • Called in Batches Initially / Periodically • Called For Each New User • No User Interface $fb->api_client-> connect_registerUsers(json_encode($accounts)); $fb->api_client- >connect_unregisterUsers(json_encode($accounts)); http://wiki.developers.facebook.com/index.php/Connect.registerUsers
  26. 26. new_user / existing_user • Users That Already Have Local Accounts Can Enter Their Credentials • On Submit – Existing User Accounts Mapped to Current FB_UID and Logged In – New Account Created and Mapped to Current FB_UID – connect_registerUsers Function is Called With Hash of Email Address
  27. 27. new_user / existing_user
  28. 28. connected
  29. 29. canvas • apps.facebook.com/yourappname • app/views/connect/canvas.ctp – Implements a Custom Cake Layout for Facebook
  30. 30. canvas
  31. 31. invite_friends • Facebook UI for Inviting Friends (FBML) – fb:request-form – fb:multi-friend-selector • Could Use Javascript / FBJS – FB.Connect.inviteConnectUsers • fb:request-form Action – connect/post_invite.php http://wiki.developers.facebook.com/index.php/Account_Linking
  32. 32. invite_friends // set the destination url for the invitation. $next = $this->Link-> url('/connect/invite?id='.$local_user_id); $this->set("app_add_url", $fb->get_add_url($next)); // Retrieve array of friends who've already authorized the app. $fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$this->loggedInFacebookId.') AND is_app_user = 1'; try { $_friends = $fb->api_client->fql_query($fql); } catch ( Exception $exception ) { }
  33. 33. invite_friends <fb:serverfbml style=”width:100%;”> <fb:fbml> <fb:request-form action="<?php echo $link->url('connect/post_invite')?>" ... content="Traxo connects travelers! Share your trips and see where your friends are traveling. <?php echo htmlentities("<fb:req-choice url="$app_add_url" label="Join Traxo"") ?>" > <fb:multi-friend-selector ... exclude_ids="<?php echo $friends; ?>" /> </fb:request-form> </fb:fbml> </fb:serverfbml>
  34. 34. invite_friends
  35. 35. post_invite • Called After User Selects and Submits invite_friends • Facebook POSTs Array of Invited Facebook UIDs • “Action” Parameter of invite_friends fb:request-form • No User Interface
  36. 36. invite • Destination Handler for Friend Invites • Application Specific • Facebook Will POST to this URL With Any Parameters Specified from invite_friends • No User Interface
  37. 37. Questions? ...Launching this Summer
  38. 38. More on Layouts facebook.ctp • Used for Any View to be Rendered Within Facebook(.com) • Stylesheets and Javascript – Cached Heavily (and Permanently) – Use <link rel=”src”> with version number – Limited tags – Parsed by Facebook Server http://wiki.developers.facebook.com/index.php/Include_files http://wiki.developers.facebook.com/index.php/Including_Stylesheets_From_PHP
  39. 39. More on Layouts facebook_init.ctp • Included by Other Layouts (default.ctp) • Inserted Near the Footer FB_RequireFeatures(["XFBML"], function() { FB.Facebook.init("<?php echo FB_API_KEY; ?>", "/xd_receiver.php"); FB.Facebook.get_sessionWaitable().waitUntilReady(function(session) { var is_now_logged_into_facebook = session ? true : false; if (is_now_logged_into_facebook != already_logged_into_facebook) { FB.Connect.ifUserConnected(fb_onlogin_ready); } FB.XFBML.Host.parseDomTree(); }); });
  40. 40. More on Layouts facebook_loader.ctp • Included by Other Layouts (default.ctp) • Inserted Near the Head Tag <?php if ( $SSL ){ ?> <script type="text/javascript" src="https://www.connect.facebook.com/js/api_lib/ v0.4/FeatureLoader.js.php"></script> <?php }else{ ?> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/ v0.4/FeatureLoader.js.php"></script> <?php } ?>

×