Facebook Exercise 3, 20 points

You are going to create a webapplication deployed on GAE that communicates with Facebook using JSP and the Facebook Javascript SDK. Here is a quick understanding of the components of your webapp

• index.jsp page will serve as the app that facebook will load
• Typically you will do your backend logic with java (JSP) possibly making calls to other back end webapps, servlets, or other systems as needed.
• Whatever HTML is static you will do in the HTML of your JSP.
• Inside your index.jsp file (or any other jsp files you call) you will have Javascript code that will utilize the Facebook SDK.

GETTING STARTED: Start by deploying your GAE.1 as a Facebook application (from GAE) See some starting tips & links . Extend the application to ask for social data about the user's age (which you calculate from their birthdate/year --must ask for permission to this). THIS MEANS you must have Authentication performed and the User must give your app permission (see above and developer.facebook.com for information about how to use Facebook Social Graph api and get permissions. You need to figure out the code and what to ask for, etc.

 

UNDERSTANDING Steps of the Exercise

STEP 1 facebook login ( this does user authentication and will give you permission to access user information)

STEP 2 ask for extended permissions

STEP 3 publish a message to the user's facebook page from your app

STEP 4 asking information about the user

 

 

 

 

Lets do the exercise Step by Step

• STEP 1: implement a web-app with index.jsp that does the FACEBOOK Login
• STEP 2: modify step1 app by adding in new permissions to get the user's profile info (see facebook doc on how to do this by "Adding permissions").
• STEP 3: Now you have Facebook login setup with correct permissions requested and have an access token (lasts limited amount of time). Using the access token you got in step 1&2 you now ask the Graph API for some information about the user. First start by reading quick start on Graph API that lets you practice using it through a web interface before you start coding. To read or write data to the Graph API, you'll use the JS SDK's FB.api() method. Edit your index.jsp from Step 1 &2 to add two features:
  • publish something ...put following that is triggered when the user hits some HTML button labeled "Publish to Facebook" will call the following Javascript
    
    

    FB.login(function()
    {   FB.api('/me/feed', 'post', {message: 'Hello, world!'});  }, {scope: 'publish_actions'});
    
    
    
    NOTE THE ABOVE first asks for permission to publish_actions via a new facebook login 

    The results will be you will get published message on user's facebook page

    see https://developers.facebook.com/docs/graph-api/reference/user/feed/ for more about feed

• STEP 4: Now I want you to ask for permission to get more social data about the user and publish it to a tag in your HTML/jsp document. (see Step 1 where do this with users name).
  
  

 

 

Special Note:

1) here is link (current, if broken go to developer.facebook.com and search on "permissions") to the kinds of permission you can ask your app has regarding a user. https://developers.facebook.com/docs/facebook-login/permissions/#reference

2) Here is link on how to use FB.api(*) to get user info once in #1 you have gotten the corresponding permission (current link, if broken go to developer.facebook.com and search on https://developers.facebook.com/docs/graph-api/reference/user

SOME EXAMPLES ASKING FOR id, last_name and email

FB.api('/me', {fields: 'id,last_name,email'}, function(response) {    ***whatever you want****  });

FB.api('/me?fields=id,last_name,email', function(response) {    ***whatever you want****  }); 

 

 

 

How to Turn it IN

Go to "Blackboard->Exercises->Facebook Authentication+Social Graph+ Exercise"

and read how to turn in there.