Facebook Apps Dev 101

Damon Widjaja

Facebook Apps Basic

Integrate web applications with core Facebook Experience

Example: getting user information and posting to wall

Benefit? A powerful and cost effective measures for one's product/service to gain exposure (i.e. user engagement, viral effect)

Getting Started

Step 1: Registering application

Step 2: Setting-up application

Step 3: Authorizing application

Step 4: Accessing user information

Step 5: Interacting with Facebook

Step 1: Registering Application

Add Facebook develop apps @ http://www.facebook.com/developers

Verify Facebook account (Mobile phone or credit card)

Create your application!

Get a unique application ID and secret

Here we go

source: http://developers.facebook.com/docs/guides/canvas/

Canvas

A blank window within Facebook on which to run your application

Minimum screen size of only 760 px wide

Type of Canvas:

iFrame

FBML

Tiny screen

source: http://developers.facebook.com/docs/guides/canvas/

iFrame vs FBML

iFrame Benefits:

Scalability in the long run (i.e. easy to move to Facebook Connect website)

Let you use Javascript, HTML, CSS (Ajax anyone?)

Easy to debug

FBML Benefits:

Easy to access Facebook elements

Faster loads

Note: FBML might be deprecated

Step 2: Setting-up Application - Canvas

Set your canvas name (Very important!)

Easy to remember

Branding perspective

Example: http://www.facebook.com/myapp

Set your canvas URL

Opens in canvas

Example: http://www.myapp.com

Hello world!

http://www.myapp.com

Coding time!

Development environment assumption

Java

Struts2

Tomcat

mySql

Most tutorials and examples on the web is in PHP

Step 3: Authorizing application

Is it required? No!

BUT it is necessary to create a personalized user experience (i.e. retrieve user email address, post to wall)

App creator controls the degree of permissions required during authorization

Tell me how?

Call the following URI on your default index page upon load

https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL

Or, append specific scope parameters

https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream

Add this application

source: http://developers.facebook.com/docs/authentication/

Sample code - Part 1

<script type="text/javascript"><!--<%String uri = "http://apps.facebook.com/myapp/login";String appId = "12345678910";String perms = "email,user_birthday"; String url = "https://graph.facebook.com/oauth/authorize?scope="+perms+"&client_id=" + appId; 

Sample code - Part 2

if (uri != null) {     try {          uri = java.net.URLEncoder.encode(uri, "UTF-8");     }     catch (java.io.UnsupportedEncodingException e) {     }} url = url + "&redirect_uri=" + uri;out.println("var url=\""+url+"\";");%> if(url != null) {   window.open(url, "_parent", "");}--></script>

What’s next?

Have to know fact! Facebook passes user information in the form of signed_request parameter to the canvas URL

This signed_request parameter is a base64url encoded JSON object

Huh? Simply saying, signed_request has to be decoded to be meaningful!

Super Secret

source: http://developers.facebook.com/docs/authentication/signed_request/

Why bother?

Within the encoded signed_request parameter, lies the very important access_token

Cool, so what is it for? access_token is necessary to gain access to private information granted during authorization

And oh, Facebook defines the steps to decode signed_request

Facebook says

source: http://developers.facebook.com/docs/authentication/signed_request/

Sample code - Part 1

String accessToken = null;String signedRequest = request.getParameter("signed_request");

if (signedRequest == null || signedRequest.length() == 0) {     log.error("AUTH ERROR: Facebook signed request is missing");     return"ERROR";}

int count = 0;String payload = null;

Sample code - Part 2

//Break the code using tokenizerStringTokenizer st = new StringTokenizer(signedRequest, ".");

while (st.hasMoreTokens()){    if(count == 1)     {          payload = st.nextToken();          break;     }     else          st.nextToken();

     count++;}

Sample code - Part 3

//Decode Base64BASE64Decoder decoder = new BASE64Decoder();

//Replace spepayload = payload.replace("-", "+").replace("_", "/").trim();

//Decode Base64 - payloadtry {     byte[] decodedPayload = decoder.decodeBuffer(payload);     payload = new String(decodedPayload, "UTF8");} catch (IOException e) {     // TODO Auto-generated catch block     log.error("ERROR: Unable to perform Base64 Decode");     return null;}

Sample code - Part 4

//JSON Decode - payloadtry {     JSONObject payloadObject = new JSONObject(payload);

     //Parse JSON data     accessToken = "" + payloadObject.get("oauth_token"); //Retrieve oauth token} catch (JSONException e) {     log.error("ERROR: Unable to perform JSON decode");}

Step 4: Accessing user information

The simplicity of Graph API

REST standard, returns data in JSON format

Try the following

http://graph.facebook.com/me

http://graph.facebook.com/me/picture

Utilizing access token

Most still returns information without access token

BUT Data is limited to public information

Try the following with access token

http://graph.facebook.com/me?access_token=

WHILE Some strictly requires access token

https://graph.facebook.com/me/friends?access_token=

The Java Way

Easy way to execute Graph API request

Generic functions supported

Get the API from http://code.google.com/p/facebook-java-api/

Sample code

FacebookClient facebookClient = new DefaultFacebookClient(accessToken);JsonObject fbUserJSON = facebookClient.fetchObject("me", JsonObject.class);

String facebookId = fbUserJSON.getString("id");String firstName = fbUserJSON.getString("first_name");

Step 5: Interacting with Facebook

Accessing popular Facebook features

Client-side scripting using Javascript SDK

Extensive functionalities: From making Graph API calls to opening Popular Dialogs

Popular Dialogs

Javascript function to trigger commonly used Facebook dialogs

Post to wall

Invite friends

Permission requested during authentication applies here!

The familiar pop-up!

source: http://developers.facebook.com/docs/reference/dialogs/

Sample code - Part 1

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script>  FB.init({    appId  : 'YOUR APP ID',    status : true, // check login status    cookie : false, // enable cookies to allow the server to access the session    xfbml  : true  // parse XFBML  }); </script>

Sample code - Part 2function postToWall() {     FB.ui({            method: 'feed',            name: ‘Facebook Dialogs',            link: 'http://my-app.com',            caption: ’Reference Documentation',            description: ’Dialogs provide simple, consistent interface…',            message: ’Facebook dialogs are so easy'     }, function(response) {            if (response && response.post_id) {                alert('Successful!');            } else {                alert('Uh-oh, something is wrong.');            }     });     return false;}

Congrats!

You are now a full-fledge Facebook Apps Developer!

Why don’t challenge yourself to do the following:

Create a simple Facebook application that incorporates what we have learnt in this session

Impress your teacher!

Claim it at http://www.gamemaki.com