Facebook Exercise 3, 20 points

You are going to create a Facebook app 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.

 

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.