How To Set Up a Facebook Iframe Application in PHP in 5 minutes

9 Jun, 2009  |  Written by Jon  |  under Facebook Development

Getting Facebook Developer Application running and libraries installed:

Go to http://developers.facebook.com/ . Click the Green “Get Started”¬† Button

Click “PHP Client Libraries” on the right side of the page in the gray box. Save the zip file to your local computer. Unzip the contents of “facebook-platform”>>”php” and upload to the folder on your web server that will serve as the root of your Facebook application. FYI, you just need the files in the “php” folder in your root directory.

Install the Facebook developer application at http://www.facebook.com/developers/

Click the “Setup a new application” link in the gray box in the upper right of the developer application homepage

Fillout the application name and submit

Now you are on the edit application settings interface.

Click the “Canvas” tab on the left and change the following:

  • “Canvas Page Url” enter the url you want your application to be displayed under on facebook. I used “iframexample”.
  • Under “Canvas Callback URL”, enter the URL of the applications “homepage” on your server. I used “www.keywordintellect.com/facebook/iframeexample/”.
  • Under “Canvas Settings” click “IFrame”.

Click the “connect” tab on the same settings interface. In the “Connect URL” field enter your Canvas URL (http://www.keywordintellect.com/facebook/iframeexample/ in my case)

Save your settings

Setup your canvas page:

Create a file named “index.php” and put it in the root directory on your webserver for the application “www.keywordintellect.com/facebook/iframeexample/” in my case.

Call the Facebook libraries and authenticate. Note: Replace the app key and secret with the values displayed on your applications settings page withing Facebook. Note: that since I have many aps running, I separated out the Facebook Libraries in a separate directory up one level from my application roots

<?

//Link in library. Note my directory structure may be different
require_once '../fblibrary/facebook.php';

//Authentication Keys
$appapikey = 'REPLACE WITH YOUR KEY';
$appsecret = 'REPLACE WITH YOUR SECRET';

//Construct the class
$facebook = new Facebook($appapikey, $appsecret);

//Require login
$user_id = $facebook->require_login();
?>

Let’s also add in a basic XFBML call to the fb:name tag as well as an API call to get the UIDs of the logged in users friends

<?

// XFBML: Greet the currently logged-in user!
echo "<p>Hello, <fb:name uid=\"$user_id\" useyou=\"false\" ></fb:name>!</p>";

// API: Print out at most 25 of the logged-in user's friends, using the friends.get API method
echo "<p>Friends:";
$friends = $facebook->api_client->friends_get();
$friends = array_slice($friends, 0, 25);
foreach ($friends as $friend) {
  echo "<br>$friend";
}
echo "</p>";

?>

Now, if we were to stop here and run it, the API call would work, but the XFBML would not. We need to set up the page to handle the XFBML. The XFBML documentation is here: http://wiki.developers.facebook.com/index.php/XFBML.

First, you need to create a Cross Domain Communication Channel File. Follow these instructions: http://wiki.developers.facebook.com/index.php/Cross-domain_communication_channel

When that file is created, we then add the following code before and after the PHP XFBML. Note, you need to add your API key and change the path to the Cross Domain Channel File in the last line.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
</head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<? //Insert the PHP XFBML and API PHP code above here ?>

<script type="text/javascript">
	FB.init("YOUR API KEY HERE", "../fblibrary/xd_receiver.htm"); });
</script>

</body>
</html>

Congrats, you are done!

Here is the full index.php file:

<?php
//Link in library. Note my directory structure may be different
require_once '../fblibrary/facebook.php';

//Authentication Keys
$appapikey = 'YOURAPIKEY';
$appsecret = 'YOURAPISECRET';

//Construct the class
$facebook = new Facebook($appapikey, $appsecret);

//Require login
$user_id = $facebook->require_login();
?>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>
	</head>
	<body>
		<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

		<?
			// Greet the currently logged-in user!
			echo "<p>Hello, <fb:name uid=\"$user_id\" useyou=\"false\"></fb:name>!</p>";

			// Print out at most 25 of the logged-in user's friends, using the friends.get API method
			echo "<p>Friends:";
			$friends = $facebook->api_client->friends_get();
			$friends = array_slice($friends, 0, 25);
			foreach ($friends as $friend) {
			  echo "<br>$friend";
			}
			echo "</p>";
		?>

		<script type="text/javascript">
			FB.init("YOURAPIKEY", "../fblibrary/xd_receiver.htm");
		</script> 

	</body>
</html>
Share:
  • email
  • Digg
  • Twitter
  • Facebook
  • del.icio.us
  • Mixx
  • MySpace
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • BlinkList
  • Google Bookmarks
  • LinkedIn
  • Live
  • Yahoo! Buzz
  • Fark
  • Netvibes
  • Netvouz
  • Propeller
  • Yahoo! Bookmarks

5 Responses so far | Have Your Say!

  1. Alberto  |  October 9th, 2009 at 1:11 pm #

    Hey man, this really helps me a lot! but i still cannot figure out why the XFBML is not working for me :S i’ve tried 3 different times and nothing, now i just copied and paste your code but i cannot have the tag to appear

    Could you help me out ? what can i be doing wrong?

    Alberto - Gravatar
  2. Jon  |  October 11th, 2009 at 2:27 pm #

    Not sure why it wouldn’t work assuming you just copied what is above. Did you double check the path to the xd_receiver.htm? Under the FB.init javascript at the very bottom, did you include your API key where it says YOURAPIKEY?

    Jon - Gravatar
  3. thomas  |  October 19th, 2009 at 1:06 pm #

    It doesn’t work for me either. I can get the ’share’ button to pop up an empty box but it isn’t connecting to facebook or something. I can get it to connect and post stuff on walls etc in FBML but building the form and connecting to my database and other features are ridiculous with FBML.

    I supposed the XFBML is working but it seems like there is something else I’m missing to fully connect to facebook. I can’t pull in the request friends to invite them to my application the same way I do in the FBML when I swap to the iframe either.

    Help?

    thomas - Gravatar
  4. Richa  |  January 19th, 2010 at 2:22 am #

    This is very useful to me but an error is coming which I do not know how to solve. Can u help me ?
    This is error is coming when my application is loaded in facebook.

    Warning: fopen() [function.fopen]: php_network_getaddresses: getaddrinfo failed: No such host is known. in D:\xampp\htdocs\richa1fb\client\facebookapi_php5_restlib.php on line 1755

    Richa - Gravatar
  5. DS  |  March 28th, 2010 at 3:16 am #

    perhaps you might want to check the URL in the callback URL, app settings. i left mine blank initially and could not get the xfbml to work. when i filled it up it worked well.

    thanks! =)

    DS - Gravatar

Leave a Feedback

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>