Introducing the Flash Facebook Cookbook

A slidedeck from my 2011 Flash Midlands presentation introducing the Flash Facebook Cookbook

Transcript

1. Me. Web (HTML, CSS, JavaScript) Flash Platform (Flash, Flex, AIR) Mobile (Obj-C, ELIPS, Titanium, Corona SDK) James Ford http://www.psyked.co.uk/ @psyked_james Product Development @ MMT Digital
2. Flash Facebook Cookbook Published August 2011 Packt Publishing - Facebook Graph API 1.6 - FQL - , & , - Introduction to Facebook Graph API, core concepts & lots of simple demo applications.
3. Initial questions • What data is available from Facebook? • How is that data structured? • How do we connect to the Graph API? • How do we locate information on Facebook? • What data-access controls are in place?
4. The Graph API Introducing
5. What is the Graph API? • The API for accessing data held by Facebook • Uses OAuth 2.0 • REST-style API • JSON-encoded response objects
6. The Graph API is not: • The Open Graph Protocol • FQL (Facebook Query Language) • Connect, FBML or Legacy REST API
7. The Graph API Data available with
8. Data available from Facebook Without Authentication (Access Tokens) • User ID, Combined name & Profile image • Any Publicly-accessible data: Users, Pages, Places, Groups & Events With Authentication • Profile data: Name, Gender • Friend lists, Mutual friend information With Authentication + Extended Permissions • Profile data: Birthday, Bio, Relationships, Religion, Politics... (everything in your profile, basically) • News feeds, Profile feeds • Checkins, Notes, Photos, Videos • Comments, Likes
9. The Graph API Data structures in
10. Facebook data types Common types • Album • Application • Checkin • Comment • Event • Group • Link • Page • Photo • Post • Status message • User • Video And the less common... • Insights • Message • Note • Question • QuestionOption • Review • Subscription • Thread
11. Graph API Objects Everything has a unique Id, and can be accessed directly: • Users: https://graph.facebook.com/btaylor (Bret Taylor) • Pages: https://graph.facebook.com/cocacola (Coca-Cola page) • Events: https://graph.facebook.com/251906384206 (Facebook Developer Garage Austin) • Groups: https://graph.facebook.com/195466193802264 (Facebook Developers group) • Applications: https://graph.facebook.com/2439131959 (the Graffiti app) • Status messages: https://graph.facebook.com/367501354973 (A status message from Bret) • Photos: https://graph.facebook.com/98423808305 (A photo from the Coca-Cola page) • Photo albums: https://graph.facebook.com/99394368305 (Coca-Cola's wall photos) • Profile pictures: https://graph.facebook.com/psyked/picture (your profile picture) • Videos: https://graph.facebook.com/817129783203 (A Facebook tech talk on Graph API) • Notes: https://graph.facebook.com/122788341354 (Note announcing Facebook for iPhone 3.0) • Checkins: https://graph.facebook.com/414866888308 (Check-in at a pizzeria)
12. Graph API Connections Graph API Connections are used to represent relationships in the ‘social graph’, and return a JSON-encoded Array of objects. • Friends: https://graph.facebook.com/me/friends • News feed: https://graph.facebook.com/me/home • Profile feed (Wall): https://graph.facebook.com/me/feed • Likes: https://graph.facebook.com/me/likes • Books: https://graph.facebook.com/me/books • Permissions: https://graph.facebook.com/me/permissions • Photo Tags: https://graph.facebook.com/me/photos • Photo Albums: https://graph.facebook.com/me/albums • Video Tags: https://graph.facebook.com/me/videos • Video Uploads: https://graph.facebook.com/me/videos/uploaded • Events: https://graph.facebook.com/me/events • Groups: https://graph.facebook.com/me/groups • Checkins: https://graph.facebook.com/me/checkins
13. A Public Graph API Object GET http://graph.facebook.com/platform { "id": "19292868552", "name": "Facebook Platform", "picture": "http://profile.ak.fbcdn.net/hprofile-ak- ash2/276791_19292868552_1958181823_s.jpg", "link": "https://www.facebook.com/platform", "likes": 3403793, "category": "Product/service", "website": "http://developers.facebook.com", "username": "platform", "founded": "2007", "company_overview": "Facebook Platform enables anyone to build social apps on Facebook and the web.", "mission": "To make the web more open and social." }
14. A Private Graph API Object GET https://graph.facebook.com/me?access_token=AAAAAAITEgh... { "id": "526534401", "name": "James Ford", "first_name": "James", "last_name": "Ford", "link": "https://www.facebook.com/psyked", "username": "psyked", "birthday": "11/01/1984", "hometown": { "id": "108126319208135", "name": "Stamford, Lincolnshire" }, "gender": "male", "website": "http://www.psyked.co.uk", "locale": "en_GB", "verified": true, "updated_time": "2011-10-02T10:37:20+0000" }
15. A Graph API Connection GET https://graph.facebook.com/me/likes?access_token=AAAAA... { "data": [ { "name": "CodeBoxed", "category": "Computers/internet", "id": "126122064123731", "created_time": "2011-09-02T18:09:50+0000" }, { "name": "The Grand Design", "category": "Book", "id": "153522094682666", "created_time": "2011-08-21T22:08:49+0000" }, { "name": "on AIR Tour Europe 2008", "category": "Community", "id": "8295947366", "created_time": "2008-02-20T10:02:34+0000" } ] }
17. The Graph API Connecting to the
18. Client-side Data flow
19. Connecting to the Graph API
20. The Graph API Retrieving data from
21. JavaScript & the Graph API <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script type="text/javascript"> FB.init({ appId:'APP_ID' }); FB.login(function(response) { if (response.session) { console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { console.log('Good to see you, ' + response.name + '.'); }); } else { console.log('User cancelled login or did not fully authorize.'); } }); </script>
22. ActionScript & the Graph API import com.facebook.graph.Facebook; Facebook.init('API_KEY', responseHandler, { appId:'APP_ID' }); private function responseHandler( success:Object, fail:Object ):void { if (success) { Facebook.api('/platform', requestResponseHandler); } else { Facebook.login(loginResponseHandler); } } private function loginResponseHandler(success:Object, fail:Object):void { if (success) { Facebook.api('/platform', requestResponseHandler); } else { trace('Unable to log in'); } } private function requestResponseHandler(success:Object, fail:Object):void { if (success) { trace(JSON.encode(success, true)); } }
25. Don’t have access? What happens when I...
26. Requesting restricted data { "error": { "message": "An access token is required to request this resource.", "type": "OAuthException" } } { "error": { "message": "mailbox requires the read_mailbox extended permission.", "type": "OAuthException" } } Loading objects without an access token Loading objects without permissions
27. Extended Permissions Working with
28. Extended Permissions • Album: user_photos, friends_photos, publish_stream • Checkin: user_checkins, friends_checkins, publish_stream • Comment: publish_stream • Event: user_event, friends_event, publish_stream • Group: user_groups, friends_groups, publish_stream • Insights: read_insights • Link: read_stream, publish_stream • Message: read_mailbox • Notes: user_notes, friends_notes • Page: manage_pages • Photo: user_photos, friends_photos • Post / Status message: read_stream, publish_stream • User: user_about_me, friends_about_me, user_birthday, friends_birthday, user_education_history, friends_education_history, email, user_hometown, friends_hometown, user_relationship_details, friends_relationship_details, user_location, friends_location, user_religon_politics, friends_religion_politics, user_likes, friends_likes, user_relationships, friends_relationships, user_websites, friends_websites, user_work_history, friends_work_history • Video: user_videos, friends_videos, publish_stream
29. private function loginResponseHandler(success:Object, fail:Object):void { if (success) { Facebook.api('/platform', requestResponseHandler); } else { trace('Unable to log in'); } } Requesting Permissions var options:Object = {}; options.perms = new Array("user_about_me", "email", "friends_birthday"); Facebook.login(loginResponseHandler, options);
30. Checking for Permissions var missingPermissions:Array = new Array(); private function requestPermissionsInfo():void { var permissions:Array = new Array("read_stream", "publish_stream"); Facebook.fqlQuery("SELECT {0} FROM permissions WHERE uid = me() ", onFQLResponse, [permissions.toString()]); } private function onFQLResponse(success:Object, fail:Object):void { missingPermissions = new Array(); var results:Array = success as Array; if (success && results) { for (var i:int = 0; i < results.length; i++) { var queryResult:Object = results[i]; for (var param:String in queryResult) { if (Boolean(queryResult[param]) == false) { missingPermissions.push(param); } } } } } [{ "email":0, "publish_stream":1, "read_stream":1 }]
32. Creating & Modifying Data on Facebook
33. Posting data to the Graph API var options:Object = new Object(); options.name = "I found a trophy"; options.caption = "Gold trophy"; options.description = "I found a Gold trophy while using ..."; options.link = "http://apps.facebook.com/packt_facebook/"; options.picture = "http://facebook.psyked.co.uk/packt/images/gold.png"; Facebook.api("me/feed", responseHandler, options, "post"); private function responseHandler(success:Object, fail:Object):void { if (success) { trace(JSON.encode(success, true)); } else { trace(JSON.encode(fail, true)); } } {"id": "100001986549853_202809986461885"}
34. Posting image data - webcam import mx.graphics.ImageSnapshot; var options:Object = {}; options.fileName = "webcam.png"; options.image = ImageSnapshot.captureBitmapData(webcam_display); options.message = "Image caption"; Facebook.api("me/photos", photoUploadComplete, options, "post");
35. Posting image data -FileReference var options:Object = {}; options.fileName = fr.name; options.image = fr.data; var fileExtension:String = fr.name.split(".")[fr.name.split(".").length-1]; switch (fileExtension) { case "gif": options.contentType = "image/gif"; break; case "png": options.contentType = "image/png"; break; case "jpeg": case "jpg": options.contentType = "image/jpeg"; break; } options.message = "Image caption"; Facebook.api("me/photos", photoUploadComplete, options, "post");
36. Editing existing Objects var options:Object = new Object(); options.name = "I found a trophy"; options.caption = "Gold trophy"; options.description = "I found a Gold trophy while using ..."; options.link = "http://apps.facebook.com/packt_facebook/"; options.picture = "http://facebook.psyked.co.uk/packt/images/gold.png"; Facebook.api("me/feed", responseHandler, options, "post"); private function responseHandler(success:Object, fail:Object):void { if (success) { trace(JSON.encode(success, true)); } else { trace(JSON.encode(fail, true)); } } • Editing objects (that can be edited) is done by making a POST request to an Objects’ URL. Application, Album, Event, Group and User objects have properties that can be edited.
37. Deleting existing Objects var options:Object = new Object(); options.method = "delete"; Facebook.api("10150322337577749", responseHandler, options, "post"); private function responseHandler(success:Object, fail:Object):void { if (success) { trace(JSON.encode(success, true)); } else { trace(JSON.encode(fail, true)); } }
38. Demos
39. Alternative Posting Invoking the ‘Share’ dialogs
40. What are the “Share” dialogs?
41. How to invoke a “Share” dialog protected function publishButtonClickHandler(e:Event):void { var options:Object = new Object(); options.message = message_txt.text; options.caption = caption_txt.text; options.description = description_txt.text; options.name = name_txt.text; options.link = link_txt.text; options.picture = picture_txt.text; Facebook.ui('feed', options, callbackFunction); }
42. Slides & Source code Graph API Explorer: https://developers.facebook.com/tools/explorer GitHub: https://github.com/psyked/facebook-actionscript-api Website: http://www.psyked.co.uk/ Facebook App: http://apps.facebook.com/packt_facebook/