Best Examples of How to Build a Facebook Application

How to Build a Facebook Application

Facebook, as you’ve probably noticed, is everywhere. And with that ubiquity comes a massive audience just waiting for your web app. Whether you’re looking to make things easier for your current users, or you have the perfect idea for a Facebook-only application, there are a few things you’ll need to know to get started. So you want to build a Facebook application and reach literally millions of users. Well luckily, writing an application using the API isn’t too hard to learn. So Lets have the Best Examples of How to Build a Facebook Application.

Getting Started

In order to install Facebook applications, or indeed to write your own, you need a Facebook account. You’ll also want to install the Developer application—this lets you create your own Facebook applications, as well as monitor their usage and configure various settings. You’ll also need your own web server; Facebook apps run direct from your own server—which means that you can write them in whatever language or framework you prefer. We’ll be using PHP in our examples, but the principles are the same for any language.

The Facebook Platform

Facebook have done a pretty good job of documenting the fundamental components of their platform over on their developer site. The platform consists of three core parts:

API – The API defines the various methods through which you can interact with Facebook. If you’re not familiar with the idea of an API, take a look at some recent Digital Web articles: APIs and Mashups for the Rest of Us and Hacking on Open APIs.

FBML – Facebook Markup Language is a custom markup language based on various bits of HTML. It’s similar to Coldfusion or ASP.NET’s tag-based syntax, and is used to define the pages in your application.

FQL – Facebook Query Language is SQL for Facebook. A powerful query language for situations where there are no existing helper methods in the API, or handy tags in FBML, to do exactly what you need.

FBML is basically the HTML you know and love, so we’ll include a heading and a stylesheet. The link element isn’t permitted and the @import rule isn’t supported either, so the simplest solution is to use a server-side include.

We’ll be stepping through the development of a simple application which will demonstrate usage of FBML and the API.

As well as the core documentation, Facebook also makes available a set of useful tools and resources for developers. The tools are particularly useful for debugging raw API calls or tweaking FQL. The resources section contains official libraries for PHP and Java, with links to unofficial libraries for ActionScript, Cocoa, Coldfusion, .NET, Perl, Python and Ruby, and there is also a growing community wiki.

A typical page on Facebook is quite complicated, with lots of different elements on the page. Via FBML and the API you can influence most of these so it’s worth getting familiar with the terminology used before you get started. If you know your Profile from your News Feed then you’re good to go!

How to write a FaceBook Application in 10 minutes

Writing F8 apps is where it’s at right now. Everybody knows it. The userbase is huge and now we have a (free) API to. Everything is good….but the documentation.

I spent a day writing my Sudoku Facebook application yesterday. I already had the sudoku javascript widget ready to go – the time was spent wading through pages of documentation and downloading toolkits that (as it turns out) I didn’t need.

As far as I can tell, Facebook allows you to create applications that appear to the user in 2 different areas.

The profile. This the ‘main user page’ as far as Facebook is concerned. Here is where your main summary details are displayed and your comments wall. It would be great to have your widget displayed here, but the big limitation is that applications that use javascript are not allowed here (You must use FMBL, the facebook version of HTML). Too bad for me. What we can do is display a small ad to take the user to the Canvas page.

The Canvas page. This is an entire page that your application gets to use (you can have multiple pages if you want). On these pages you can choose to display content from another website through an iframe, so that is what we’re going to do.

Ok, thats it for the overview. Start your clocks and lets get cracking.

Create Your Demo Page.

This is the page that the user will see on their canvas page. If you already have a page that you want to use, great. If not, then just copy this code for a guessing game.

[sourcecode language=’php’]

Enter your guess between 1 and 10:


Developing a Facebook Application for absolute beginners

With more than 300 million active users and 50% of them using it every day (source), Facebook can be an interesting way to make some viral marketing. One of the most effective ways is developing an application users (and users friends – and friends of users friends – and…) will use every day.

This tutorial will guide you through the creation of a simple application that will display how many male and female friends do you have.

[sourcecode language='php']

$friends = $facebook->api_client->friends_get();

echo "

Hello , you have ".count($friends)." friends";

foreach($friends as $friend){

$infos = substr($infos,0,strlen($infos)-1);


$gender_array = array();

foreach($gender as $gendervalue){

$male = round($gender_array[male]*100/($gender_array[male]+$gender_array[female]),2);
$female = 100-$male;

echo "

  • Males: $male%
  • Females: $female%




How to Build a Facebook Application

Build Your First Facebook App

So you want to build a Facebook application and reach literally millions of users. Well luckily, writing an application using the API isn’t too hard to learn (for the basics, anyway). In this tutorial we will write a Facebook app that generates a random quote to display on the user’s profile.

Getting Started

It’s worth noting that the Facebook API is available to a number of languages, all listed on the Facebook Developers Wiki. I will be using PHP 5 for this tut. You will also need to download the PHP 5 Client Library, which I’ve included in the SRC files. All code featured here will be in the index.php file.

Step 1: Initialize Your App

The first step to get a Facebook API key, which allows your app to retrieve information from Facebook. Go to the Facebook Developer Application and click the “Set Up a New Application” button. Pick a name, agree to the Terms & Conditions, and you’ve got your API. Now you need to set up your canvas page name and callback URL.

How to Build a Facebook Application

Your canvas page is the application area within Facebook; the name is added to the URL and will look like this:[YOUR APP NAME]. The callback URL points to the server hosting the app files. To set these up, from the “My Applications” page click “Edit Settings” on the right hand side. You will see the fields to fill in both, as I did in the screen shot below. While there are lots of other options, none are necessary for this tutorial. Click ‘Save’ and you’re now ready to build your first Facebook app. Facebook even provides you with some start up code. I’ve cut out the extra stuff and gave you only what you need to initialize your app…

How to Build a Facebook Application

[sourcecode language='php']
# require_login();
# $callbackurl = '';
# ?>

This is fairly straight-forward code. We create a Facebook object using our API key and app secret, which was given to us when we created the API key. The first thing we do after that is get the user id of the logged in user. This will be valuable to us if we were do things get the user’s name, the user’s friends, etc. I’ve also added the $callbackurl to make it easier to link to images or other files, as Facebook does not allow relative linking.

Step 2: Writing the Application

If we don’t make specific Facebook calls, this is just like writing a php application. Below is our code.

[sourcecode language='php']
1. //initialize an array of quotes
2. $quotes= array("Only those who dare to fail greatly can ever achieve greatly.", "Take my wife. Please!", "I believe what doesn't kill you only makes you... STRANGER");
4. //Select a Random one.
5. $i= rand(0, sizeof($quotes)-1);
7. //print the CSS
8. print ('

13. ');
15. print "

Nettuts Quotes

16. print "

". $quotes[$i] ."


This is all you need to do to print to the canvas page. One thing to note is the way we create CSS. We cannot call a file like style.css- we actually have to include the CSS in the HTML. This is so our CSS doesn’t interfere with Facebook’s. You should also know that when styling divs, you can only uses class, not id. The code we created will produce something like this:

How to Build a Facebook Application

Step 3: Creating the Profile Box

Finally, some Facebook specific stuff. The code below is necessary to add our quote to the user’s profile, granted they are displaying our app in their profile. In our app, I’ve added the follow code right below $i= rand(0, sizeof($quotes)-1);

[sourcecode language='php']
1. //prepare string for profile box
2. $text= ('

8. ');
10. $text.=('

'. $quotes[$i] .'

12. //set profile text
13. $facebook->api_client->profile_setFBML($text, $user_id);

How to Build a Facebook Application

Written by lava360

Blogger who is Passionate about blogging to share world of design and freebies to viewers, designers, photographgers, graphic and web designers.



Amazingly Created Landscape and Architectural Paintings

Roundup of Most Popular 3D typography tutorials of 2010