Facebook Apps Development 101 (Java)

  • 21,721 views
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

Views

Total Views
21,721
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
242
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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/

Transcript

  • 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=""+url+"";");
    %>
     
    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