facebook apps development 101 (java)
DESCRIPTION
Thinking of developing your very own Facebook Apps? Here is a basic guide to start and get to know the important elements of a Facebook application. (Samples are in Java)TRANSCRIPT
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
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