Developing a Facebook Application for absolute beginners

Emanuele Feronato Facebook, Php

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:

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

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.

Comments 116

  1. Pingback: Developing a Facebook Application for absolute beginners – step 2 : Emanuele Feronato

  2. Pingback: Developing a Facebook Application for absolute beginners – step 3 : Emanuele Feronato

  3. Pingback: Developing a Facebook Application for absolute beginners – step 5 : Emanuele Feronato

  4. mie..

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

  5. Pingback: Creating a Flash Facebook application with the Facebook Actionscript API : Emanuele Feronato

  6. Stevor

    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

  7. Pingback: Horror Profile Facebook application source code released : Emanuele Feronato - italian geek and PROgrammer

  8. tibbi

    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

  9. Joe

    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 :(

  10. Pingback: MoMo-Studio Development Blog » Blog Archive » Zetta Monster Plus….Facebook?

  11. Pingback: How I add facebook leaderboard to my Flixel Flash game. @ Life Is So IISD

  12. Birger

    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.

  13. Pingback: Adding an iFrame to your Facebook Application in 2010

  14. bigmander

    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!

  15. Jason Bass

    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?

  16. vks

    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.

  17. Nik Ahmad

    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.

  18. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources - Smashing Magazine

  19. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | 

  20. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | Web Design Cool

  21. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | i know idea

  22. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources « WebbyTuts | Resouces for Designers

  23. Pingback: TG Designer » Designing A Facebook Fan Page: Showcases, Tutorials, Resources

  24. Pingback: Adding RSS Feeds to Your Facebook Fan Page – Static FBML and 3rd-Party Apps | HyperArts

  25. Pingback: ArticleSave :: Uncategorized :: Designing A Facebook Fan Page: Showcases, Tutorials, Resources

  26. Pingback: Smashing Magazine: Tim’s shared items in Google Reader: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | XtremelySocial.com

  27. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources « YouTooDesign

  28. Warren

    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?

  29. Pingback: Weekend Inspiration: Facebook Resources | Fat Dude Design: FatBlog!

  30. Web design Brisbane Adriana

    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)

  31. Sir Bertly

    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!!

  32. Pingback: Smashing Magazine: Designing A Facebook Fan Page: Showcases, Tutorials, Resources « Facebook applications for developers

  33. Pingback: marciorosa.org » Developing a Facebook Application for absolute beginners - Complete listing Tools and resorces for the ultimate web developer

  34. blind beginner

    im still cant understand it. its so simple to you, not me
    would you send me via email? plz
    video tutorial seems better, perhaps
    sorry my language
    n thanks

  35. udayanga

    I got this error msg.what should I do?plz help me.

    Fatal error: Call to undefined method Facebook::require_login() in /home/petslk8/public_html/fb/index.php on line 10

  36. Matt

    It seems facebook has changed. I don’t have the ‘canvas’ section on the left hand side. Or am i missing something? Please help.

  37. Daniel

    Hi Emanuele, i have a problem.
    I make a game but I can not get the screen permissions, in your app you have this screen, how i do?

  38. Thanks

    If you click on something on the page, then press the browser back button you get the out put below and the Facebook portion has disappeared:

    Warning: Cannot modify header information – headers already sent by (output started at /home/triqui/public_html/gamemummy.com/facebook/genderz_demo/index.php:26) in /home/triqui/public_html/gamemummy.com/facebook/genderz_demo/facebook.php on line 390

    Warning: Cannot modify header information – headers already sent by (output started at /home/triqui/public_html/gamemummy.com/facebook/genderz_demo/index.php:26) in /home/triqui/public_html/gamemummy.com/facebook/genderz_demo/facebook.php on line 390

    Warning: Cannot modify header information – headers already sent by (output started at /home/triqui/public_html/gamemummy.com/facebook/genderz_demo/index.php:26) in /home/triqui/public_html/gamemummy.com/facebook/genderz_demo/facebook.php on line 390

    Warning: Cannot modify header information – headers already sent by (output started at /home/triqui/public_html/gamemummy.com/facebook/genderz_demo/index.php:26) in /home/triqui/public_html/gamemummy.com/facebook/genderz_demo/facebook.php on line 394

  39. WK

    Hi everyone,

    I am completely new to this and am excited to give it a shot. Will you please give me some recommendations on a great place to get “a hosting plan supporting php.” Is there a cost effective, reliable, easy to use, company that I should try (possibly with some sort of customer support)?

  40. Carlos Hernandez

    Hi, do you have an updated version of this tutorial since facebook changed their API during 2010 and they are deprecating FBML?
    If so, please send me the link.

  41. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources

  42. Haseebp

    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.

    Please Explain this Step!!!

  43. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | W Design Love | Graphic and web design blog

  44. facebook comments

    I have gone to the points given by you to developed the facebook application
    I want to developed the apps for my scraps Website.
    Please help if you give some other places from where i get the information.

    Thanks

  45. Pingback: Facebook – Maximize sua presença na rede social | BLOG SAMIRDESIGN

  46. Pingback: Recursos para diseñar y programar una página de fans en Facebook

  47. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | Kill your Time

  48. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | Sejix Technologies Blog

  49. Pingback: Facebook Fan Page Showcases and learning Resources - Wordpress Arena

  50. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | Tips4Designer

  51. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources - Pixel Promote

  52. Pingback: Designing a Facebook fan page: Showcases, Tutorials, Resources - Pixel Promote's Blog

  53. goldcrusaider

    Great tut thank you, It really helps. I have a question from the part you wrote about entering a canvas URL:”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”

    So if I need a ‘canvas call back URL’ can I create a blank webpage, name it a unique name, then place that blank page on my host server? will that do the job? Im confused Im a newbie at this, thanks for any help you can give me.

  54. Bob

    hey i am having this error

    Fatal error: Uncaught exception ‘FacebookRestClientException’ with message ‘parameters uid or session key required’ in /home/sfc123/public_html/facebook/includes/facebookapi_php5_restlib.php:1734 Stack trace: #0 /home/sfc123/public_html/facebook/includes/facebookapi_php5_restlib.php(401): FacebookRestClient->call_method(‘facebook.friend…’, Array) #1 /home/sfc123/public_html/facebook/world.php(9): FacebookRestClient->friends_get() #2 {main} thrown in /home/sfc123/public_html/facebook/includes/facebookapi_php5_restlib.php on line 1734

    I Don’t get a word!!wat dis error means.. PLEASE HELP..

  55. Pingback: Developing Your First Facebook Application | Video Game Design Experts

  56. Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources

  57. Aman Arora @ Tech HowTos Blog

    It looks like a good tutorial but I guess facebook has done changes to interface of developers panel and images that are in the tutorial doesn’t really match current panel. Will you be able to update the tutorial or something like that?

  58. Mamun

    hello guyz here i’m selling facebook pva (phone verified account).

    >facebook PVA with 2 demo apps (complete profile)
    >facebook PVA (complete profile)
    >facebook bulk account

    price:
    facebook PVA with 2 demo apps: $0.60 (complete profile)
    facebook PVA : $0.50 (complete profile)

    so mates feel free contact me.
    email : mamun.enter@gmail.com

  59. Pingback: CLIENT/SERVER WEB DEVELOPMENT – WEEK 17 Part 1 | enriquemizziem819

  60. kimalfonso90

    Thanks for sharing such an informative and helpful blog.
    It is very helpful for the beginners, also one can hire some professionals who can assist you with their best guidance and tips in developing the desired applications. NDOGZ is one such organization providing you with the technical assistance. Visit Online: http://www.ndogz.com/

  61. Abbas Haroon

    Thanks a lot for sharing, I am a good Php developer but haven’t dipped myhands in the world of apis yet, Your post gave me a good start, I hope you keep posting further to help beginner’s improve there skills.

Leave a Reply

Your email address will not be published. Required fields are marked *