This tutorial will explain how to create a facebook application using Graph api and PHP.For those who are new to Facebook platform you need to learn the basics of Graph api.We are about to build a facebook application you can see a demo here

facebook-platform

This tutorial will use PHP code-See PHP tutorials on our site

Introduction to Facebook platform

Facebook allows developers to build applications using facebook platform which has
FBML – Facebook Markup language
FQL – Facebook Query Language
FQJS – Facebook JavaScript
These are basically derived from standard HTML,SQL and javascript to suit the facebook environment.Other than this you need to knoe how the facebook environment is built.Each and every element in facebook is easily accessible from “Graph – API ” which was improved version of REST api which was used previously.
Suppose you want to access the profile picture of a person you can simply call this API

http://graph.facebook.com/mjeyaganesh/picture

This url simply returns the profile picture of the my facebook account.All you need is the name or UID of the person, in this case you can access my profile picture using my UID also.The power of Graph Api is self explained,you dont need to do complex program to do this easy task.
You can easily access information like name,age,gender,location,friends etc I would recommend you to read Graph api documentation.Keep in mind that not all information is accessible you need to get a permission or access token from the user to access it.

Step 1: Create a new application

Our first step to create a facebook application is go to http://www.facebook.com/developers/ and click “set up new application “.Give your application a name and agree the terms click submit.

facebook application

Step 2: Fill in the details of the application

You will be directed to this page to fill up the essential details of the application.

Step 3: Fill in the facebook integration

Every application has application ID,application secret key and api key unique to every application.You need to fill in the details like canvas page ,canvas url etc.

Note: Kindly use “https” in the secure canvas url.
The canvas page is your facebook application url,you can see your application in that URL.
Canvas URL- Each application is just a simple PHP page which will be hosted on your server and the canvas page simply renders the application inside facebook.In this case I have hosted my files at “www.devlup.com/fb/”
See about canvas

Application architecture

Step 4 : Complete registration

For now click save changes [you can edit details later ]

Step 5 : Download client library

To get started in programming you need the client library.In this case we are developing in PHP hence download php client library.There are other client libraries for Javascript,iOS,android sdk’s [ see here] .

PHP SDK

Step 6 :Upload the library

Create a folder in your server and extract the library files there,The “src” folder has facebook.php which will serve as the client library.

Step 7 : Set defaults

view plaincopy to clipboardprint?

1. < ?php include_once "src/facebook.php"; $app_id = 'YOUR APP ID'; $application_secret = 'YOUR APP SECRET'; $facebook = new Facebook(array( 'appId' => $app_id,
2. 'secret' => $application_secret,
3. 'cookie' => true, // enable optional cookie support
4. ));

< ?php        include_once "src/facebook.php";   $app_id = 'YOUR APP ID';   $application_secret = 'YOUR APP SECRET';   $facebook = new Facebook(array(   'appId'  => $app_id,
  'secret' => $application_secret,
  'cookie' => true, // enable optional cookie support
));

Step 8: code

Check whether the user is logged into facebook before loading the application.If the user is not logged in show the $loginurl

view plaincopy to clipboardprint?

1. if ($facebook->getSession())
2. {
3. $user = $facebook->getUser();
4. }
5. else
6. {
7. $loginUrl = "https://graph.facebook.com/oauth/authorize?type=user_agent&display=page&client_id=APPID
8. &redirect_uri=http://apps.facebook.com/CANVAS URL/
9. &scope=user_photos";
10. echo '';
11. }

if ($facebook->getSession())
 {
  $user = $facebook->getUser();
 }
else
  {
  $loginUrl = "https://graph.facebook.com/oauth/authorize?type=user_agent&display=page&client_id=APPID
  &redirect_uri=http://apps.facebook.com/CANVAS URL/
  &scope=user_photos";
  echo '';
  }

Step 9 : Fetch details

The concept of this application is to display all the profile pictures of your friends in single page
First get the UID of the current user loggin by calling the function getuser()

view plaincopy to clipboardprint?

1. $uid = $facebook->getUser(); //get the UID of the current user
2. $me = $facebook->api('/me/friends'); // access all the information of friends
4. // $me has the JSON detail of all the facebook friends of the current user
6. echo " Friends collage";
7. foreach($me['data'] as $frns)
8. {
9. // Display the picture of friends one by one
10. echo "<img title="\"".$frns['name']."\"/" alt="" src="\">";
12. }

$uid = $facebook->getUser();  //get the UID of the current user
$me = $facebook->api('/me/friends');   // access all the information of friends

// $me has the JSON detail of all the facebook friends of the current user 

echo " Friends collage";
foreach($me['data'] as $frns)
{
// Display the picture of friends one by one
echo "";

}

Step 10 : Complete coding

view plaincopy to clipboardprint?

1. < ?php
3. include_once "src/facebook.php";
4. $app_id = 'APPID';
5. $application_secret = 'APP SECRET';
7. $facebook = new Facebook(array(
8. 'appId' => $app_id,
9. 'secret' => $application_secret,
10. 'cookie' => true, // enable optional cookie support
11. ));
13. if ($facebook->getSession()) {
14. $user = $facebook->getUser();
15. $uid = $facebook->getUser();
16. $me = $facebook->api('/me/friends');
17. echo "Total friends".sizeof($me['data'])."";
19. echo " Friends collage
21. ";
22. foreach($me['data'] as $frns)
23. {
24. echo "<img title="\"".$frns['name']."\"/" src="\"https://graph.facebook.com/".$frns['id']."/picture\"">";
26. }
28. echo "
30. By <a href='\"http://facebook.com/mjeyaganesh\"'><img title='\"Jeyaganesh\"/' src='\"https://graph.facebook.com/1147530774/picture\"'></a>";
32. }
33. else {
34. $loginUrl = "https://graph.facebook.com/oauth/authorize?type=user_agent&display=page&client_id=APPID
35. &redirect_uri=http://apps.facebook.com/CANVAS URL/
36. &scope=user_photos";
37. echo '<fb:redirect url="' . $loginUrl . '"></fb:redirect>';
38. }
40. ?>

< ?php

   include_once "src/facebook.php";
   $app_id = 'APPID';
   $application_secret = 'APP SECRET';

   $facebook = new Facebook(array(
  'appId'  => $app_id,
  'secret' => $application_secret,
  'cookie' => true, // enable optional cookie support
));

 if ($facebook->getSession()) {
    $user = $facebook->getUser();
 $uid = $facebook->getUser();
 $me = $facebook->api('/me/friends');
 echo "Total friends".sizeof($me['data'])."";

 echo " Friends collage

";
 foreach($me['data'] as $frns)
 {
 echo "";

}

 echo "

 By ";

 }
 else {
 $loginUrl = "https://graph.facebook.com/oauth/authorize?type=user_agent&display=page&client_id=APPID
 &redirect_uri=http://apps.facebook.com/CANVAS URL/
 &scope=user_photos";
 echo '';
}

?>

After saving the file.Proceed to your canvas URl to see the demo of your application[http://apps.facebook.com/canvasurl] you can submit to facebook app directory after 10 people start using your application.

Step:11 Outcome

DEMO

Access permission for first time user