Make Your First Facebook Application in 10 Minutes
| Posted by watashii | Filed under Programming, Web
This tutorial will show you how to create your very own facebook application by displaying some random text on a users profile.
This is suited for those beginning with their first application on facebook.
Prerequisites
- A facebook account
- A webserver to host the application contents, with PHP 5 support
- The PHP 5 client library or my sample application files to be installed on the webserver, as starting point.
Setting Up The Application
The first step is to register and setup your application details on facebook to obtain the API/secret keys. Enable the facebook developer application, and click on “setup new application”. Give it an application name, tick to acccept the terms of service, expand the “optional fields”, and fill in the “callback url” with the destination of your webserver’s php files of the application.
Obtain the API Key
Press ok, and the next screen will provide you with an API key and secret key to use on your application. Thats all the things you need to do on facebook!
Writing the Application
Load the facebook php client library files into the callback url location that we’ve provided, under the include directory. Then we will create a new index.php file, which will display our application contents. The first part of the code is easy, just fill in the API and secret key obtained above to create a facebook object. The user_id provides us with the current logged in user, which will be used to set the app’s profile box text later on.
<?php require_once 'includes/facebook.php'; $appapikey = '<your_api_key_here>'; $appsecret = '<your_secret_key_here>'; $facebook = new Facebook($appapikey, $appsecret); $user_id = $facebook->require_login(); $callbackurl = 'http://www.watashii.com/watashii/'; ?>
The next part of the code simply prints out some HTML (FBML, actually) which will be displayed in the facebook canvas page. No specific facebook API calls were used, so this is pretty straightforward. Note that CSS must be embeded within the HTML text.
//initialize an array of quotes
$quotes= array("Hellooooo World!!",
"A banana a day, keeps the monkeys underpay",
"This is my first facebook app, what a waste of time!!"
);
//select a random quote
$i= rand(0, sizeof($quotes)-1);
//prints on the canvas page
print ('
<style type="text/css">
h1{ margin: 10px; font-size: 24pt; }
h2{ margin: 15px; font-size: 20pt; }
</style>
');
print "<h1>Watashii Says:</h1>";
print "<h2>". $quotes[$i] ."</h2>";
The other part of the code will populate the application profile box using profile_setFBML. We generate the same text (FBML) on the profile box, using the user_id value of the profile viewer.
//prints on 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>');
//facebook api call to set the profile box (Updated on 2008-11-02, see end of post)
$facebook->api_client->profile_setFBML($text, $user_id, $text, $text, $text, $text);
Results
The Canvas page
The profile box
And there we have, our very first facebook application. Of course this is just a very very basic application, and there are plenty of stuff we can do. Check out the facebook platform documentation and other resources for your quest to creating your next cool app!
[Updated 2008-11-02] :
The new facebook layout was able to show my FBML box on the “box tab”, but gave me the following error on the “profile tab”:
No content to display. This box will not be visible to people who view your profile until this application adds content to it.
Then i realised i had to pass 6 arguments in Profile.setFBML (before i only passed the first 2, that was probably set from the old facebook layout). The wiki page example listed 5 arguments and didnt work for me, so watch out!
Share:
Related Posts:
One Response to “Make Your First Facebook Application in 10 Minutes”
-
kannan Says:
December 8th, 2008 at 10:25 amHi,
It is useful for me both for facebook login and getting user info. Could you please help me for facebook logout from my site. i tried with logoutAndRedirect() and logout() but it is fail.
Thanks in Advance,
Kannan
