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.
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
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Philo August 20th
Nice Tutorial, Facebook is not really my thing but i like the idea!
( )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!
( )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.
( )Ben Griffiths August 20th
Great introduction, thanks
( )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.
( )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!
( )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.
( )Khawar Pervez Butt March 26th
hey u r almost on every blog… thats cool… so what’s ur interest in fb application development
( )Ryan Hicks August 20th
wow.
( )Nice.
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.
( )Tommy M August 20th
An original idea for a tutorial. Go Nettuts!!!
( )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
( )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.
( )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.
( )Bryan Grajales August 20th
Nice, it’s hard to find a tutorial for a facebook application!
( )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!
( )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.
( )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?
( )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!
( )Joe Casabona August 20th
**@Thomas- an approval problem with launching a Facebook app. Not quite sure what happened to me there.
( )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.
( )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.
( )Rohan July 31st
Yes please!!
( )mariano August 20th
you did not explain what filename it should be ….index.php ??? all the code for the same file?
( )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!
( )skn August 20th
good one
( )Christian August 20th
Awesome. I have been thinking about building a facebook app for a while, but didnt really know where to start.
( )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.
Dan August 20th
Thanks. Really great intro and its great to have the diversity on this site.
( )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!
( )Phillip August 20th
Finally! A great tut on facebook apps!
( )Appreciate it.
Eric Thayne August 21st
Wow, never would have thought it could be this simple…
( )hossein August 21st
خیلی مطلب جالبی بود …
( )oooh this is very good !
koen buysse August 21st
Looks (and probably is) simple…but facebook isn’t my platform of choice…
( )cool idea tough !
Ariful Alam Khan August 21st
Nice!!
( )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
( )Harry August 24th
Interesting lil tut
( )Joakim August 25th
Who can help me install this PHP on my ISP?
( )Regards,
joakim at eteqdotcom
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.
( )web development & programming August 29th
Hi, that ,s great look like PHP
hehehe
( )Zach August 31st
Awesome tutorial! Thank you for this, I’ve been looking for something this simple and straightforward, i appreciate it greatly!
( )Jarek September 7th
Yeeee sure
( )ken October 1st
Can this be done with images rather then quotes? any coding advice?
( )Matt October 1st
Is it possible to get the ip address of a user. I need it for my app.
( )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
( )idrish October 20th
very nice tutorial here…i am trying to build one app..
( )kareem November 24th
this is wonderful tutorial i will put acopy of this lesson on
( )my site here
http://www.as7ap4you.com
Adam December 5th
Thanks for the tutorial!
I’m running into a weird error though. Do you have any idea why I am getting the following error?
Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in …/includes/facebook.php on line 38
( )Waseem August 3rd
your sever run with PHP4 version , you must upgrade to PHP5 or use PHP4 Facebook class .
( )Hussein Bazlam January 15th
This a good good graet for hem.
( )Hussein Itawi January 15th
Thanks for the tutorial.
And Iwant to make aAface book How Iwant to make??
( )Harmin January 17th
Can I change my background profile llike in FS??
( )Benoit January 22nd
I come here everyday but never post comments…
You know what could be awesome? Merging the present tut with “create an OOP blog with php”. There we would have an enhanced starting point
( )chris February 13th
Contact me id like to talk to you about you developing a basic fb app for me
( )deejorg February 18th
I don’t understand where i put the profile box code. I can add the profile box but can’t show content. Any help?
( )alex March 26th
or you can do this
You may think that building a facebook app is very hard, well its kinda easy with this new appliation we added
your going to need to add two applications for this two work
first add Facebook Developers
http://www.facebook.com/developers/
Next add The Stealthrouter App Builder
http://apps.facebook.com/stealthrouter/
Go to stealthrouter app builder and then click *Use an app wizard*
Next select a wizard
name it, and add a description
Now its going to ask for a couple things like
API Code
Facebook Secret
Canvas URL
Go to facebook developers and click set up new application
Name it the one you named already
and copy the API ID
and paste it in The API Slot in the stealthrouter app builder
Next Copy the Facebook Secret and paste that into the facebook secret slot in the stealthrouter app builder
Now to the canvas url
go to facebook developers and click canvas and make it what ever you want
like for us we made it apps.facebook.com/stealthrouter
now copy the end part of your canvas url
and paste it into the stealthrouter app builder under canvas url, so we would paste stealthrouter
next it will give you a canvas call back url
copy it form the stealthrouter app builder and paste it into the facebook developers
to do this
go to canvas and paste it in canvas call back url
now visit your application and it should work
example
http://apps.facebook.com/stealthrouter/
( )jova March 28th
great!
put how i can setup profile box content url?
have i write it in separate file or in index file?
I’m really confused ..
Thank you in advance,
( )jova
MIKE May 1st
i am goonna write one to check it myself:)
( )CgBaran Tuts May 5th
Awesome tutorial gotta try a variation soon
( )Albert Pak May 21st
Nice tutorial, been thinking about writing a Facebook app for awhile now
Great start with this one. Would be nice if there would be more Facebook app tutorials.
( )Z May 23rd
can i do it like this ?
//initialize an array of quotes
( )$quotes= array(” OWN TEXT”); ??????
Z May 23rd
can i do it like this ?
/ / i n i t i a l i z e a n a r r a y o f q u o t e s
( )$ q u o t e s = a r r a y ( “ O W N T E X T ” ) ; ? ? ? ? ? ?
Z May 23rd
sorry I’d mistake for that two.
can i do it like this ?
Posting image on every Text is that possible??
/ / i n i t i a l i z e a n a r r a y o f q u o t e s
( )$q u o t e s = a r r a y ( ” i m g s r c = ” I M G U R L ” h e i g h t = 1 2 2 w i d t h = 1 6 0 a l i g n = l e f t b o r d e r = 0 O W N T E X T ” ) ; ? ? ? ? ? ? ( “”) these are included but not posted cause message don’t work with that close and open codes
Sterling Daniels July 3rd
Buy where does the code go and how do you run it? I’m a programming newbie – is it so obvious that I don’t see it? When you type the initial php code that shows where the api key and secret code, where is it stored? How do you get facebook to run it? Excuse the dumb question but no one talks about this part.
( )Chris August 13th
I second this. I have no idea
( )1.)what file to put this code in
2.) what to save this file as (or if the file name even matters)
for instance, does it need to be named “index.php”….?
3.) Where to put this file on my server
Omair Rais July 12th
Thank you very much….
( )SaBinh July 17th
that gave me an idea, thanks
( )ariful July 24th
very nice and simple to understand
( )Subodh August 30th
Great Stuff !
( )Mahesh Bisen September 21st
Great great … awesome
( )cactusPhone October 7th
Great tutorial.
Has anyone encountered profile box content when installed on Pages not updating? When I go to apps.facebook.com/myApp/profilebox I see the proper fresh content, but when I install to my page, the profilebox content shows old, not updated content.
( )Simpleabs October 11th
Great little tutorial! I am currently developing my first facebook app for simpleabs.com
Cheers,
( )Simpleabs
Anonymous November 4th
Warning: require_once(../includes/facebook.php) [function.require-once]: failed to open stream: No such file or directory in C:\X\xampplite\htdocs\index.php on line 4
Fatal error: require_once() [function.require]: Failed opening required ‘../includes/facebook.php’ (include_path=’.;C:\X\xampplite\php\PEAR’) in C:\X\xampplite\htdocs\index.php on line 4
I must be the only one who didn’t get it working. New to PhP, i installed the facebook.php in a different directory and can’t get it working. I’m using XAMPP to develop (learn at least), need the tutorial before this on how to set up properly and the path names.
( )