Apps on Facebook.com (canvas pages)

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. Click "Save Changes". Retry as needed until you get a path not in use by any other application.

Each canvas application get 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.

[[TODO: add information about themes, autoresizing,...]]
To confirm that your application is working, return to admin >> site building >> facebook applications. Click the link n the "canvas" column. This should bring you to your application's home canvas page.

For more information about Drupal Development, Drupal Expert, Drupal Developer and Drupal Programmer visit at http://www.dckap.com 

Source: http://drupal.org/node/923818