Let’s Develop a Facebook Application – Part one

Hi Guys you know Facebook is popular platform where thousands of developer working to develop application for facebook users.It is very easy to develop facebook application.Here I will show you how to develop a facebook application.I have divided it into five parts.At the end of every part you will get a demo of application which you can test to keep it to your server.

Before we begin, there are a few things you need to know. In order to create a Facebook application, you should know or need the following:

• You should be well versed in PHP or some other scripting language — such as ASP.NET , Ruby on Rails, JavaScript, or Python — especially one that has a client library for Facebook API.
• You need to have a basic understanding of the Internet, SSH, MySQL, and Unix
• You need to be familiar with Web hosting fundamentals and have a place to host your application.

Now you're ready to get started! You can read in depth instructions on the Facebook Developers Wiki, but this outline here should give you good enough idea to get you going.

Here are the summary of part one

• Application Overview
• Setting up  an environment for our application.
• Initialize our application or Setup our Application.
• Display " Welcome to Our Application"
• Add our applicaton to user profile page
• Get User information
• Get user friends list
• Send Invitation to friends
• Send Notification to friends
• Send Notification Email to friends
• publish News Feed to Friends Wall using Feed Form Dialog

Part Two

• Facebook Connect
• Multi friend Selector
• Ajax with FBJS

Application Overview

First of all see a screen shot of our application and add the application. the url is

http://apps.facebook.com/guessthecelebrity/index.php

You can download the application until welcome page from here

And you can download the whole application from here

We will develop a simple funny celebrity contest application where every user can participate and can invite their friends.

Guess Celebrity

This is the page where user can play with celebrity.

Invite Friends

We can invite friends to join to this application.

Setting up an environment for our application

Now you have to create folder where you want to keep your application like where you want to host your application.I have created a folder "guessthecelebrity" as our application name.So you can also create a folder like your application name or  any name. I have given a screenshot of our application's folder structure here. So you can understand it easily.

You can download php 5 client library from http://wiki.developers.facebook.com/index.php/Client_Libraries

And You can download database library ezsql class from http://php.justinvincent.com

So I think you have a directory structure into your server. Here I will use my FBToolbox class to make this application.Because in this class most of the basic things are already handle. Let's start our coding.

Step 1

open your favorite editor and create a php file.name it config.php where we will write all configuration settings.

   1: // Facebook-specific configuration

   2: $apiKey         = '################################';

   3: $secretKey      = '################################';

   4: $baseUrl        = 'http://apps.facebook.com/guessthecelebrity/';

   5: $callbackUrl    = 'http://www.stylephp.com/guessthecelebrity/';

   6:

   7:

   8:

   9: // Database configuration

  10: $dbconfig['db']     = 'YOUR DATABASE NAME';

  11: $dbconfig['host']   = 'YOUR DATABASE HOST';

  12: $dbconfig['user']   = 'DB USER';

  13: $dbconfig['pass']   = 'DB PASSWORD';

  14:

  15: $listPerPage         = 10;

  16: $totalSearchResult    = 0;

Now create another one file and name it header.php where we will keep our header and menu portion. And also we will keep our css and JavaScript code at this file.In this file there are two tab one is Guess Celebrity and other one is invite friends.If you want you can create another  tab.There are some css code also for some style.

You can download header.php file from here

Step 5

Create another one file and name it index.php which is home page of our application.Where we include two file one is FBToolbox class and another one is common.php. And also footer.php file. In this page we will just welcome message to the user.So first we get user id using FBToolbox class function getUserID().

step 6

Create another one file and name it footer.php where we will keep our footer information there.

You can download footer.php file from here.

OK That’s good,We have completed our environment to develop facebook application!!!!!!

Initialize our application or Setup our Application

step 1

Now click on this http://www.facebook.com/developers/ to set up an application.

Here you will see a button set up new application. Please click on this button.

You will get this screen.where You have to type your application name and select agree and then click on save changes button.

You will get your API and Secret Key.If you want you can change icon and logo also to click on change your icon and change your logo link.Now click on Authentication Tab.

Here you can check users and Facebook Pages.So user can add your application. Then click on User Profiles Tab.

Here you can write tab Name and tab url.Which will show users profile tab. And you can select wide or narrow for your application.Then click on Canvas page Tab.

Here write a unique name for your canvas page.If your application name exists then it will show a error message.so write again.

ooh!! we have finished setup for our application. That’s good.

Display Welcome to Our Application

Step 1

Now open the config.php file again. And change the Api key, Secret Key,baseUrl and callbackUrl. baseUrl is the canvas page url and callbackUrl is the location of file at your server. You can see this information from http://www.facebook.com/developers/ link.

Step 2

Now all are set. You have to run this application using base or canvas url. Like you can run my application to type http://apps.facebook.com/guessthecelebrity/

Untill Now You can download the application from here

Add Our Application to User Profile Page

Now open the index.php file again. And Add below these line.

   1: //add this application to user profile

   2:

   3: $boxFbml = "Guess the Celebrity Contest..<a href=".$baseUrl."> Join Now"."</a>";

   4: $wallFbml = "Guess the Celebrity Contest..<a href=".$baseUrl."> Join Now"."</a>";

   5:

   6: $fbToolboxObj->addToProfile($fbuser, $boxFbml, $wallFbml);

   7:

   8: <!-- you have to print this line to add application to user profile

   9:      if user click on addtoprofile link then above function will work -->

  10:

  11: <div class="section_button"><fb:add-section-button section="profile"/></div>

Or you can download the file from here

Get User Information

By getting user information from facebook we will save it to our database. So we have to create a database.I have created a database named ‘guessthecelebrity’. You can download the schema from here. And Add some function at common.php file like saveUserInfo(),getUserInfo() etc.

You can download this file from here.

   1: $userInfo = getUserInfo($fbuser);//get user information from our db

   2:

   3: if(!$userInfo)//if not found

   4: {

   5:     $user_details = $fbToolboxObj->getUserInfo($fbuser);//get from facebook

   6:     saveUserInfo($fbuser,$user_details);//save user information

   7:     $userInfo = getUserInfo($fbuser);

   8: }

Get User FriendList and Send Invitation

Here we will create a invitation page.where user can send invitation to their friends. Create a file named invite.php or you can download this file from here.In this page we take users friend list using my FBToolbox class and send invitation to those friends. For invitation you have to pass addurl and nextUrl and fbmlData.Here addUrl is when user accept your invitation where they have to go and nextUrl is when user send invitation then where he will go after submit invitation. And fbmlData is your message for your friend.

You can download this file from here.

Publish News Feed Using Feed Form Dialog:

We will create feed template to publish news feed at user’s News feed section.So first of all go to this link http://developers.facebook.com/tools.php?feed and you will see below page.select your application and click next.

then you will another one window where you can write one line template.see the picture below. change the highlighted color text as you see here.

One line feed : {*actor*}'s guess is this is <a href="{*contest-url*}">{*celebrity-name*}'s</a> photo. If you want to participate or to help your friend <a href="{*contest-url*}">click here</a>

Sample Data :

{"contest-url":"http://stylephp.com",

"celebrity-name":"Raju Mazumder"

}

and click next and you will see another one window.see the picture below and change the highlighted color text as you see here.

short story template: {*actor*}'s guess is this is <a href="{*contest-url*}">{*celebrity-name*}'s</a> photo. If you want to participate or to help your friend <a href="{*contest-url*}">click here</a>

short story template body : {*body-text*}

sample data:

{"contest-url":"http://stylephp.com",

"celebrity-name":"Raju Mazumder",

"body-text":"Guess the celebrity contest",

"images":[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg","href":"http://www.facebook.com"}]

}

And then click next and you will the picture below.

Action Link text: read more

Action Link Url : {*contest-url*}

Sample Template Data:

{"contest-url":"http://stylephp.com",

"celebrity-name":"Raju Mazumder",

"body-text":"Guess the celebrity contest",

"images":[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg","href":"http://www.facebook.com"}]

}

And then click next you will see another one window.click on Register Template Bundle to get template bundle id and save it to use with our application.

ooh great we have created our feed template. Now lets see how to use it into our application.

Open header.php file agian and write these line below.here you have to change template bundle id which I use here.Use your register template bundle id. I have used ajax here to submit user celebrity guess selection.

   1: <script>

   2:

   3: function publishNewsFeed(celebrityPhoto,facebookuid,infoDiv,contestId,action)

   4: {

   5:         var celebrityName = '';

   6:         var answerObj = '';

   7:         var answer = '';

   8:         for(var i = 0; i < 4; i++)

   9:         {

  10:             answerObj = document.getElementById("answer"+i);

  11:             if(answerObj.getChecked())

  12:             {

  13:                 celebrityName = answerObj.getTitle();

  14:                 answer = answerObj.getValue();

  15:             }

  16:         }

  17:         document.getElementById('display').setValue(answerObj);

  18:         if(celebrityPhoto != '')

  19:         {

  20:             src = "<?php echo $callbackUrl;?>images/celebrity/"+celebrityPhoto;

  21:         }

  22:         else

  23:         {

  24:             src = "<?php echo $callbackUrl?>images/banner.jpg";

  25:         }

  26:

  27:

  28:

  29:         var template_data = {"celebrity-name" : ""+celebrityName,

  30:         "contest-url": "<?php echo $baseUrl?>",

  31:         "body-text":"Guess Celebrity Contest",

  32:         "images":[{"src":src,"href":"<?php echo $baseUrl?>"}]};

  33:

  34:         Facebook.showFeedDialog(83607323911, template_data, '', [],

  35:                           function() {new Dialog().showMessage("Info",

  36:                 "Successfully shared your answer with your friends");});

  37:

  38:         var ajax            = new Ajax();

  39:         ajax.responseType   = Ajax.FBML;

  40:         ajax.ondone         = function(data)

  41:         {

  42:             document.getElementById(infoDiv).setInnerFBML(data);

  43:

  44:         }

  45:

  46:         var queryParams     = {"answer" : answer, "facebookuid" : facebookuid,

  47:         "contestId" : contestId};

  48:         ajax.post('<?php echo $callbackUrl ?>ajax.php?action='+action, queryParams);

  49:

  50:

  51:

  52: }

  53: </script>

And for this you have to change index.php file also.You can download the complete index.php file from here. And Here we have to create another file ajax.php which file will handle all ajax request from our application.

You can download the ajax.php and header.php file from here.

Now we will send notification to user’s friend when a user added our application. Open index.php file again write these line.

   1: //send Notification and Notification Email

   2:

   3: // Get friend list here

   4:

   5: $friendList = $fbToolboxObj->getFriendList($fbuser,false);

   6: $message =  '<fb:name uid='.$fbuser.' capitalize="true" /> 

   7:             has added Guess the Celebrity Application. If you

   8:             want you can join to click <a href='.$baseUrl.'>here</a>';

   9:

  10: $fbToolboxObj->sendNotification($friendList,$message,'app_to_user');

Or you can download from here

Oh great we have completed our application’s  part one

You can download the whole application to click here

So Develop facebook application and enjoy!!!

Let me know if you want to know anything.

My next post about this application’s second part where I will show you facebook connect,multi friend selector and more!! so keep your eyes here…..

• March 20, 2009 -- A PHP Class For Facebook Application Developer (15)