Me.

Web (HTML, CSS, JavaScript)Flash Platform (Flash, Flex, AIR)

Mobile (Obj-C, ELIPS, Titanium, Corona SDK)

James Fordhttp://www.psyked.co.uk/

@psyked_jamesProduct Development @ MMT Digital

Flash Facebook Cookbook

Published August 2011Packt Publishing

- Facebook Graph API 1.6- FQL

- , & ,

- Introduction to Facebook Graph API, core concepts & lots of simple demo applications.

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?

The Graph APIIntroducing

What is the Graph API?

• The API for accessing data held by Facebook• Uses OAuth 2.0• REST-style API• JSON-encoded response objects

The Graph API is not:

• The Open Graph Protocol• FQL (Facebook Query Language)• Connect, FBML or Legacy REST API

The Graph APIData available with

Data available from FacebookWithout 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

The Graph APIData structures in

Facebook data typesCommon 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

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

Graph API ConnectionsGraph 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

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 apps on Facebook and the web.", "mission": "To make the web more open and social." }

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"}

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" } ]}

The Graph APIConnecting to the

Client-side Data flow

Connecting to the Graph API

The Graph APIRetrieving data from

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>

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)); }}

Don’t have access?What happens when I...

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

Extended PermissionsWorking with

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

private function loginResponseHandler(success:Object, fail:Object):void { if (success) { Facebook.api('/platform', requestResponseHandler); } else { trace('Unable to log in'); }}

Requesting Permissionsvar options:Object = {};options.perms = new Array("user_about_me", "email", "friends_birthday");Facebook.login(loginResponseHandler, options);

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

Creating & ModifyingData on Facebook

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"}

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");

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");

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.

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)); }}

Demos

Alternative PostingInvoking the ‘Share’ dialogs

What are the “Share” dialogs?

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);}

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/