you're reading...
facebook, PHP

Build Your First Facebook Application in PHP

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/%5BYOUR 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…

  1. <?php
  2. require_once ‘includes/facebook.php’;
  3. $appapikey = ’85e4cd7042467d0b20109aafb6f20117′;
  4. $appsecret = ‘be5a528d73ad191b6b21a84c4af054ee’;
  5. $facebook = new Facebook($appapikey, $appsecret);
  6. $user_id = $facebook->require_login();
  7. $callbackurl = ‘http://www.yourdomain.com/foldername/&#8217;;
  8. ?>

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.

  1. //initialize an array of quotes
  2. $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”);
  3. //Select a Random one.
  4. $i= rand(0, sizeof($quotes)-1);
  5. //print the CSS
  6. print (‘
  7. <style type=”text/css”>
  8. h1{ margin: 10px; font-size: 24pt; }
  9. h2{ margin: 15px; font-size: 20pt; }
  10. </style>
  11. ‘);
  12. print “<h1>Sample Quotes</h1>”;
  13. 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.


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

  1. //prepare string for profile box
  2. $text= (‘
  3. <style type=”text/css”>
  4. h1{ margin: 10px; font-size: 24pt; }
  5. h2{ margin: 15px; font-size: 20pt; }
  6. </style>
  7. ‘);
  8. $text.=(‘<h2>’. $quotes[$i] .'</h2>’);
  9. //set profile text
  10. $facebook->api_client->profile_setFBML($text, $user_id);
//prepare string for profile box
$text= ('
<style type="text/css">
 h1{ margin: 10px; font-size: 24pt; }
 h2{ margin: 15px; font-size: 20pt; }


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

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!



About itzurkarthi

Founder @ http://w3lessons.info


3 thoughts on “Build Your First Facebook Application in PHP

  1. hey its really interesting article…. gonna test.. 🙂

    Posted by ramesh | December 5, 2010, 4:19 pm
  2. thanks man.. follow me on twitter pls – http://twitter.com/itzurkarthi

    Posted by itzurkarthi | December 5, 2010, 4:21 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 94 other followers

%d bloggers like this: