Traxo Presentation - Facebook Garage Dallas 09

2. 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

3. 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

4. on traxo.com, friends can:
• share travel plans
• seek travel advice
• see travel matches
. . . automatically

5. Why Facebook Connect?
• travel is social
• fb becoming de facto
identity standard
• unprecedented
distribution
• close to seamless social
graph portability

6. 2009 fbFund Finalist

7. More on Layouts
facebook_init.ctp
• Included by Other Layouts (default.ctp)
• Inserted Near the Footer

14. Integration Points – Connect Site
• Connect Button
• Facebook Icon
• Profile Pictures
• Invite Friends
• Publish Actions

15. Integration Points - Facebook.com
• App Canvas
• Feed / Stream
• Profile
• Tabs

16. 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/

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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.

23. 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 } ?>

24. 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()

25. 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;
} } }

26. 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
}

27. 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

28. 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

29. 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

30. 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

31. 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)

32. 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

33. 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

34. new_user / existing_user

35. connected

36. canvas
• apps.facebook.com/yourappname
• app/views/connect/canvas.ctp
– Implements a Custom Cake Layout for
Facebook

37. canvas

38. 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

39. 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 ) { }

40. 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>

41. invite_friends

42. 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

43. invite
• Destination Handler for Friend Invites
• Application Specific
• Facebook Will POST to this URL With Any
Parameters Specified from invite_friends
• No User Interface

44. Questions?
...Launching this Summer

47. 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

48. 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();
});
});

49. 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 } ?>