How to Program your own Facebook Application with PHP
Introduction
So far I have created a few hubs, and to be honest, they were not that exciting because they were introducing the fundamentals of java rather than making something cool with java. Therefore, here we are going to do something I hope you enjoy, and that’s making your very own Facebook application. This time, instead of java, we are going to be using PHP alongside the Facebook Mark Up Language (FBML).
To get started you need a Facebook account, but I am sure that most of you already have one of these. Once you have logged into Facebook, you can install the developer app by going to www.facebook.com/developers/ or alternatively you can click the link below:
PHP Client Library
The next thing we are going to do is download the PHP Client Library for the Facebook API. What this does is allow us to use Facebook’s API so we don’t have to start writing a lot of new code ourselves.
To obtain the PHP Client Library, head over to this link
Once you are at this page, head over to the Downloads button as seen below.
And then under Download Source, choose Download .zip
Finally, extract this download to a suitable location such as your desktop. The extracted folder should have a name similar to facebook-php-sdk-b14edfa. If you look inside this folder, the main thing we are concerned with is the src folder as this containts the library we need.
Create a profile for your application and an API Key and Password
The next thing we are going to do is create a profile with facebook for our application, and in doing this, we will receive a unique API key and password. So, log into facebook, and head over to the developers page. You should have already installed the required developers application as shown above.
Once here, you want to click on the +Set Up New App button.
Once you click on this button, you may need to provide Facebook with some security information to show them you are real. Just enter your phone number and they will text you a code to input.
Now, with the security check done, it is now time to set up your app. Firstly, enter the name you wish to call your app and agree to the terms and conditions. For this tutorial, you can call the app something like MyFriends.
After you enter this information in, click on the Create App button. At this point, Facebook might ask you for another security check. Just enter in the words and click on OK.
Setting up your App
When you get to this stage, you should now be inside the edit section of your app. Most of this you can fill in yourself, but there are a few things we need to do together.
Firstly, from the left navigation bar, choose Facebook Integration. Firstly, take a note of your Application ID and Application Secret as these are required in setting up your application. The first thing we need to fill out is under Canvas, and it is the Canvas Page. This will represent the url of your Facebook app. As each app can only have one unique url, you will need to think of a name to call your app. Once you have thought of something which no one else may have, enter it into the box. I choose budsFriends. Just make sure you enter no capital letters as it will be refused.
Straight underneath this is the Canvas URL. The Canvas URL is the url of your web server where you will be hosting the application content. To make things a bit easier, quickly go ahead and make a new folder on your desktop. Give this folder a name like FacebookApp. Now navigate to your client library folder, the one your previously unzipped to your desktop. Go inside of this folder and copy the src folder. Now paste this src folder into your FacebookApp folder.
So now, on your desktop you should have a folder named FacebookApp, and inside of this you should have a folder named src.
Now, back to the Facebook Integration section of your application. Presume that you are going to place your FacebookApp folder into the root directory of your server. This means your canvas URL will be something like www.example.com/FacebookApp/ I have a website located at www.mytutorialplanet.com, which means my canvas URL will be www.mytutorialplanet.com/FacebookApp/
The canvas URL is generally the most tricky part of setting things up, so I hope I explained it well enough.
The last thing we want to worry about is the Canvas Type. For this application, make sure the FBML button is selected. Once this is all done, click on the Save Changes Button. You have now set up your app ready for coding.
I have been writting this tutorial as I go, and it seems that Facebook have once again changed their API to make it more difficult to request your friends birthdays. So for now, I will show you how to list your friends and their ID's. The code for this is
<?php
error_reporting(E_ALL);
require 'src/facebook.php';
$facebook = new Facebook(array('appId' => 'YourAppID',
'secret' => 'YourSecretKey',
'cookie' => true,
));
$session = $facebook->getSession();
$me = null;
if ($session) {
try {
$uid = $facebook->getUser();
$me = $facebook->api('/me');
} catch (FacebookApiException $e) {
error_log($e);
}
}
if ($me) {
$friends = $facebook->api('/me/friends');
foreach ($friends as $key=>$value) {
echo count($value) . ' Friends';
echo '<hr />';
echo '<ul id="friends">';
foreach ($value as $fkey=>$fvalue) {
echo $fvalue['id']." = ".$fvalue['name']."\n";
}
echo '</ul>';
}
} else {
echo "You are not logged in. Please log in and try again";
}
?>Save the above in as a PHP file and save it within your FacebookApp folder. And thats it. Upload everything to your server and test out your app by going to your canvas page which you previously specified.
What we have done here is nothing spectacular, but what you can now do is use your friends list to do something else like send a message to each of your friends. If you would like a tutorial on how to do something like this, follow me and give me a comment, and this can be done.
Hope too see you soon and for more tutorials go to
Comments
One thing I like to do is completely move away from only using FBML. I tend to create a movie using something like Flash, and turn this into a application. An example is this http://apps.facebook.com/loveecard/
To do this, all I done was literally embed the movie into my PHP file. If you want to learn how to make a flash movie like this, check out my website at www.mytutorialplanet.com
cheers
Good to know. Thanks.
hi.. i already did this things... it was successful... but i cant see it... how can i see it on my page? thanx a lot in advance...
uner 16 months ago
nice, thanks for the tutorial! but i'm still wondering what apps to do :P perhaps i should try something simple like in your example