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)

1. Facebook Apps Dev 101 Damon Widjaja

2. 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

4. 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

5. Here we go source: http://developers.facebook.com/docs/guides/canvas/

6. 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

7. Tiny screen source: http://developers.facebook.com/docs/guides/canvas/

8. iFramevs 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: http://www.facebook.com/myapp Set your canvas URL Opens in canvas Example: http://www.myapp.com

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

11. Coding time! Development environment assumption Java Struts2 Tomcat mySql Most tutorials and examples on the web is in PHP

12. 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

13. 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

14. Add this application source: http://developers.facebook.com/docs/authentication/

15. 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;

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("varurl=quot;"+url+"quot;;"); %> if(url != null) { window.open(url, "_parent", ""); } --> </script>

17. 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 object Huh? Simply saying, signed_requesthas to be decoded to be meaningful!

18. Super Secret source: http://developers.facebook.com/docs/authentication/signed_request/

19. Why bother? Within the encoded signed_requestparameter, lies the very important access_token Cool, so what is it for? access_tokenis necessary to gain access to private information granted during authorization And oh, Facebook defines the steps to decode signed_request

20. Facebook says source: http://developers.facebook.com/docs/authentication/signed_request/

21. 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 StringTokenizerst = 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 { 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"); }

25. 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

26. 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=

27. 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/

28. Sample code FacebookClientfacebookClient = new DefaultFacebookClient(accessToken); JsonObjectfbUserJSON = 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 Javascriptfunction to trigger commonly used Facebook dialogs Post to wall Invite friends Permission requested during authentication applies here!

31. The familiar pop-up! source: http://developers.facebook.com/docs/reference/dialogs/

32. 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>

33. Sample code - Part 2 function 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; }

34. 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