N10K



Hi,
This was a Facebook Application that I made out of personal interest. I was going through the Facebook API and wanted to implement it. Along with that , I also wanted to get a hang of a server side language (PHP) and ajax. Hence, this application. Since October 2011, Facebook has made it mandatory that every application should use a SSL certificate. My website currently does not have a SSL certificate (https) and hence Facebook does not allow my application to function.


Title:

The Chosen Friend

Abstract:

Answer fun questions about your friends and post them on their wall! See what they choose for you..

The GUI: The GUI of the application looked somewhat like this :

Hello John Doe,

Who do you think is the secret member of the Ku Klux Klan?





Sujit Nair
Maneesh Mohan
Kaushik Desai
Shekhar Jadhav
Prashant Shetty





Add a personalized message here (Type the message before you choose your friend!):

(Click a friend's photo to post on their wall else press SKIP!)




Working:

  1. When the application loaded, a question along with its associated image was displayed to the user. A set of five friends chosen randomly from the friend's user list was also displayed. The user could click on any one of these friends and thus, post the question on his friend's wall

  2. The user could also add a comment before posting the question to the friend's wall. In this case, the comment would also be displayed on the friend's wall.

  3. Once the user clicked on a particular friend, a confirmation box was displayed which asked the user to confirm his choice. In case the user wanted to choose another friend, he could click on Cancel and choose a different friend. If he clicked on OK, the content would be posted on his friend's wall

  4. A SKIP! button at the bottom of the page, enabled the user to skip the question . In this case a new random question would be loaded with a different set of friends chosen randomly.

  5. Once the question was posted on the friend's wall , the friend would see the following content on his wall:

    I was asked < question> and I chose YOU! .

  6. So, in this case , it would look something like this:

  7. Since the post would be from your account , your friend can identify who posted the content on his wall.

  8. A list of all the questions has been put up HERE

Technologies used:

  1. Ajax
  2. Ajax was used to post content on the friend's wall. The connection with the server was broken once the webpage finished loading. When you confirmed to post the question to the friend's wall , a request was sent in the background to another webpage. The question, its associated image and the comments were passed as parameters to this webpage. This other webpage completed the 'posting on the wall' process in the background. When the request was successfully executed, the current webpage(the one which was used to display the question) automatically reloaded with a fresh question and a random set of new friends. The ajax functionality was implemented by the file publishtowall.php which has been provided in the source code below.

  3. Javascript
  4. Javascript was used to show a confirmation box whenever you chose to post on a particular friend's wall. Also, javascript was used to implement a SKIP! button which was given at the bottom of the page. Clicking this button refreshed the page, thereby loading a new question with new set of friends.

  5. Cascaded Style Sheets (CSS)
  6. CSS was used to design the various elements of the webpage. When you hover your mouse on any of the choices, you'll see that they get highlighted. This was achieved with CSS. The highlighted picture indicates your current selection.

  7. Facebook API
  8. Facebook enables developers to integrate into core Facebook experience by providing an API. I used this API to pull out the friend lists of a particular user. 5 friends were chosen randomly from this friend list and then displayed to the user . You need to send a specific query to the facebook servers. The servers then reply back with a JSON string. You need to decode this in order to access the friend list.

    In case you want more information about the Facebook API , you can click HERE

  9. My SQL Databases
  10. I used My Sql database as my back end. This database consisted of a table which stored the questions and their respective images. Questions were pulled out randomly from this table and then displayed to the user. The backup of this table can be downloaded from HERE. You need to upload this file with the backup wizard of a Linux CPanel in order to make it work.

  11. PHP
  12. PHP was used as the server side language to implement this application. Facebook predominantly uses PHP to display webpages. There are quite a few informative examples provided for the php Facebook API which quickly give you a hang of how to use it. Also, PHP has numerous built in functions which make the coding process easier.

Source Code:

Please note : YOU NEED THE FACEBOOK API to make this application work. Kindly download that from the internet.

The source code of this application is : available on request. Send a mail to nikhildahake@hotmail.com