Facebook iFrame App Skeleton
Published Tuesday 15th of February 2011
I've had to work on building a Facebook app the last few weeks and I have to say it's a right piss take.
Documentation is lacking and whatever information you can google your way to seems to always be outdated.
That's why I thought I'd document my findings here.
You should read on if you want to create a Facebook iFrame App that:
- Lives on a facebook page rather than on apps.facebook.com
- Requires the user to be logged in and accept that the app has access to basic details about the user
- Presents different content depending on whether user has "liked" a certain page or not
First of all you'll wanna download the Facebook PHP API. This is what we'll use to connect to Facebook. You can do it without the API but it's a little bit smoother with.
Second, go to facebook.com/developers/createapp.php and create your app. You can follow the beginning of this guide but what you'll want to create is a basic iFrame-app and make sure it has a tab name etc in the new "tabs"-section under settings (so that it can be added as a tab to a page). Also, do not give your app a canvas-URL (we want it to live on a page, not on apps.facebook.com).
Now for the actual code. We'll start by initiating the Facebook API:
define('FB_APP_ID', 'your app ID');
define('FB_APP_SECRET', 'your app secret');
define('FB_PAGE_ID', 'id of page user should like');
define('FB_PAGE_URL', 'url of page user should like');
$facebook = new Facebook(array(
'appId' => FB_APP_ID,
'secret' => FB_APP_SECRET,
'cookie' => true
));
Just replace the constant values with your app ID and secret.
Next we'll make sure the user is logged in and that he has accepted our app:
$fbMe = null;
$fbSession = $facebook->getSession();
$fbLoginUrl = $facebook->getLoginUrl(array(
'fbconnect' => 0,
'next' => FB_PAGE_URL
));
# Make sure user is logged in / has accepted app else redirect to login page
if (!$fbSession) {
die("<script>top.location.href = '$fbLoginUrl';</script>");
}
else {
try {
$fbUID = $facebook->getUser();
$fbMe = $facebook->api('/me');
}
catch (FacebookApiException $e) {
die("<script>top.location.href = '$fbLoginUrl';</script>");
}
}
Lastly we're going to use FQL to check whether the user likes our page:
define('FB_PAGE_ID', 'id of page user should like');
$likeID = $facebook->api(array(
'method' => 'fql.query',
'query' => 'SELECT target_id FROM connection WHERE source_id = ' . $fbUID . ' AND target_id = ' . FB_PAGE_ID
));
if (empty($likeID)) {
$isFan = false;
}
else {
$isFan = true;
}
That's pretty much it. Doesn't look like much but took me about 16 hours of googling to find all the little pieces that make everything work.
Now you can simply use $isFan to include different content depending.
All the code put together looks like this:
<?php
# This is for IE... (http://forum.developers.facebook.net/viewtopic.php?id=73645)
header('P3P: CP="NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM"');
# Include FB PHP API
include 'facebook.php';
# FB details
define('FB_APP_ID', 'your app ID');
define('FB_APP_SECRET', 'your app secret');
define('FB_PAGE_ID', 'id of page user should like');
define('FB_PAGE_URL', 'url of page user should like');
# Initiate API and fetch data
$facebook = new Facebook(array(
'appId' => FB_APP_ID,
'secret' => FB_APP_SECRET,
'cookie' => true
));
$fbMe = null;
$fbSession = $facebook->getSession();
$fbLoginUrl = $facebook->getLoginUrl(array(
'fbconnect' => 0,
'next' => FB_PAGE_URL
));
# Make sure user is logged in / has accepted app else redirect to login page
if (!$fbSession) {
die("<script>top.location.href = '$fbLoginUrl';</script>");
}
else {
try {
$fbUID = $facebook->getUser();
$fbMe = $facebook->api('/me');
}
catch (FacebookApiException $e) {
die("<script>top.location.href = '$fbLoginUrl';</script>");
}
}
# Check whether user likes page
$likeID = $facebook->api(array(
'method' => 'fql.query',
'query' => 'SELECT target_id FROM connection WHERE source_id = ' . $fbUID . ' AND target_id = ' . FB_PAGE_ID
));
if (empty($likeID)) {
$isFan = false;
}
else {
$isFan = true;
}
?>
Now, to add this app to our page we'll simply visit the app's profile page and there should be a link saying something like "Add to my page". If all you see is "Add as favorite to my page" you need to make sure you have an administrator for your page that is a real user and login as him to add the app.
A few more tips:
- You can find your page's ID by checking some links on the page, there should be some pointing to something like ?id=38490289432 or whatever.
- Remember that your page needs to have a real person as an administrator and that person needs to be logged in in order to add the app to your page.
- You can find your apps profile page by logging in as the app developer and visiting developers.facebook.com then going to "my apps" and finally click your app. There should be a list of links one of them being "apps profile page".
- In a months time this article will be out dated :P
Hope that helps someone out there looking to do the same thing!
- Tags
- Comments
- 3 comments
Bookmark this Article