Home » Tutorial » How Do Beginners Make The Application On Facebook

How Do Beginners Make The Application On Facebook

Wednesday, December 21st 2011. | Tutorial

Facebook provides means to extend the Facebook platform by developing small applications that can be embedded within Facebook. Several APIs for different programming languages are provided, which allow to access Facebook data and functionality from your own Facebook application. Facebook applications can either be embedded within the Facebook User Interface or can run on your own server and access data and functionality from Facebook.

Example Application on Facebook : Amazon Corner

On the server side we will use both JSP and Java Servlet technologies together with Apache Tomcat that you have already installed in the previous exercise. All tasks of this exercise are based on a framework that can be downloaded from the course web site. you can choose this step below.

Facebook applications for amazon

Creating your own Facebook application on Facebook Developers

If you are not registered to Facebook, create an account and get connected with some of your fellow students. Then, visit the Facebook Developer web site ( http://developers.facebook.com/ ) where you can find all information on how to get started.

Note that we will access Facebook through the RestFB API that is already part of the framework that you have downloaded from the course web site.

Now install the Facebook Developer Application and create your own application as described on the Facebook Developer site. You do not need to change any application settings except for the Site URL under the tab page Web Site. This callback URL indicates to which URL a user is to be redirected after the login.

Since you will run the application on your local server you can safely use following callback URL: http://localhost:8080/facebook/. Alternatively, you can replace localhost with your machine’s IP address if you want to share the application with some of your friends. Note that if you change the project’s context name, replace ‘facebook’ with your new context name. Then, copy the Application ID or API KEY to the clipboard. We will need this information later.

You have now successfully created your first Facebook application and have all information to access Facebook based on Java servlets as you will see in the next step.

Extracting and Running the Framework

Before we can start, we need to extract the framework provided on the course web page to your Eclipse workspace. In Eclipse you can now build a new Java project with the extracted folder as source. Make sure that the libraries of the RestFB API in the WEB-INF/lib folder of your source code distribution are correctly added to the build path. In the file config.properties overwrite the value for APP ID with the Application ID or API KEY from your application.

Build the application and check, if you can start it from Eclipse. Note that you will not be able to start your application directly from the Tomcat Manager Web site, since WTP owns’ your local Tomcat installation and Tomcat configuration files are managed by WTP outside your local Tomcat installation.

Implementing the Facebook Login in JSP

The component that handles the login to Facebook is index.jsp which can be found in the WebContent directory. The relatively complex Facebook authentication procedure is described in more detail at http://developers.facebook.com/docs/authentication/, but for the purpose of this exercise we will use the Facebook JavaScript SDK3 that abstracts nicely from the details and makes the login process fairly simple.

In order to retrieve data from Facebook, a user first has to login to Facebook and is then redirected to the callback URL which we have already specified. We have already implemented this for you in JSP and JavaScript, but you are asked to add HTML markup in order to welcome the user and give them some instructions on how to proceed.

Implementing the Friends Servlet

After the login, the user is redirected to the Friends Servlet ch.ethz.globis.web.facebook.Friends. You should now build on and extend the provided code in order to retrieve the names and the pictures of all of your friends and display them in a simple HTML page. Again, make use of HTML markup such as tables to show your friends and their pictures, but this time from a Java Servlet rather than JSP

Related For

Comment For How Do Beginners Make The Application On Facebook