Facebook Apps Development 101 (Java)

Uploaded 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)

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)

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    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/


  • 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:
  • 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!
  • 11. Coding time!
    Development environment assumption
    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
    Or, append specific scope parameters
  • 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;
    if(url != null) {
       window.open(url, "_parent", "");
  • 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");
    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();
  • 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
  • 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 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>
        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
  • 33. Sample code - Part 2
    function postToWall() {
                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) {
                } 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