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

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.

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

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

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

< ?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

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

$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

< ?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

Download source code

You can follow us on Twitter or join our Facebook Fan Page for more Facebook apps.

Developer Link

Graph api
Documentation
Canvas Tutorial

Related posts:

Tagged as: fbml, How To, PHP