How to Make Your Own Facebook Application with iFrames and PHP – Tutorial

31 Mar 2010

Making a game or other application on Facebook is fairly simple, but it may be a little daunting at first. It took me a while to figure out what exactly needed to be done, especially when using the iFrames format. Basically there are two different formats you can use: FBML, which just loads your page directly into the Facebook page, or iFrame, which will load your page into an iFrame inside of the Facebook page. There are a few advantages and drawbacks to using either method:

Why use FBML?

Easier to access the FBML code (when using iFrames you have to use XFBML instead of FBML, and XFBML is slightly more complicated)
Page probably loads faster than iFrame
Much easier to make something quickly

Why use iFrame?

Can use Javascript, which makes it much easier to just port stuff over
AJAX is faster because it doesn’t go through a proxy

The most important thing to realize that is if you use the iFrame format, you have to use XFBML instead of FBML which really isn’t much harder to use, I just did not realize this was the case and I was banging my head against the wall trying to figure out why FBML wasn’t working. XFBML is basically a version of FBML used for Facebook Connect (external websites that utilize Facebook) and the iFrame approach to creating an application.

I reaaaaally suggest using the iFrame approach solely because in order to use Javascript with just FBML (no iFrame), you have to use FBJS which quite frankly is just flat out retarded and impossible to use. Because of this mess, this blog post is teaching you how to make an app with the iFrame approach.

So lets just dive right in.

Part 1: Setting up your application on Facebook

Head to http://www.facebook.com/developers/ and click on Set Up New Application at the top-right corner. Name your application, select agree, and click Create Application.

Now click on the Canvas tab on the left. Make the Canvas Page URL whatever you would like it to be (this is what the url will be for people to get to the app). Make the Canvas Callback URL the page that your app resides on (your own personal space where you are putting creating the HTML, PHP, or whatever page[s]). This will be the page that Facebook loads into its iFrame when people go to the Canvas Page URL. Finally, make sure the Render Method under Canvas Settings is set to IFrame.

****EDIT: I meant to type “http://seanmadi.com/flareisland” for the Canvas Callback URL, not “”http://seanmadi.com/flairisland”.

Now here is the tricky part that all of the tutorials I looked at failed to mention. Click on the Connect tab and make the Connect URL that same as what you put for the Canvas Callback URL.

Finally, after you save those settings, be sure to copy down your API Key and Application Secret. And thats it for the Facebook side of things!

Part 2 – Downloading Facebook’s necessary PHP files

Just download the PHP Client Library files and upload them to your server somewhere in the same directory as you put as the Canvas Callback URL earlier.

Part 3 – Settings up your html/php page on your server

I will assume you already know how to FTP to your webspace and create and php file. So do that and put make this make this your index.php file in the directory you entered into the set up above. The following code will display your profile picture, name, and status and your first 4 friends’ profile picture, name, and status.

<?php
// FACEBOOK STUFF
//Note that where my facebook.php file is may be different from yours
>require_once 'php_include/facebook/php/facebook.php';
//Authentication Keys
$appapikey = '6c7b5d1e5d6bef88cf120c42453b57c3';
$appsecret = '75005c4cebc164fc42484d6d1cd3ac62';
//Construct the class


$facebook = new Facebook($appapikey, $appsecret);
//Require login
$user_id = $facebook->require_login();
echo '
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
</head>
<body>
<h3>Your profile</h3>
<table><tr>
<td valign=top><fb:profile-pic uid="'.$user_id.'" linked="true" size="square" /></fb:profile-pic></td>
<td width=350 valign=top><fb:name uid="'.$user_id.'" useyou="false" /></fb:name><br />
<span style="font-size:12px;"><Fb:user-status uid="'.$user_id.'" linked="true" /></Fb:user-status></span></td></tr></table>
<h3>Friends</h3>';
$friends = $facebook->api_client->friends_get();
$friends = array_slice($friends, 0, 5);

foreach ($friends as $friend)
{
	echo "<table><tr>";
	echo "<td valign=top><fb:profile-pic uid=\"$friend\" linked=\"&gt;true\" size=\"square\" imgstyle=\"border-width:1px; border-color: black;\" /></fb:profile-pic></td>";
	echo "<td width=350 valign=top><fb:name uid=\"$friend\" useyou=\"&gt;false\" /></fb:name><br />";
	echo "<span style='font-size:12px;'><Fb:user-status uid=\"$friend\" linked=\"&gt;true\" /></Fb:user-status></span></td></tr></table>";
}
echo '
		<script type="text/javascript">
			FB.init("6c7b5d1e5d6bef88cf120c42453b57c3", "xd_receiver.htm");
		</script>
	</body>
</html>';
?>

****EDIT: There should not be a ‘>’ before the require_once() statement at the top of the code. For some reason its showing up there when I post even though I didn’t type it. So if you are copying and pasting, leave that ‘>’ out.

And that’s it! With any luck you should get something that looks like this:

Of course if you want to display other things, which I imagine you do, you can change the body of the page to whatever you want. Check out Facebook’s Developer Wiki for information on how to use different XFBML tags.

One important distinction to recognize between FBML and XFBML is that FBML tags do not need to be closed while XFBML tags do. So instead of where in FBML you would do <fb:photo pid=”54321″ uid=”6789″>, you you would instead write <fb:photo pid=”54321″ uid=”6789″></fb:photo> for XFBML.

I hope this post was informative and not frustrating. If you have any trouble, let me know in the comments and I’ll to help as best as I can. Have fun!

Tags: create your own, facebook, facebook api, facebook app, facebook application, fbml, how to, iframe, make your own, php, tutorial

1 Response to How to Make Your Own Facebook Application with iFrames and PHP – Tutorial

radu

October 21st, 2010 at 2:15 pm

Hello,

Is it something changed with FB API as I tried a lot of tutorials (also this) and I get:
Fatal error: Call to undefined method Facebook::require_login() in /home/surfmsco/public_html/findpdf.net/weather/index.php on line 37

how I can check if user is logged on and if not to redirect to login page and them back ??

Thanks and nice tutorial, keep it up!

radu: Hello, Is it something changed with FB API as I tried a lot of tutorials (also this) and I get: [...]

seanmadi: Well there are a ton of big Pokemon MMOs out there with a large player base that are still running. [...]

Travis: Interesting idea, but it sounds like a copyright infringement suit waiting to happen. [...]

How to Make Your Own Facebook Application with iFrames and PHP – Tutorial

Part 1: Setting up your application on Facebook

Part 2 – Downloading Facebook’s necessary PHP files

Part 3 – Settings up your html/php page on your server

1 Response to How to Make Your Own Facebook Application with iFrames and PHP – Tutorial

Comment Form

About this blog

twitter.com/seanmadi

Categories

Archives