On the previous page we displayed a Like Button, an example of social plugins, which are a relatively easy way to add social features to your site. Facebook allows more advanced integration for your website (Facebook Connect) or on facebook.com (Canvas Pages). It takes a few more steps to set this up.

Enable Modules

To support applications, you'll want to enable additional modules below which are not strictly required, but this would be a good time to go ahead and enable them anyway.

• fb_app.module
• fb_user.module
• fb_connect.module
• fb_canvas.module (only enable this module if you plan on supporting fb canvas pages; otherwise, it's unnecessary)

Here is the Admin>>Build>>Modules page showing just the modules enabled that we've covered already:

Create Application On Facebook

The following steps assume you have a Facebook account.

• Go to http://www.facebook.com/developers/createapp.php
• If asked to login, use your Facebook login. If you haven’t created an application before, you will be asked to grant Facebook Application access to your Facebook account. You have to allow this in order for this process to work
• Facebook will ask you for the Application Name that you want to use. This is a short human-readable name. It will be viewable to those who are allowed to visit your Facebook account so make it simple and clear
• Agree to the terms and click Save Changes. Enter the CAPTCHA sequence when prompted on the subsequent page
• A Basic Information Page will appear where you can modify your e-mail address, and enter a URL for Privacy and Terms of Service for your new application

Note: The next page that appears will contain three pieces of information that you will need for your Drupal FB Application:

• API Key
• Application Secret
• Application ID

The page should look like this:

You will copy and paste the above information into the applicable fields when creating your Drupal FB Application.

Facebook Integration (Canvas) Page-Specific Setup

Not necessary for Facebook Connect-only applications.

• Return to the settings form, if necessary, by clicking "edit settings"
• Click on Facebook Integration in the left menu of your Facebook application screen
• At the top of the screen that appears next, fill in the Canvas Page name and leave the Canvas URL field blank since Facebook will automatically embed your Application Secret into the URL of your base application as shown in the example screenshot below
• Formatting restrictions are provided on the screen. Please read them

Configure Application On Drupal

In your Drupal site, as an administrator, go to Admin >> Site Building >> Facebook Applications >> Add Application. The page will look like this:

Configure the following:

• Label – This is your machine-readable name. Use lower case, no spaces. If you have more than one Facebook application in one site, this will have to be unique for each. If you are running both development and live servers, you should use the same label from one server to the next
• API Key, Secret, and Facebook App ID – Copy and paste this information from your Facebook application screen
• Set Application Properties Automatically – Make sure this is checked
• Facebook Canvas Pages (for Canvas pages only) - Select settings for this application that apply to canvas pages
• Facebook Connect settings (for Connect apps only) – Check the box to make this the primary application
• Facebook user settings – Leave default settings here, unless you're an advanced user
• Save your configuration

Once the application has been saved successfully, you should see the new application on the "List" page like below:

Note: If (a) you have more than one application enabled under Admin >> Site Building >> Facebook Apps, and (b) one of those apps is Facebook Connect (as opposed to just canvas pages), then the 'fb_apikey' in settings.php (in directory /sites/default) should be changed to the api key for the Facebook Connect application. Otherwise, you will get an error after you save the application. To see an example of this error message and the corresponding fix, please read the Troubleshooting page.

Confirm That It Works

Now you need to confirm that your new Facebook application works so go ahead and enable the fb_connect block under /admin/build/block which looks like this:

Note: When testing Facebook Applications, it is a good idea to administer Drupal in one browser while testing applications in another browser. This way, you'll avoid linking your Drupal admin account to a Facebook user. The Chrome browser allows you to open incognito windows which are quite useful for this. Open another browser browser now, before testing the block you've just enabled.

The above block provides the FB Connect user login block so that registered Facebook users can now login to your Drupal site with their Facebook credentials. Have a friend (or try it with your own Facebook account) login to your site by selecting the "Connect with Facebook" blue block which should then bring up a separate Facebook-themed prompt asking you to fill in your e-mail address and password like below:

Then, your application's Request for Permission box will pop-up asking the user to "allow" or "don't allow" access to basic information associated with their Facebook account including name, profile picture, gender, networks, user ID, friends list, etc. as shown here:

The user's Facebook profile picture will then show up on your site's user/login page showing that they successfully logged into your Drupal site/Facebook application:

Voila! Congratulations. You have a Facebook Application, now powered by Drupal!