Build Your First Facebook App

Build Your First Facebook App

Aug 20th in Tools & Tips by Joe Casabona

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.

Author: Joe Casabona

I am a freelance web developer and student pursuing my Masters in Software Engineering. My specialties include WordPress Customization and Facebook development, among other things. When I am not developing the web, I enjoy playing Texas Hold'Em Poker.

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.

Your canvas page is the application area within Facebook; the name is added to the URL and will look like this: http://apps.new.facebook.com/[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...

<?php

require_once 'includes/facebook.php';

$appapikey = '85e4cd7042467d0b20109aafb6f20117';
$appsecret = 'be5a528d73ad191b6b21a84c4af054ee';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
$callbackurl = 'http://www.casabona.org/nettuts/';

?>

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.

//initialize an array of quotes
$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");

//Select a Random one.
$i= rand(0, sizeof($quotes)-1);

//print the CSS
print ('
<style type="text/css">
 h1{ margin: 10px; font-size: 24pt; }
 h2{ margin: 15px; font-size: 20pt; }
</style>
');

print "<h1>Nettuts Quotes</h1>";
print "<h2>". $quotes[$i] ."</h2>";

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:

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);

//prepare string for profile box
$text= ('
<style type="text/css">
 h1{ margin: 10px; font-size: 24pt; }
 h2{ margin: 15px; font-size: 20pt; }

</style>
');

$text.=('<h2>'. $quotes[$i] .'</h2>');


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

Notice I've done two things here: reprinted the CSS and put everything in a string called $text. This is because the function that sets the profile box text, profile_setFBML, takes two arguments: the text that should go in the profile box, and the id of the user. Any CSS defined for the canvas page is not transferred to the profile, so we must also add that to our first argument. The end result is this:

That's It!

We've obviously only scratched the surface as far as Facebook application development goes. However, with the Wiki and resources Facebook gives you when you get an API key, you should be well on your way to creating the next big app! If you want to check out this app in all its glory, you can go here, just so long as you have a Facebook account.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

User Comments

( ADD YOURS )

  1. Philo August 20th

    Nice Tutorial, Facebook is not really my thing but i like the idea!


  2. Connor August 20th

    Nice job Joe. I would have never guessed it was this simple to create an app and use facebook’s API. Thanks!


  3. Javier Rios August 20th

    I am very glad you wrote something about this. I am not a developer but want to create an app for fun. It would be for my college track team. I would love to see more tutorials on creating a Face Book application. I will have to add that to the other post about what we would like to see more of. This is one subject i am very interested in.


  4. Ben Griffiths August 20th

    Great introduction, thanks :)


  5. Lachy Groom August 20th

    Nice article, good to see some more diversity. I would like one that could go further into this. Maybe more like, a rss app for the whole series of sites.


  6. Stephen August 20th

    Great tutorial! This is one of the best–and definitely the easiest to understand–tutorials for Facebook that I’ve seen. Better than Facebook’s own documentation!


  7. insic August 20th

    i believe this is the first tut with facebook. i dont like it that much but its a nice start to much more complicated tut for facebook.


  8. Ryan Hicks August 20th

    wow.
    Nice.


  9. Lamin Barrow August 20th

    Very nice. Actually i am current building my one Facebook app in ASP.net to enter in their fbFund Developer Competition.


  10. Tommy M August 20th

    An original idea for a tutorial. Go Nettuts!!!


  11. Al August 20th

    Just so you know, you can use array_rand($array) to get the id of a random element in an array in PHP. Not a big problem with your code or anything, but there’s no point reinventing the wheel :)


  12. redwall_hp August 20th

    Great tutorial. I’ve made a Facebook app before, and no it’s not too hard. It does take awhile though, and you’d do well to familiarize yourself with the developers’ documentation. When dealing with “FBML” and their subset of JavaScript, it’s real helpful to have the guide at hand in another browser tab.

    My app is http://apps.facebook.com/pie-o-gram/ by the way. Making use of the notifications and mini-feed systems, it allows you to throw pies of you choice at your friends. (I thought SuperPoke was kind of silly, so I made something a little more fun). There’s even an “Other” option that let’s you input your own pie type.


  13. Jeff August 20th

    If any of you are interested in pursuing app development for facebook, here is a tutorial that goes into a bit more depth: http://www.digital-web.com/articles/building_facebook_applications/. Enjoy.


  14. Bryan Grajales August 20th

    Nice, it’s hard to find a tutorial for a facebook application!


  15. Niall Doherty August 20th

    Very nice. The result is a pretty basic Facebook app but I can see some great possibilities here. You’ve got my wheels turning. Thanks!


  16. Matt August 20th

    Thanks for this, and Jeff, thanks for yours as well - These will help a lot. I was looking to make a Facebook app interface for my whisperbot.com site.


  17. Thomas Milburn August 20th

    A nice taster for building Facebook apps although I would of liked a more in depth look at some of the Facebook functions. It’s hardly an app if it takes no user input!

    Am I correct in saying that all apps have to be approved before they go live to prevent security and copyright issues.

    BTW Can someone sort out the database problem?


  18. Joe Casabona August 20th

    @Al- thanks! I didn’t even think to do that.
    @Thomas- I’ve never had approval with launched a Facebook app, but they do take precautions against messaging/inviting people and publishing to the minifeed. If too many people complain they can limit you or shut down the app.

    and Thanks to everyone who enjoyed the tut!


  19. Joe Casabona August 20th

    **@Thomas- an approval problem with launching a Facebook app. Not quite sure what happened to me there.


  20. Shane August 20th

    HEY! Where’s the jQuery!?

    Only kidding ;)

    A good introduction, but it would be great to see an App involving some user-input. Thanks though.


  21. Jeffrey Way August 20th

    Everyone - I wanted Joe to create an introductory tutorial to Facebook. If you all enjoyed it, I’ll have him create a more advanced tutorial for a future posting.


  22. mariano August 20th

    you did not explain what filename it should be ….index.php ??? all the code for the same file?


  23. Gareth Price August 20th

    Amazing tutorial. I actually did something like this a while ago, but couldn’t figure out how to do CSS.
    I thought Facebook uses a special type of code?

    Jeffrey, I would love more of this!


  24. skn August 20th

    good one


  25. Christian August 20th

    Awesome. I have been thinking about building a facebook app for a while, but didnt really know where to start.


  26. Jeff August 20th

    @Jeffrey
    I’d love to see a more advanced tutorial on this topic. A little while back I messed around with creating a facebook app and couldn’t figure out how to create tabs and stuff using the FBML (facebook markup language). If you do have Joe do another tutorial I’d request that it not just be a tutorial on using FBML to create a simple page, but actually show how to create forms and such that your app will then process and return results.


  27. Dan August 20th

    Thanks. Really great intro and its great to have the diversity on this site.


  28. James August 20th

    Nice introductory tutorial. I’m gonna have a proper read through later and if I have time in the near future I will definitely try this out! :)


  29. Phillip August 20th

    Finally! A great tut on facebook apps!
    Appreciate it.


  30. Eric Thayne August 21st

    Wow, never would have thought it could be this simple…


  31. hossein August 21st

    خیلی مطلب جالبی بود …
    oooh this is very good !


  32. koen buysse August 21st

    Looks (and probably is) simple…but facebook isn’t my platform of choice…
    cool idea tough !


  33. Ariful Alam Khan August 21st

    Nice!!


  34. TK August 22nd

    I’m going to give this a go this weekend hopefully. Looks pretty cool.

    Just wondering if I could somehow list the quotes in a seperate text file and reference that somehow?

    If anyone knows or could figure it out, please let me know :)


  35. Harry August 24th

    Interesting lil tut


  36. Joakim August 25th

    Who can help me install this PHP on my ISP?
    Regards,
    joakim at eteqdotcom


  37. mattems August 27th

    This is a nice tutorial. Would love to see this in a series which goes deeper and deeper into the API.

    Thanks though.


  38. web development & programming August 29th

    Hi, that ,s great look like PHP :) hehehe


  39. Zach August 31st

    Awesome tutorial! Thank you for this, I’ve been looking for something this simple and straightforward, i appreciate it greatly!


  40. Jarek September 7th

    Yeeee sure


  41. ken October 1st

    Can this be done with images rather then quotes? any coding advice?


  42. Matt October 1st

    Is it possible to get the ip address of a user. I need it for my app.


  43. ormangy October 13th

    thnx for this simple and neat tutorial … but i’ve a problem which is the dynamic profile box not working … any suggestion pls :)


  44. idrish October 20th

    very nice tutorial here…i am trying to build one app..


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name November 21st

Arrow