Facebook App Development

Transcript

1. Facebook App Development Monday, 5 December, 11
2. Kinds of Facebook Apps Website Integration Facebook Page Tab App Apps on Facebook Mobile App Monday, 5 December, 11
3. Easiest Facebook Integration Social Plugin Monday, 5 December, 11
4. Notes on Like Button • Only one-line story if not implementing open graph protocol (before) • Control title & image by using Open Graph Protocol • Can use Facebook URL Linter to check • Also able to publish stream update to user liked the website Monday, 5 December, 11
5. Deeper integration • Allow user login using Facebook account • Allow querying user’s Facebook information by Graph API App Setting Screen on developer.facebook.com Monday, 5 December, 11
6. Facebook Login • URL redirect approach • Using Facebook Login button approach <fb:login-button> * can pass permission scope FB.Event.subscribe('auth.login', function(response) { window.location.reload(); }); Reload the page Get the access_token from cookie or by Facebook PHP/Javascript SDK, and assign your own session if necessary Monday, 5 December, 11
7. Facebook Login (cont.) • Javascript Login approach Monday, 5 December, 11
8. Query user information by Graph API • After acquiring the access token, it is used to further query user’s Facebook information • Some API required additional permissions. • Graph API reference • Can use SDKs provided by Facebook for API query or doing custom curl Javascript SDK Monday, 5 December, 11
9. Query by FQL • SQL-style interface • Similar to Graph API • Table references select name from user where uid= me() select name from album where owner= me() https://graph.facebook.com/fql?q=select name from user where uid= me()&access_token=[ACCESS_TOKEN] Javascript SDK By URL Monday, 5 December, 11
10. Apps on Facebook • iframe wrapped website on Facebook • Traditional Apps • Width: 760px • Tab App • How to add the app to your Facebook page? In app’s profile page, click on “Add to My Page”, and select the page you managing. You can set the app as default landing tab in page setting if necessary. • Width: 520px • Must have SSL support since Oct 1, 2011. http://apps.facebook.com/[App Namespace] http://www.facebook.com/[Page Name]?sk=app_[APP ID] Monday, 5 December, 11
11. Apps on Facebook • Special note • Home/index page always has multi-purpose as you can’t page reload specific page in iframe. Such as like / dislike switching, login Array ( [algorithm] => HMAC-SHA256 [expires] => 1323007200 [issued_at] => 1323001787 [oauth_token] =>XXXXX [page] => Array ( [id] => 123456789 [liked] => 1 [admin] => 1 ) [user] => Array ( [country] => hk [locale] => en_US [age] => Array ( [min] => 21 ) ) [user_id] => 123456789 ) • Tab App special note • signed_request, page and admin as additional parameters signed_request example will not be available unless user authorized your app used to detect whether user liked the page Monday, 5 December, 11
12. Resources • Documentation https://developers.facebook.com/docs/ • Permission List https://developers.facebook.com/docs/reference/api/permissions/ • Graph API https://developers.facebook.com/docs/reference/api/ • Javascript SDK https://developers.facebook.com/docs/reference/javascript/ • PHP SDK https://developers.facebook.com/docs/reference/php/ Monday, 5 December, 11