CS6320:  SW Engineering of Web Based Systems
Instructor Outline Syllabus Projects Links  

 

the first part, I covered a very high-level guide to getting started with writing a Facebook app.

 

iFrames

Facebook apps are included by Facebook inside its page using iFrames

iFrame
Standard part of HTML, embeds one webpage inside another
You can view pages through a normal web-browser to test them
Every Facebook page view goes via your webserver, so you can debug problems
Requires you to provide your own webserver

 

Facebook Apps: Detailed explanation

What happens when a Facebook user tries to use your Facebook App?

  1. User opens their web browser
  2. Finds a link to your app - usually your Canvas Page URL (http://apps.facebook.com/[your app name])
  3. Clicks on the link
  4. Web browser goes to that site (part of FB) and asks for the webpage
  5. Facebook sends back the Facebook navbar, with an empty iframe in the centre
  6. Facebook redirects the browser to your site to get the contents of the iframe - AND adds extra information to the request from the user
  7. Web browser automatically goes to YOUR site, sending the extra information FB provided it
  8. Your site creates a webpage, and sends it to the user’s browser
  9. User’s browser renders your webpage inside the iframe embedded inside the page it got from FB

…but what does this look like to the user?

  1. User opens browser
  2. Clicks on the name of your app
  3. Your app appears on the screen inside the navbars etc for Facebook

So, the first thing to understand, especially if you’ve used FB a lot yourself, is that there’s a lot more going on behind the scenes than appears to the user. This will become especially clear when you make a mistake and start trying to debug your app.

Facebook Login (Authentication)

There are two “modes” in which you can create a webpage to display as part of your app:

  • Default (not-authenticated)
  • Authenticated

In the default mode, i.e. if you do nothing special, you have NO ACCESS to any of Facebook’s data. You cannot find out ANYTHING about the Facebook user - you can’t find their name, you can’t find their friends, you can’t post items on their Wall, nothing.

Here is an example of a Web App done in J2EE that simply returns some HTML to say Hello that does not do authentication

hello app

 

 

In the authenticated mode, you have full access to whatever PERMISSIONS you ask for an can include:

  • read all the data of the currently logged-in user
  • most of the data of all OTHER users of your app (people who have “added” your app to their Facebook account)
  • send messages, post newsitems, etc, from the logged-in user (but they have to OK this manually)

Authenticating in java SEE FACEBOOK JAVA API FOR LATEST DETAILS AND EXAMPLES

FB provides you with either JavaScript SDK or other SDKs to perform Facebook Login/Authentication process to then access the Facebook API from code. If you are doing a Java EE Web app you will need to use JavaScript. Note for some permissions you can use the FBML tags inside your HTML ---you will see some examples of this. READ CURRENT developer.facebook.com. But, here are some examples of starting Facebook login in past

    FB.login(**)  = function call from Facebook Javascript SDK


<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">  </fb:login-button>
    
      This is special HTML Facebook markup that works in conjunction with having loaded Facebook Javascript SDK

 
© Lynne Grewe