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)

3 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 Verify Facebook account (Mobile phone or credit card) Create your application! Get a unique application ID and secret

Here we go source:

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:

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

9 Step 2: Setting-up Application - Canvas Set your canvas name (Very important!) Easy to remember Branding perspective Example: Set your canvas URL Opens in canvas Example:

Hello world!

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 address, post to wall) App creator controls the degree of permissions required during authorization

13 Tell me how? Call the following URI on your default index page upon load OUR_APP_ID&redirect_uri=YOUR_URL Or, append specific scope parameters OUR_APP_ID&redirect_uri=YOUR_URL&scope=emai l,read_stream

14 Add this application source:

Sample code - Part 1 <!-- <% String uri = " String appId = " "; String perms = " ,user_birthday"; String url = " rms+"&client_id=" + appId;

16 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", ""); } -->

17 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!

18 Super Secret source:

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:

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;

22 Sample code - Part 2 //Break the code using tokenizer StringTokenizer st = new StringTokenizer(signedRequest, "."); while (st.hasMoreTokens()) { if(count == 1) { payload = st.nextToken(); break; } else st.nextToken(); count++; }

23 Sample code - Part 3 //Decode Base64 BASE64Decoder decoder = new BASE64Decoder(); //Replace spe payload = payload.replace("-", "+").replace("_", "/").trim(); //Decode Base64 - payload try { 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; }

24 Sample code - Part 4 //JSON Decode - payload try { 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"); }

25 Step 4: Accessing user information The simplicity of Graph API REST standard, returns data in JSON format Try the following

26 Utilizing access token Most still returns information without access token BUT Data is limited to public information Try the following with access token WHILE Some strictly requires access token

27 The Java Way Easy way to execute Graph API request Generic functions supported Get the API from

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

29 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

30 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:

Sample code - Part 1 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 });

Sample code - Part 2 function postToWall() { FB.ui({ method: 'feed', name: ‘Facebook Dialogs', link: ' 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