Your SlideShare is downloading. ×
Facebook Apps Development 101 (Java)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Facebook Apps Development 101 (Java)

22,267
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)

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
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
22,267
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
247
Comments
0
Likes
4
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