Facebook Apps Development 101 (Java)

25,703 views

Published on

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)

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
25,703
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
256
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Source:http://developers.facebook.com/docs/guides/canvas/http://www.articletrader.com/computers/software/key-benefits-of-facebook-application-development.html
  • Source:http://www.ccheever.com/blog/?p=10
  • Source:http://developers.facebook.com/docs/authentication/http://developers.facebook.com/docs/authentication/permissions/
  • Source:http://developers.facebook.com/docs/authentication/signed_request/
  • Source:http://developers.facebook.com/docs/authentication/signed_request/
  • Source:http://developers.facebook.com/docs/authentication/signed_request/
  • Source:http://developers.facebook.com/docs/authentication/signed_request/
  • Source:http://developers.facebook.com/docs/authentication/signed_request/
  • Source:http://developers.facebook.com/docs/reference/api/
  • Source:http://developers.facebook.com/docs/reference/api/
  • Source:http://developers.facebook.com/docs/authentication/signed_request/
  • Source:http://developers.facebook.com/docs/reference/javascript/
  • Facebook Apps Development 101 (Java)

    1. 1. Facebook Apps Dev 101<br />Damon Widjaja<br />
    2. 2. Facebook Apps Basic<br />Integrate web applications with core Facebook Experience<br />Example: getting user information and posting to wall<br />Benefit? A powerful and cost effective measures for one's product/service to gain exposure (i.e. user engagement, viral effect)<br />
    3. 3. Getting Started<br />Step 1: Registering application<br />Step 2: Setting-up application<br />Step 3: Authorizing application<br />Step 4: Accessing user information<br />Step 5: Interacting with Facebook<br />
    4. 4. Step 1: Registering Application<br />Add Facebook develop apps @ http://www.facebook.com/developers<br />Verify Facebook account (Mobile phone or credit card)<br />Create your application!<br />Get a unique application ID and secret<br />
    5. 5. Here we go<br />source: http://developers.facebook.com/docs/guides/canvas/<br />
    6. 6. Canvas<br />A blank window within Facebook on which to run your application<br />Minimum screen size of only 760 px wide<br />Type of Canvas:<br />iFrame<br />FBML<br />
    7. 7. Tiny screen<br />source: http://developers.facebook.com/docs/guides/canvas/<br />
    8. 8. iFramevs FBML<br />iFrame Benefits:<br />Scalability in the long run (i.e. easy to move to Facebook Connect website)<br />Let you use Javascript, HTML, CSS (Ajax anyone?)<br />Easy to debug<br />FBML Benefits:<br />Easy to access Facebook elements<br />Faster loads<br />Note: FBML might be deprecated<br />
    9. 9. Step 2: Setting-up Application - Canvas<br />Set your canvas name (Very important!)<br />Easy to remember<br />Branding perspective<br />Example: http://www.facebook.com/myapp<br />Set your canvas URL<br />Opens in canvas<br />Example: http://www.myapp.com<br />
    10. 10. Hello world!<br />http://www.myapp.com<br />
    11. 11. Coding time!<br />Development environment assumption<br />Java<br />Struts2<br />Tomcat<br />mySql<br />Most tutorials and examples on the web is in PHP<br />
    12. 12. Step 3: Authorizing application<br />Is it required? No!<br />BUT it is necessary to create a personalized user experience (i.e. retrieve user email address, post to wall)<br />App creator controls the degree of permissions required during authorization<br />
    13. 13. Tell me how?<br />Call the following URI on your default index page upon load<br />https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL<br />Or, append specific scope parameters<br />https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream<br />
    14. 14. Add this application<br />source: http://developers.facebook.com/docs/authentication/<br />
    15. 15. Sample code - Part 1<br /><script type="text/javascript"><br /><!--<br /><%<br />String uri = "http://apps.facebook.com/myapp/login";<br />String appId = "12345678910";<br />String perms = "email,user_birthday";<br /> <br />String url = "https://graph.facebook.com/oauth/authorize?scope="+perms+"&client_id=" + appId;<br /> <br />
    16. 16. Sample code - Part 2<br />if (uri != null) {<br />     try {<br />          uri = java.net.URLEncoder.encode(uri, "UTF-8");<br />     }<br />     catch (java.io.UnsupportedEncodingException e) {<br />     }<br />}<br /> <br />url = url + "&redirect_uri=" + uri;<br />out.println("varurl=""+url+"";");<br />%><br /> <br />if(url != null) {<br />   window.open(url, "_parent", "");<br />}<br />--><br /></script><br />
    17. 17. What’s next?<br />Have to know fact! Facebook passes user information in the form of signed_requestparameter to the canvas URL <br />This signed_requestparameter is a base64url encoded JSON object<br />Huh? Simply saying, signed_requesthas to be decoded to be meaningful! <br />
    18. 18. Super Secret<br />source: http://developers.facebook.com/docs/authentication/signed_request/<br />
    19. 19. Why bother?<br />Within the encoded signed_requestparameter, lies the very important access_token<br />Cool, so what is it for? access_tokenis necessary to gain access to private information granted during authorization<br />And oh, Facebook defines the steps to decode signed_request<br />
    20. 20. Facebook says<br />source: http://developers.facebook.com/docs/authentication/signed_request/<br />
    21. 21. Sample code - Part 1<br />String accessToken = null;<br />String signedRequest = request.getParameter("signed_request");<br />if (signedRequest == null || signedRequest.length() == 0) {<br />     log.error("AUTH ERROR: Facebook signed request is missing");<br />     return"ERROR";<br />}<br />int count = 0;<br />String payload = null;<br />
    22. 22. Sample code - Part 2<br />//Break the code using tokenizer<br />StringTokenizerst = new StringTokenizer(signedRequest, ".");<br />while (st.hasMoreTokens())<br />{<br />    if(count == 1)<br />     {<br />          payload = st.nextToken();<br />          break;<br />     }<br />     else<br />          st.nextToken();<br />     count++;<br />}<br />
    23. 23. Sample code - Part 3<br />//Decode Base64<br />BASE64Decoder decoder = new BASE64Decoder();<br />//Replace spe<br />payload = payload.replace("-", "+").replace("_", "/").trim();<br />//Decode Base64 - payload<br />try {<br />     byte[] decodedPayload = decoder.decodeBuffer(payload);<br />     payload = new String(decodedPayload, "UTF8");<br />} <br />catch (IOException e) {<br />     // TODO Auto-generated catch block<br />     log.error("ERROR: Unable to perform Base64 Decode");<br />     return null;<br />}<br />
    24. 24. Sample code - Part 4<br />//JSON Decode - payload<br />try {<br />     JSONObjectpayloadObject = new JSONObject(payload);<br />     //Parse JSON data<br />     accessToken = "" + payloadObject.get("oauth_token"); //Retrieve oauth token<br />} <br />catch (JSONException e) <br />{<br />     log.error("ERROR: Unable to perform JSON decode");<br />}<br />
    25. 25. Step 4: Accessing user information<br />The simplicity of Graph API<br />REST standard, returns data in JSON format<br />Try the following<br />http://graph.facebook.com/me<br />http://graph.facebook.com/me/picture<br />
    26. 26. Utilizing access token<br />Most still returns information without access token<br />BUT Data is limited to public information<br />Try the following with access token<br />http://graph.facebook.com/me?access_token=<br />WHILE Some strictly requires access token<br />https://graph.facebook.com/me/friends?access_token=<br />
    27. 27. The Java Way<br />Easy way to execute Graph API request<br />Generic functions supported<br />Get the API from http://code.google.com/p/facebook-java-api/<br />
    28. 28. Sample code<br />FacebookClientfacebookClient = new DefaultFacebookClient(accessToken);<br />JsonObjectfbUserJSON = facebookClient.fetchObject("me", JsonObject.class);<br />String facebookId = fbUserJSON.getString("id");<br />String firstName = fbUserJSON.getString("first_name");<br />
    29. 29. Step 5: Interacting with Facebook<br />Accessing popular Facebook features<br />Client-side scripting using Javascript SDK<br />Extensive functionalities: From making Graph API calls to opening Popular Dialogs<br />
    30. 30. Popular Dialogs<br />Javascriptfunction to trigger commonly used Facebook dialogs<br />Post to wall<br />Invite friends<br />Permission requested during authentication applies here!<br />
    31. 31. The familiar pop-up!<br />source: http://developers.facebook.com/docs/reference/dialogs/<br />
    32. 32. Sample code - Part 1<br /><div id="fb-root"></div><br /><script src="http://connect.facebook.net/en_US/all.js"></script><br /><script><br />  FB.init({<br />    appId  : 'YOUR APP ID',<br />    status : true, // check login status<br />    cookie : false, // enable cookies to allow the server to access the session<br />    xfbml  : true  // parse XFBML<br />  }); <br /></script><br />
    33. 33. Sample code - Part 2<br />function postToWall() {<br />     FB.ui({<br />            method: 'feed',<br />            name: ‘FacebookDialogs',<br />            link: 'http://my-app.com',<br />            caption: ’Reference Documentation',<br />            description: ’Dialogsprovide simple, consistent interface…',<br />            message: ’Facebook dialogs are soeasy'<br />     }, function(response) {<br />            if (response && response.post_id) {<br />                alert('Successful!');<br />            } else {<br />                alert('Uh-oh, something is wrong.');<br />            }<br />     });<br />     return false;<br />}<br />
    34. 34. Congrats!<br />You are now a full-fledge Facebook Apps Developer!<br />Why don’t challenge yourself to do the following:<br />Create a simple Facebook application that incorporates what we have learnt in this session<br />Impress your teacher!<br />Claim it at http://www.gamemaki.com<br />

    ×