Facebook Apps Development 101 (Java)

Facebook Apps Dev 101Damon Widjaja

Facebook Apps BasicIntegrate web applications with core Facebook ExperienceExample: getting user information and posting to wallBenefit? A powerful and cost effective measures for one's product/service to gain exposure (i.e. user engagement, viral effect)

Getting StartedStep 1: Registering applicationStep 2: Setting-up applicationStep 3: Authorizing applicationStep 4: Accessing user informationStep 5: Interacting with Facebook

Step 1: Registering ApplicationAdd Facebook develop apps @ http://www.facebook.com/developersVerify Facebook account (Mobile phone or credit card)Create your application!Get a unique application ID and secret

Here we gosource: http://developers.facebook.com/docs/guides/canvas/

CanvasA blank window within Facebook on which to run your applicationMinimum screen size of only 760 px wideType of Canvas:iFrameFBML

Tiny screensource: http://developers.facebook.com/docs/guides/canvas/

iFramevs FBMLiFrame 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 debugFBML Benefits:Easy to access Facebook elementsFaster loadsNote: FBML might be deprecated

Step 2: Setting-up Application - CanvasSet your canvas name (Very important!)Easy to rememberBranding perspectiveExample: http://www.facebook.com/myappSet your canvas URLOpens in canvasExample: http://www.myapp.com

Hello world!http://www.myapp.com

Coding time!Development environment assumptionJavaStruts2TomcatmySqlMost tutorials and examples on the web is in PHP

Step 3: Authorizing applicationIs 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 loadhttps://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URLOr, append specific scope parametershttps://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream

Add this applicationsource: 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 2if (uri != null) { try { uri = java.net.URLEncoder.encode(uri, "UTF-8"); } catch (java.io.UnsupportedEncodingException e) { }} url = url + "&redirect_uri=" + uri;out.println("varurl=\""+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_requestparameter to the canvas URL This signed_requestparameter is a base64url encoded JSON objectHuh? Simply saying, signed_requesthas to be decoded to be meaningful!

Super Secretsource: http://developers.facebook.com/docs/authentication/signed_request/

Why bother?Within the encoded signed_requestparameter, lies the very important access_tokenCool, so what is it for? access_tokenis necessary to gain access to private information granted during authorizationAnd oh, Facebook defines the steps to decode signed_request

Facebook sayssource: http://developers.facebook.com/docs/authentication/signed_request/

Sample code - Part 1String 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 tokenizerStringTokenizerst = 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 { JSONObjectpayloadObject = 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 informationThe simplicity of Graph APIREST standard, returns data in JSON formatTry the followinghttp://graph.facebook.com/mehttp://graph.facebook.com/me/picture

Utilizing access tokenMost still returns information without access tokenBUT Data is limited to public informationTry the following with access tokenhttp://graph.facebook.com/me?access_token=WHILE Some strictly requires access tokenhttps://graph.facebook.com/me/friends?access_token=

The Java WayEasy way to execute Graph API requestGeneric functions supportedGet the API from http://code.google.com/p/facebook-java-api/

Sample codeFacebookClientfacebookClient = new DefaultFacebookClient(accessToken);JsonObjectfbUserJSON = facebookClient.fetchObject("me", JsonObject.class);String facebookId = fbUserJSON.getString("id");String firstName = fbUserJSON.getString("first_name");

Step 5: Interacting with FacebookAccessing popular Facebook featuresClient-side scripting using Javascript SDKExtensive functionalities: From making Graph API calls to opening Popular Dialogs

Popular DialogsJavascriptfunction to trigger commonly used Facebook dialogsPost to wallInvite friendsPermission 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: ‘FacebookDialogs', link: 'http://my-app.com', caption: ’Reference Documentation', description: ’Dialogsprovide simple, consistent interface…', message: ’Facebook dialogs are soeasy' }, 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 sessionImpress your teacher!Claim it at http://www.gamemaki.com

Facebook Apps Development 101 (Java)

More Related Content

What's hot (20)

Similar to Facebook Apps Development 101 (Java) (20)

Recently uploaded (20)

Facebook Apps Development 101 (Java)

Editor's Notes