How to create facebook application using PHP and graph api

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 facebookenvironment.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 UIDalso.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 tohttp://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 plain copy to clipboard print ?

< ?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 plain copy to clipboard print ?

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 plain copy to clipboard print ?

$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 “<img title=”\””.$frns[‘name’].”\”/” src=”\” alt=””>”;
}

Step 10 : Complete coding

view plain copy to clipboard print ?

< ?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 “<img src=”\”https://graph.facebook.com/”.$frns[‘id’].”/picture\”” title=”\””.$frns[‘name’].”\”/”>”;
}
echo “
By <a href=”\”http://facebook.com/mjeyaganesh\””><img src=”\”https://graph.facebook.com/1147530774/picture\”” title=”\”Jeyaganesh\”/”></a>”;
}
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 ‘<fb:redirect url=”‘ . $loginUrl . ‘”></fb:redirect>’;
}
?>

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