Facebook recently announced that, as of March 11th 2011, all Facebook Fan Pages will be moving to a new design layout, similar to that of the new profile pages. Aside from fan pages receiving the new, modern look, finally we get a chance to use iFrames for our applications within fan pages, which is fantastic news for developers as we can finally say goodbye to FBML and FBJS!
So, what's new?
Apart from the freedom of using any web code you like to build your pages, there are some other neat under-the-hood features that are being introduced.
The "signed_request" parameter
As building applications to display in fan pages is almost identical to building canvas applications I thought I'd start with the "signed_request" parameter, as this is a fundamental tool in canvas applications that is now available to us in fan page applications. For those who aren't familiar with this parameter, it is an encoded string passed into your application from Facebook, which contains all kinds of useful information about the user viewing your application. In PHP you would look at the parameter like this:
// Check for the signed_request parameter
if (array_key_exists("signed_request", $_REQUEST))
{
// Grab the signed_request
$signed_request = $_REQUEST["signed_request"]
// Unpack the signed request parameter
list($encoded_sig, $payload) = explode(".", $signed_request, 2);
// Decode the data
$data = json_decode(base64_decode(strtr($payload, "-_", "+/")), true)
// Print the data to screen
print_r($data);
}
This should give you something like this:
Array (
[algorithm] => HMAC-SHA256
[issued_at] => 1299149602
[page] => Array(
[id] => ...
[liked] => false
[admin] => true
)
[user] => Array(
[country] => gb
[locale] => en_GB
[age] => Array(
[min] => 21
)
)
)
The elements to really note are [page] and [user], in particular the [page][liked], [user][locale] and [user][age] - all self explanatory as to what they mean and each one is extremely useful for tailoring what content is shown. In the old style FBML applications the signed_request parameter didn't give you anywhere near as much useful information so this is a major improvement!
As an aside note, if the user authenticates your application you get a couple of extra pieces of useful information - [user_id] and [oauth_token]. If you're using the Javascript SDK then these are usually taken care for you in the background when you make API calls, but in case you need to make some additional calls to the Graph on the server then these will need to be passed in.
Array (
[algorithm] => HMAC-SHA256
[expires] => 1299153600
[issued_at] => 1299149602
[oauth_token] => ...
[page] => Array(
[id] => ...
[liked] => false
[admin] => true
)
[user] => Array(
[country] => gb
[locale] => en_GB
[age] => Array(
[min] => 21
)
)
[user_id] => ...
)
The "app_data" parameter
You can now pass in additional data from the URL into the iFrame tabbed application by appending the URL with an app_data parameter. The parameter can take any string value and will appear in your signed_request data array.
Example: http://www.facebook.com/mypage?sk=app_[app_id]&app_data=hello will give you the following signed_request data:
Array (
[algorithm] => HMAC-SHA256
[issued_at] => 1299149602
[app_data] => hello
[page] => Array(
[id] => ...
[liked] => false
[admin] => true
)
[user] => Array(
[country] => gb
[locale] => en_GB
[age] => Array(
[min] => 21
)
)
)
New iFrame size
The maximum size of contents of your iFrame (if you wish to have no scrollbars) is now 520x800 pixels - the same width as the old FBML applications, but now with a fixed height.
If you wish to not include scrollbars then it's best to use a setup like the following:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
}
.container {
height: 800px;
margin: 0 auto;
width: 520px;
}
</style>
</head>
<body>
<div class="container">
<!-- Your code goes here -->
</div>
</body>
</html>
All sounds good, so how do I get started?
First things first, you need to setup a new Facebook application, so head over to http://www.facebook.com/developers/createapp.php to get started - you should see a screen like this:
Comments.