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…..

A PHP Class For Facebook Application Developer

You know facebook is a great social application for million of users. And to develop a application for this site is also very popular. So I have planned to write a class where facebook application developer can do most of the basic things for their application using this class.Specially thanks to emran bhai and anis to review my class.The basic feature of this class

• Get Facebook Users profile information
• Get Friend list of a facebook user
• Send Notification to Facebook user
• Send Email Notification to Facebook user
• Set Your Application at Facebook user profile page
• Publish News feed to Facebook user

You can do above all the things to use this Class.

Download

You can download it from here. The zip file contains this class along with an example. You can also find full documentation here.

You can also download it from phpclasses.org

How to use it

   1: // Include our files

   2: include_once ('FBToolbox.class.php');

   3:

   4: // Prepare the object

   5: $fbToolboxObj = new FBToolbox('YOUR_API_KEY', 'YOUR_SECRET_KEY');

   6:

   7:

   8: // Get user information

   9: $userInfo = $fbToolboxObj->getUserInfo('FB USER ID');

  10: //print_r($userInfo);

  11: echo $userInfo[0]['current_location']['city'];

  12:

  13: // Get friend list here

  14: $friendList = $fbToolboxObj->getFriendList('FB USER ID',false,0,20);

  15: //print_r($friendList);

  16:

  17: // Send notification

  18: $fbToolboxObj->sendNotification(array('FB USER ID'),'test api class','app_to_user');

  19:

  20: // Send email notification (CAUTION: your application must have permission from user)

  21:

  22: $fbToolboxObj->sendEmail('FB USER ID','test api class','test api class');

  23:

  24: // Publish news feed

  25:

  26:

  27: $one_line_story_templates[] = '{*actor*} has developed a php wrapper 

  28: class for facebook application developer.';

  29: //You have to run this function only one times to get template bundle id

  30: $templateBundleId = $fbToolboxObj->getTemplateBundleId($one_line_story_templates);

  31:

  32: $fbToolboxObj->publishNewsFeed('FB USER ID',$templateBundleId);

  33:

  34: // Add your application to your profile

  35: $fbToolboxObj->addToProfile('FB USER ID',"Wider FbMl","narrow fbml");

  36: ?>

  37:

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

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

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

  41:

So devs this is all about my php class. In my next post I will show you how to develop a facebook application with new platform in details using this class. Enjoy!!!!

Customizing jQuery innerfade plug-in - Adding controls, navigation and caption

First of all thanks goes to Medienfreunde Hofmann & Baldes GbR for their nice jQuery innerfade plug-in. It’s very popular and easy to use plug-in for adding slider in a web application.I’ve been a fan of this nice plug-in. Recently, for an application I had to add some more feature with this plugin. Here, I just want to share my modifications with you.

New features I have added

• • Add Slider controler where you can do play/stop,next/prev,first/last.
  • Add a navigation from where you can navigate to any slide.
  • Add a Slide caption where you can set caption for a slide.

Here is a live demo here.

Download

Download it from here (). The zip file contains modified innerfade plugin along with an example.

How to use

Nothing new. Use this plugin just as the original innerfade plugin. For additional features, set your options from "config.js". You can modify the "slide.css" as your application UI needs. Thats all.

Plug-in Options

• slide_timer_on :  "yes" or "no". If "yes", then  slide will automatically play.
• slide_ui_parent : The ID of <ul> which contains the slide <li>s of slide. ( "portfolio" in attached example slider).
• slide_ui_text : The id of descrition/caption element. “portfolio-desc” in example. In case, you don’t want to use a caption, leave it "null"
• pause_button_id : The id of pause_button. “pause_button” in example. In case, you don’t want to use a controler, leave it "null"
• slide_nav_id: The id of slide navigation. “slide_nav” in example. In case, you don’t want to use a navigation, leave it "null"

I have described here only new feature related options. All other  jquery innerfade settings will remain as is. Thats all. If you want to know anything more, just drop me a line. I will try my best to answer. enjoy!!!!

Some Common Errors and Solutions of ASP.NET

Basically I am working with PHP.But I have also great interest about asp.net(C#). So recently I am working on a website using Microsoft visual studio 2005 professional Edition and Microsoft SQL server 2000. Here I have to face some common errors. I am goggling about these errors and I have found that maximum developers face same problem. So I think it will very helpful for many developers if I share those errors using my blog. And also you can share your own experience which is also very helpful for us. So let’s see how it happens.

Error Message 1#

The type or namespace name 'type/namespace' could not be found (are you missing a using directive or an assembly reference?)

Error Description:

I’m including a c# file named Group to access the common functionality.

The C# file is included in App_Code directory and when I access the c# file using the code below it shows the error:

From a post I have found that this is just a namespace problem or a missing reference problem. So I put all the code inside a common namespace named ‘DocumentManage’ and now I am using this namespace with the help of using directive. But unfortunately it’s now showing that namespace named ‘DocumentManage’ not found. Also without any namespace if I run using inbuilt Asp.Net development server it is running. Only in IIS if I run using http://localhost/ it is showing the error.

Solution: There are some solutions which I have found from some of the post. I have also given my solution here.

#1 you must specify the namespace name if you put your c# code within a common namespace.

2# Visual Studio always puts classes in namespaces; please this is just a namespace problem or a missing reference problem. Just take a look at the error description on MSDN, it can be found here.

3# if you sure that you have put all your class file within a common namespace and you use this namespace with the help of using directive and you have no problem with reference also. Then be sure that you add your asp.net web site as an application into IIS. This was my problem. I was not adding my website as an application at IIS.So it shown this error. When add my web site as an application then all the error solve. I have shown here how to add your asp.net web application as an application.

Go to IIS Manager and convert your website as an application. That’s ok.

Error Message 2#:

The resource you are looking for does not have a handler associated with it

Error Description:

When I try to browse me website under local host I got this error message. As an example if I browse http://localhost:81/pdfdocument and I get this. But if I browse http://localhost:81/pdfdocument/default.aspx then it works!

Another interesting thing it does not find any JavaScript and CSS file also. It can only browse aspx extension file. I have given a screen shot here.

Solution:

Go to the IIS Manager and find out the handler mapping for the website and check StaticFile Handler and ensure that Static File Handler module has

Path *.*

Enabled

StaticFileModule, DefaultDocumentModule, DirectoryListingModule - Have these modules listed.

At screenshot you can see where you have to change.

You find the solution from http://forums.iis.net/p/1152947/1884387.aspx

There are two errors I have given here. I have another some errors which I will share with another post. so if you have errors and solutions please share with us. It is really helpful for us. Thanks all.

Hello world!

Hello Everybody!

I am coming back into your world. I have been blogging for five to seven months with wordpress, but I have been thinking for a domain to share, test and explore my works and experience on an unique web identity. In order to fulfill my desire, I have chosen this site and this domain: stylephp.com! I am really grateful to  Emran vai, Anis, and above all, almighty GOD.

I have chosen my domain name stylephp. Why? Because you know that both "style" and "php" are important into our web application world. We can decorate our web application using many style sheets. And we can give life to our application using PHP. Recently PHP has become very powerful and popular due to its stability. And i love working with PHP very much.

It's been two to three years since i am working with PHP and i am proud to say that I am a PHP dev. I also use JavaScript, CSS, AJAX, and XML. Some of the PHP frameworks I've worked with are: CodeIgniter, Zend Framework and javascript library: prototype, jquery. Besides, I've been making a few social applications in Facebook and up to now, I love it !

So friends, here I will share what i know and what i want to know from you. My blog is here so that I can know from you and to share my experience with you.

Thats all for now. See you soon with new post

Raju Mazumder