Applications on Facebook.com, also known as canvas pages allow you to add new features to a user's Facebook account. The features and content come from your server, but the user never leaves the Facebook.com domain, and the pages have Facebook's branding, look and feel.
Create an Application on Facebook
- fb_connect.module - despite the name, this module contains useful features for iframe canvas pages.
- fb_user.module - not strictly required but most application will need this.
Settings and Configuration
Step 1: Remote settings
- Assuming you've created an application as described on the installation page, go to Admin >> Site Building >> Facebook Applications.
- Under "Remote Settings" you'll see the application's ID. Click this link to go to the settings page on Facebook.com.
- Click "Advanced Settings" on the left.
- Enable the "Migrations" - Both "JSON Encoding Empty Arrays" and "OAuth 2.0 for Canvas (beta)" are required. Other migrations "Stream post URL security" and "Canvas Session Parameter" are safe to enable. (The latter seems to have no effect when oauth 2.0 is also enabled, but who knows for sure).
- Click "Facebook Integration" on the left.
- Look for "Canvas Page" and type your desired path into the field.
- Under "Iframe Size" choose "Auto-resize" (optional, see resizable below).
- Click "Save Changes". Retry as needed until you get a path not in use by any other application.
Each canvas application gets a URL something like apps.facebook.com/EXAMPLE.
Step 2: Enable URL rewriting
URL rewriting and other settings must be initialized before modules are loaded, so you must add this code to your settings.php. This is easily done by including fb_url_rewrite.inc before fb_setting.inc, near the end of your settings.php (usually sites/default/settings.php).
include "sites/all/modules/fb/fb_url_rewrite.inc"; include "sites/all/modules/fb/fb_settings.inc";
(Remember to change the path if modules/fb is not in sites/all.)
Q: Why rewrite URLs? A: In some cases, particularly when a user visits your canvas page without authorizing it or logging into Facebook, Facebook does not send any identifying information to the canvas page iframe. That is, Drupal will not know whether the request is for a canvas page or a regular page. To help Drupal figure it out, we embed the app's apikey inside the URL. We do this using Drupal's URL rewriting technique.
Step 3: Local settings
You will need a theme designed for the 760 pixel wide canvas that Facebook provides for your application.
- Return to your Drupal admin pages. Specifically Admin >> Site Building >> Facebook Apps
- Under "Local Operations" click edit
- Open the "Facebook Canvas Pages" fieldset
- Select the theme you wish to use. If you don't see it, make sure you've enabled it under Admin >> Site Building >> Themes
- Optionally, select a front page different from the default home page
Resizable canvas pages
fb_canvas.module helps you support resizable canvas pages. To implement this, you must choose "Auto-resize" under "Iframe Size" on the remote settings form.
And in your theme's page template, include the class "fb_canvas-resizable" in the
<body> tag. So your body tag near the top of page.tpl.php might look like:
<body class="fb_canvas-resizable <?php print $body_classes; ?>">
To confirm that your application is working, return to Admin >> Site Building >> Facebook Applications. Click the link in the "canvas" column.
This should bring you to your application's home canvas page.