Last updated 7 December 2010. Created on 27 September 2010.
Edited by stacywray, Dave Cohen, techninja. Log in to edit this page.

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

Required modules

  • fb_app.module
  • fb_canvas.module
  • 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

  1. Assuming you've created an application as described on the installation page, go to Admin >> Site Building >> Facebook Applications.
  2. Under "Remote Settings" you'll see the application's ID. Click this link to go to the settings page on Facebook.com.

  3. Click "Advanced Settings" on the left.

  4. 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).

  5. Click "Facebook Integration" on the left.
  6. Look for "Canvas Page" and type your desired path into the field.

  7. Under "Iframe Size" choose "Auto-resize" (optional, see resizable below).
  8. 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.

  1. Return to your Drupal admin pages. Specifically Admin >> Site Building >> Facebook Apps
  2. Under "Local Operations" click edit

  3. Open the "Facebook Canvas Pages" fieldset
  4. Select the theme you wish to use. If you don't see it, make sure you've enabled it under Admin >> Site Building >> Themes
  5. 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; ?>">

Testing

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.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

mottolini’s picture

Now the Canvas Page field where you can specify the address of your application disappeared...

You can have a look at the new page here

Now you have to specify the address in the field App Namespace in Basic Info.

barone’s picture

Last few months we saw a lot of changes in the FB app create/edit interface, so most of this documentation is outdated... Any plans to update any time soon? Also, most of those screenshots are from D6 and some things have changed as well.