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.

Requirements

To develop a Facebook application with this tutorial, you will need:

* An active Facebook account
* An hosting plan supporting php
* Being my fan

ehm, actually being my fan is not strictly required, but it’s strongly recommended :)

Getting started

Go to developers area and click on Set Up New Application

Give a name to your application and agree terms.

Then, Facebook will create an API key and a secret key. Write them down (well, it’s not necessary since you will always find them in this page, but having something to write down makes me feel like I’m dealing with something important).

At this time the application is ready to run, but you can add more information and icons.

When done, go to Canvas page

Here, you will b asked for a Canvas Page URL that is the unique url of your application. Being obviously unique, all best names have been already taken (just like .com domains). In Canvas Callback URL, you have to enter the URL of the page on your server that will host the application. Then set Render Method to FBML

FBML mode lets you quickly start building an application from scratch, which is good for a absolute beginners. We’ll see it more in depth during next tutorials

At this time your application is ready to be executed.

Download the client library and copy the content of facebook-platform -> php to the Facebook application directory in your server – the same path of Canvas Callback URL.

Your directory now should look like this:

Now, t’s time to create the application itself:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
 
require_once 'facebook.php';
 
$appapikey = 'xxxx';
$appsecret = 'xxxx';
 
$facebook = new Facebook($appapikey, $appsecret);
 
$user_id = $facebook->require_login();
 
$friends = $facebook->api_client->friends_get();
 
echo "<p>Hello <fb:name uid=\"$user_id\" useyou=\"false\" linked=\"false\" firstnameonly=\"true\"></fb:name>, you have ".count($friends)." friends";
 
foreach($friends as $friend){
     $infos.=$friend.",";
}
 
$infos = substr($infos,0,strlen($infos)-1);
 
$gender=$facebook->api_client->users_getInfo($infos,'sex');
 
$gender_array = array(); 
 
foreach($gender as $gendervalue){
     $gender_array[$gendervalue[sex]]++;
}
 
$male = round($gender_array[male]*100/($gender_array[male]+$gender_array[female]),2);
$female = 100-$male;
 
echo "<ul><li>Males: $male%</li><li>Females: $female%</li></ul>";
 
?>

Line 3: including Facebook library

Lines 5-6: Declaring variables with API key and secret code… yes, the two codes seen before

Line 8: Initializing a Facebook API

Line 10: Requiring the user to be logged into Facebook before using the application. If they are not logged in they will first be directed to a Facebook login page and then back to the application’s page. Then save the user unique id into $user_id variable

Line 12: Storing in the $friends array the unique id of all friends of yours

Line 14: This is the first FBML tag we see: Fb:name renders the name of the user specified by uid attribute. In this case, it will display your name. More information about Fb:name at this page. You can see all available tags at this page

Lines 16-20: Creating a string with all of your friends ids separated by comma, such as uid1,uid2,uid3,...,uidn

Line 22: users_getInfo returns a wide array of user-specific information for each user id passed. As you can see, I pass the whole list of friends and I only want to know their sex. More information about users_getInfo at this page

Line 24: Creating an array where I will store all genders

Line 26-31: Determining the % of each gender (male or female) in my friends list. You can see some additional math because sex value can be blank

Line 33: Displaying the results

Now that your application is completed, you can submit it to the Application directory. Before you are able to do it, your application must have at least 5 total users or 10 monthly active user.

Take a look at the “finished” application.

It should output something like that

Hello Kirenia, you have 49 friends
Males: 53.66%
Females: 46.34%

Warning: During the latest day there is a known bug called facebook auth_token loop that won’t allow you to run the application. If you experience problems, simply check back later.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (40 votes, average: 4.78 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.

43 Responses

  1. Iggy Zuk says:

    woah emanuele, this one might be a start of a whole new hobby for me, thanks for a great simple tutorial c;

  2. Flo says:

    Hi,

    The insideRIA blog provides also very nice tutorial in this very interesting facebook topic:

    http://blogs.oreilly.com/cgi-bin/mt/mt-search.cgi?IncludeBlogs=34&tag=Facebook%20API&limit=20&IncludeBlogs=34

    Thanks a lot for your tutorial!

    Flo

  3. [...] It’s time to add some features to the application we created in step 1. [...]

  4. Shanison says:

    hey thanks for this tutorial

  5. [...] step 1 we created a simple Facebook application, and in step 2 we made our application able to write on [...]

  6. Alex Duvot says:

    how do you do this on wordpress

  7. mie.. says:

    “Now that your application is completed, you can submit it to the Application directory. Before you are able to do it, your application must have at least 5 total users or 10 monthly active user.”

    can you tell me solve this?i have problem about this..
    1)how i want to invite other user?
    2)until then..how i can view my app since it cannot submit to app directory yet..

    sorry for this dumb question and thank you for the tutorial..

  8. jack says:

    Mie, yes, I was confused by this as well. As to question 2, to view your app, go to the canvas page url. In the above example, this would be:
    http://apps.facebook.com/genderz_demo

  9. Kelsey says:

    This talks about posting a facebook app, but it doesn’t really go into actually ‘creating’ it.

  10. [...] suggest you to read the Developing a Facebook Application for absolute beginners posts from 1 to 5 if you don’t know how to create a basic Facebook [...]

  11. Stevor says:

    I’m not familiar with php. Is it only me that gets:

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /usr/local/pem/vhosts/147748/webspace/httpdocs/mosh/facebook.php on line 38

  12. Stevor says:

    Hmm. Trying to get the client library for php 4

  13. german says:

    but how do i do to publish this in the wall of the user how get this application?

  14. [...] I suggest you to read “Developing a Facebook Application for absolute beginners” posts 1, 2, 3, 4 and [...]

  15. tibbi says:

    I also get this error:
    Parse error: parse error, expecting `T_OLD_FUNCTION’ or `T_FUNCTION’ or `T_VAR’ or `’}” in /3w/borec.cz/t/tibbi/facebook/facebook.php on line 38

    also this one :P
    Fatal error: Cannot instantiate non-existent class: facebook in /3w/borec.cz/t/tibbi/facebook/index.php on line 13

    Im not familiar with these things yet, what can I do? thx

  16. tibbi says:

    nevermind, my host had php on 3.3 :D, works fine now

  17. Joe says:

    So this app half works for me. I get this when i go to the app on facebook.

    Hello Joey, you have 193 friends Notice:

    Undefined variable: infos in /www/zxq.net/j/o/e/joe-morrone/htdocs/gender_app.php on line 17 Warning: stream_context_create() has been disabled for security reasons in /www/zxq.net/j/o/e/joe-morrone/htdocs/facebookapi_php5_restlib.php on line 3390 Warning: fopen() expects parameter 4 to be resource, null given in /www/zxq.net/j/o/e/joe-morrone/htdocs/facebookapi_php5_restlib.php on line 3391 Warning: Invalid argument supplied for foreach() in /www/zxq.net/j/o/e/joe-morrone/htdocs/gender_app.php on line 26 Notice: Use of undefined constant male – assumed ‘male’ in /www/zxq.net/j/o/e/joe-morrone/htdocs/gender_app.php on line 30 Notice: Undefined index: male in /www/zxq.net/j/o/e/joe-morrone/htdocs/gender_app.php on line 30 Notice: Use of undefined constant male – assumed ‘male’ in /www/zxq.net/j/o/e/joe-morrone/htdocs/gender_app.php on line 30 Notice: Undefined index: male in /www/zxq.net/j/o/e/joe-morrone/htdocs/gender_app.php on line 30 Notice: Use of undefined constant female – assumed ‘female’ in /www/zxq.net/j/o/e/joe-morrone/htdocs/gender_app.php on line 30 Notice: Undefined index: female in /www/zxq.net/j/o/e/joe-morrone/htdocs/gender_app.php on line 30 Warning: Division by zero in /www/zxq.net/j/o/e/joe-morrone/htdocs/gender_app.php on line 30

    * Males: 0%
    * Females: 100%

    It correctly counts my total friends and knows my name, but I dont know what all that excess error data is and the percantages for males and femals is of course wrong. Been messing with this for hours now :(

  18. [...] If you do not know how to get start with Flash Facebook application, I suggest you to read a 5 part articles by Emanuele first. You can find the first part of the series >> HERE << [...]

  19. Birger says:

    I guess you do need to hide the application secret by using PHP or javascript, but can you do what you do above using just Actionscript?

    It seems I do not need to embed my flash with a facebook tag.
    Why not? What if I do? whats the benefit if any?

    Please give us som clarification… cross the nation.

  20. [...] Developing a Facebook App for Absolute Beginners – Emmanuele Feronato [...]

  21. i am still confuse,how to coonect with server???

  22. bigmander says:

    did you edited that code on index.php?
    another question about these great post, did you configure anything to make this works because i follow the same steps and i cant see anything like yours!

  23. Jason Bass says:

    I having the same issue as Stevor and tibbi…

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /home/content/j/b/a/jbass/html/nettravexpress/facebook-platform/php/facebook.php on line 38

    BTW, my host is GoDaddy, and is running PHP Version: PHP 4.x

    Any suggestions?

  24. vks says:

    Hi emanuele, Thanks for ur tutorials , it give a greate startup for me to facebook app.am sure it helps all begineers like me.Thanks a lot.

  25. Nik Ahmad says:

    Hi Emanuele, how much does it cost to set up a new facebook apps for me? .. the apps will be able to add a tab on everybody’s profile page, have flash in it, the flash contains forms, and the flash will dynamically get variables (like profile picture, profile id) to be included as one of the forms values (sent to my email)

    please email me your quotation.

    a demo of a finished product would be good.

  26. Rubal says:

    Hi This is a great tutorial, It will help me out to push a program on FaceBook.
    Thanks alot :)

    http://technoguide.com

  27. [...] Developing a Facebook Application for Absolute Beginners Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato. [...]

  28. [...] Developing a Facebook Application for Absolute Beginners Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato. [...]

  29. [...] Developing a Facebook Application for Absolute Beginners Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato. [...]

  30. [...] Developing a Facebook Application for Absolute Beginners Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato. [...]

  31. [...] Developing a Facebook Application for Absolute Beginners Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato. [...]

  32. [...] And here’s a very helpful tutorial on creating Facebook canvas applications for beginners. [...]

  33. [...] Developing a Facebook Application for Absolute Beginners Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato. [...]

  34. [...] Developing a Facebook Application for Absolute Beginners Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato. [...]

  35. [...] Developing a Facebook Application for Absolute Beginners Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato. [...]

  36. yandos says:

    Thanks for the tut. it was not only good, but it also made me smile :D

  37. Warren says:

    I am trying to download the .php library you discuss above
    [ At this time your application is ready to be executed.
    Download the client library and copy the content of facebook-platform -> php to the Facebook application directory in your server – the same path of Canvas Callback URL.]

    but the link is broken.

    Where are the files you refer to now kept or is this process no longer possible?

  38. [...] Creating a Facebook Application -  a beginner’s guide by blogger Emanuele Feronato. If you’re html-savvy and ready to add even more interactivity than your Static FBML page offers, this is  a great place to start. [...]

  39. mmmmhhh. I just discovered this blog and I cannot get enough of it! This is a great post for me, because now I am in charge of a facebook fan page of a company and we are barely starting! I read the applications in facebook, and I found them too complicated… This is easy to understand! Thanks!!! (I already became your facebook fan)

  40. Sir Bertly says:

    OMG!!! I am like half way, and I am laughing so hard already!!! you are a great writer!! Thanks for the tut…..now lemme try finish it. Got my pen and paper out so that I can feel important too!! Haha!!

Leave a Reply