Facebook apps allow deep integration into the Facebook experience and access to Facebook features like requests, bookmarks and page tabs. A Facebook app is like a website that uses the Facebook platform as a middleman between the user and app. When a user engages an app, Facebook provides some of their personal information to allow custom responses. Getting started requires setting up a canvas page where the app is loaded in an iframe. Authentication and authorization are needed to access full user data through a signed request parameter.

1. Facebook Apps Laurentiu Petrisor Chisan Pavel Cosmin Stefanache

2. Introduction Architecture Overview Tutorial Resources 2/13 Building an application on Facebook gives you the opportunity to deeply integrate into the core Facebook experience. Your application can integrate with many aspects of Facebook.com, including Requests , Bookmarks and Page tabs , making your application a seamless part of the Facebook experience. All of the core Facebook Platform technologies, such as Social Plugins , the Graph API and Platform Dialogs are available to Apps on Facebook.com.

3. Introduction Architecture Overview Tutorial Resources 3/13 How a Facebook App works Anyone can create an application (or app) that will run within the Facebook platform (and many do!). An app is like a regular website with the aditional benifits of the social network Facebook provides (such as friends , profiles boxes , walls etc). Technically, a Facebook app is just like a website: its mounted on a normal web sever and serves content to HTTP requests. The difference is that while a normal website receives requests directly from its users, an app has the Facebook platform as a middle man, between the user and the application.

4. 4/13 A Facebook application architecture vs. a normal web sever . Introduction Architecture Overview Tutorial Resources

5. 5/13 What Facebook tells the application about the user When the user engages the application, Facebook will add some of the user's personal information when contacting the app server, so the response, could be personalized. What details exactlly it sends along depends on many variables, most notabely if the user has authorized the app. However, Facebook has a module called Automatic Authentication . This mechanism allows the app to receive some of the user's info automatically, without the user's consent. These details include full name , profile picture , and friends list . Introduction Architecture Overview Tutorial Resources

6. 6/13 Getting Started Apps on Facebook.com are web applications that are loaded in the context of Facebook. You can build your application using any language or tool chain that supports web programming, such as PHP , Python , Java or C#. Apps on Facebook.com are loaded into a Canvas Page . When a user requests the Canvas Page, the Canvas URL is loaded within an iframe on that page. This results in your application being displayed within the standard Facebook chrome. Introduction Architecture Overview Tutorial Resources

7. 7/13 Authentication & Authorization In order to create a personalized user experience, Facebook sends your application information about the user. This information is passed to your Canvas URL using HTTP POST within a single signed_request parameter which contains a base64url encoded JSON object. When a user first accesses your app, the signed_request parameter contains a limited amount of user data. In order to gain access to all the user information available to your application by default (like the user's Facebook ID), the user must authorize your application. Facebook offers a number of different ways to handle authorization ranging from the Login Button to manually performing the OAuth2.0 flow on your Web server. Introduction Architecture Overview Tutorial Resources

8. 8/13 Authentication & Authorization After the user has authorized your application, the signed_request parameter will contain the following information on subsequent requests: Introduction Architecture Overview Tutorial Resources

9. 9/13 Requests Requests are a great way to enable users to invite their friends to your application. Requests integrate with Facebook notifications and dashboards, ensuring that a user will see the requests from their friends whenever they are on Facebook. You can also use requests to have a user notify their friends to take a specific action in your app, such as accepting a gift or helping the user complete a quest. Introduction Architecture Overview Tutorial Resources

10. 10/13 Bookmarks and Counters Bookmarks enable users to easily navigate back to your application from within Facebook. Bookmarks are automatically added for your application when user uses it repeatedly. The bookmark will appear on left column of the homepage as well as on the top right of a Canvas Page. Introduction Architecture Overview Tutorial Resources

11. 11/13 Page Tabs Facebook Pages are a heavily used feature of Facebook. Major brands, celebrities, etc. use Facebook Pages as their "social home" on the web. One of the most interesting features of Apps on Facebook.com is the ability for your application to be used within the context of a Facebook Page. Introduction Architecture Overview Tutorial Resources

12. 12/13 How to make a Facebook Application There are a lot of examples on the web in how to make a Facebook Application. Some of them are included below: http://www.youtube.com/watch?v=gtIUiTXx9Ik&feature=related http://www.youtube.com/watch?v=roOYZKsN3Yg&feature=player_embedded Introduction Architecture Overview Tutorial Resources

13. 13/13 Introduction Architecture Overview Tutorial Resources This presentation is the mash-up of the ideas presented in the documents included below: http://blog.quaji.com/2009/08/facebook-csrf-attack-full-disclosure.html http://developers.facebook.com/docs/guides/canvas http://www.labnol.org/internet/tutorial-write-a-facebook-application/10116/