Me.               James Ford           http://www.psyked.co.uk/                @psyked_james      Product Development @ MM...
Flash Facebook Cookbook             Published August 2011             Packt Publishing             - Facebook Graph API 1....
Initial questions• What data is available from Facebook?• How is that data structured?• How do we connect to the Graph API...
IntroducingThe Graph API
What is the Graph API?• The API for accessing data held by Facebook• Uses OAuth 2.0• REST-style API• JSON-encoded response...
The Graph API is not:• The Open Graph Protocol• FQL (Facebook Query Language)• Connect, FBML or Legacy REST API
Data available withThe Graph API
Data available from FacebookWithout Authentication (Access Tokens)    • User ID, Combined name & Profile image    • Any Pu...
Data structures inThe Graph API
Facebook data typesCommon types         And the less common...  • Album               • Insights  • Application         • ...
Graph API ObjectsEverything has a unique Id, and can be accessed directly:   • Users: https://graph.facebook.com/btaylor (...
Graph API ConnectionsGraph API Connections are used to represent relationships inthe ‘social graph’, and return a JSON-enc...
A Public Graph API ObjectGET http://graph.facebook.com/platform{  "id": "19292868552",  "name": "Facebook Platform",  "pic...
A Private Graph API ObjectGET https://graph.facebook.com/me?access_token=AAAAAAITEgh...{    "id": "#########",    "name": ...
A Graph API ConnectionGET https://graph.facebook.com/me/likes?access_token=AAAAA...{    "data": [       {          "name":...
Connecting to theThe Graph API
Client-side Data flow
Connecting to the Graph API
Retrieving data fromThe Graph API
JavaScript & the Graph API<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script ...
ActionScript & the Graph APIimport com.facebook.graph.Facebook;Facebook.init(API_KEY, responseHandler, { appId:APP_ID });p...
What happens when I...Don’t have access?
Requesting restricted dataLoading objects without an access token {     "error": {       "message": "An access token is re...
Working withExtended Permissions
Extended Permissions• Album: user_photos, friends_photos, publish_stream• Checkin: user_checkins, friends_checkins, publis...
Requesting Permissionsvar options:Object = {};options.perms = new Array("user_about_me", "email", "friends_birthday");Face...
Checking for Permissionsvar missingPermissions:Array = new Array();private function requestPermissionsInfo():void {  var p...
Creating & Modifying    Data on Facebook
Posting data to the Graph APIvar options:Object = new Object();options.name = "I found a trophy";options.caption "10000198...
Posting image data - webcamimport mx.graphics.ImageSnapshot;var options:Object = {};options.fileName = "webcam.png";option...
Posting image data - FileReferencevar options:Object = {};options.fileName = fr.name;options.image = fr.data;var fileExten...
Editing existing Objects• Editing objects (that can be edited) is done byvar options:Object = new Object();  making a POST...
Deleting existing Objectsvar options:Object = new Object();options.method = "delete";Facebook.api("10150322337577749", res...
Demos
Alternative PostingInvoking the ‘Share’ dialogs
What are the “Share” dialogs?
How to invoke a “Share” dialogprotected function publishButtonClickHandler(e:Event):void {  var options:Object = new Objec...
Slides & Source code            Graph API Explorer:    https://developers.facebook.com/tools/explorer                     ...
The Flash Facebook Cookbook - FlashMidlands
The Flash Facebook Cookbook - FlashMidlands
The Flash Facebook Cookbook - FlashMidlands
The Flash Facebook Cookbook - FlashMidlands
Upcoming SlideShare
Loading in...5
×

The Flash Facebook Cookbook - FlashMidlands

8,942

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,942
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Facebook is...For developers, it gives us (users, connections, possible invites)Find the SDK download link. Where did the SDK come from?Desktop &amp; Web versions of the SDK. Both similar, different logins, I’m going to focus on the Flash Player version.Log into Facebook.com/developers and demo the interface.What is a Facebook application? (Canvas, non-canvas)The Graph API is one of the (the main) API for applications to get data from FB.
  • So, requesting Permissions is as simple as adding their code name in the options of a login request.Put in all the permissions, and Facebook will handle the process of working out what you have, and what you need.However, there’s a downside to requesting permissions, and that’s because Facebook makes it explicitly clear what permissions your app is requesting, and what your application can do with them. Too many permissions = turn off.Golden rule is, “if you don’t need those permissions immediately, don’t ask for them”.
  • Although you should be handling errors correctly, preventative measures and checking before performing actions are always better.Retrieving details about Extended Permissions can’t be done strictly with the Graph API, but we can retrieve this information through FQL (Facebook Query Language). FQL is an SQL-like syntax for querying Facebook.We log in with no permissions (or as little as we can get away with), and then query FQL to get a Dictionary object of permissions. Before you make a request that requires permissions, you check the object, and if you need those permissions, call the login request again, this time with a permissions object.
  • The API is REST-based, but we can’t make anything other than GET or POST requests in Flash (or JavaScript).Instead, we can supply a method parameter, with a value of delete.The request URL is the unique Facebook Id of the object you’re deleting.
  • The Flash Facebook Cookbook - FlashMidlands

    1. 1. Me. James Ford http://www.psyked.co.uk/ @psyked_james Product Development @ MMT Digital Web (HTML, CSS, JavaScript) Flash Platform (Flash, Flex, AIR) Mobile (Obj-C, ELIPS, Titanium, Corona SDK)
    2. 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. 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. 4. IntroducingThe Graph API
    5. 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. 6. The Graph API is not:• The Open Graph Protocol• FQL (Facebook Query Language)• Connect, FBML or Legacy REST API
    7. 7. Data available withThe Graph API
    8. 8. Data available from FacebookWithout Authentication (Access Tokens) • User ID, Combined name & Profile image • Any Publicly-accessible data: Users, Pages, Places, Groups & EventsWith Authentication • Profile data: Name, Gender • Friend lists, Mutual friend informationWith 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. 9. Data structures inThe Graph API
    10. 10. Facebook data typesCommon types And the less common... • Album • Insights • Application • Message • Checkin • Note • Comment • Question • Event • QuestionOption • Group • Review • Link • Subscription • Page • Thread • Photo • Post • Status message • User • Video
    11. 11. Graph API ObjectsEverything 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-Colas 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. 12. Graph API ConnectionsGraph API Connections are used to represent relationships inthe ‘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. 13. A Public Graph API ObjectGET 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 appson Facebook and the web.", "mission": "To make the web more open and social."}
    14. 14. A Private Graph API ObjectGET https://graph.facebook.com/me?access_token=AAAAAAITEgh...{ "id": "#########", "name": "James Ford", "first_name": "James", "last_name": "Ford", "link": "https://www.facebook.com/psyked", "username": "psyked", "birthday": "##/##/####", "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. 15. A Graph API ConnectionGET 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" } ]}
    16. 16. Connecting to theThe Graph API
    17. 17. Client-side Data flow
    18. 18. Connecting to the Graph API
    19. 19. Retrieving data fromThe Graph API
    20. 20. 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 fullyauthorize.); } });</script>
    21. 21. ActionScript & the Graph APIimport 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)); }}
    22. 22. What happens when I...Don’t have access?
    23. 23. Requesting restricted dataLoading objects without an access token { "error": { "message": "An access token is required to request this resource.", "type": "OAuthException" } }Loading objects without permissions { "error": { "message": "mailbox requires the read_mailbox extended permission.", "type": "OAuthException" } }
    24. 24. Working withExtended Permissions
    25. 25. 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
    26. 26. Requesting Permissionsvar options:Object = {};options.perms = new Array("user_about_me", "email", "friends_birthday");Facebook.login(loginResponseHandler, options);private function loginResponseHandler(success:Object, fail:Object):void { if (success) { Facebook.api(/platform, requestResponseHandler); } else { trace(Unable to log in); }}
    27. 27. Checking for Permissionsvar 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(); "email":0, var results:Array = success as Array; "publish_stream":1, if (success && results) { "read_stream":1 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); } } } }}
    28. 28. Creating & Modifying Data on Facebook
    29. 29. Posting data to the Graph APIvar options:Object = new Object();options.name = "I found a trophy";options.caption "100001986549853_202809986461885"} {"id": = "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)); }}
    30. 30. Posting image data - webcamimport 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");
    31. 31. Posting image data - FileReferencevar 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");
    32. 32. Editing existing Objects• Editing objects (that can be edited) is done byvar options:Object = new Object(); making a POST request to an Objects’ URL.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"; Application, Album, Event, Group and UserFacebook.api("me/feed", responseHandler, options, "post"); objects have properties that can be edited.private function responseHandler(success:Object, fail:Object):void { if (success) { trace(JSON.encode(success, true)); } else { trace(JSON.encode(fail, true)); }}
    33. 33. Deleting existing Objectsvar 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)); }}
    34. 34. Demos
    35. 35. Alternative PostingInvoking the ‘Share’ dialogs
    36. 36. What are the “Share” dialogs?
    37. 37. How to invoke a “Share” dialogprotected 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);}
    38. 38. 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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×