Facebook for Developers: Canvas & Connect

The Facebook development platform consists of two implementation variations: Canvas (FBML) and Facebook Connect (XFBML). Depending on the set goal for what you are trying to accomplish, one might supersede the other.

Facebook’s Canvas Pages

Canvas Pages work the same as a typical Web page. They appear inside of Facebook.com and can contain just about any content. With Canvas Pages, you can have an unlimited number of pages, which can link to one another and are hosted on a remote server. The creation of Canvas Pages consists of a Facebook Markup Language called FBML, which is similar to HTML.

When creating a Canvas Page with Drupal, you run into a few issues:

The solution to these issues is to produce FBML at the theme layer and have the URLs map on a one-to-one ratio. Start by building out your theme using FBML. As for the URL, use the rewrite to do a one-to-one URL. For instance, http://example.com/hello is the equivalent to http://apps.facebook.com/hello and they are handled by the same callback functions. The next step is to allow the sessions to be controlled by Facebook using fb_settings.php and including it in to your theme.

So the process for Canvas Pages are as follows:

user>FB>server (FBML)>FB(HTML)>user

Here is a brief summary for Facebook’s Canvas:


  • Develop Canvas Pages just as you would a Web page
  • Enable HTML and FBML themes
  • Administer your application on example.com/admin
  • Customize your FBML theme



  • Reinvent the wheel
  • Code logic into your theme
  • Assume javascript will work (use FBJS or FBJQUI)


Facebook Connect

Facebook Connect brings social features to your website. Drupal for Facebook supports Facebook Connect, as well. Facebook Connect connects to Facebook.com, as well as all other Facebook Connect websites. This saves the trouble of logging in multiple times to authorizing the application.

Facebook Connect uses XFBML, which adds features to your site. For instance, you can show features of Facebook such as walls, comment forms, friend lists, pop-ups and everything else that Facebook has to offer directly on your website.

To develop a Facebook Connect Page, create it on Facebook as an application. Once you have done that, grab the API and enter it in the Drupal Facebook Module. Once set up, you create your theme by using XFBML. Once you have done so, your process is as follows:

User>Server(XFBML)>User XSS>FB(HTML)>User

Once your Facebook Connect Page is created, you can then take advantage of everything Facebook has to offer. Remember to read its disclaimer policy because Facebook has rules on what can and cannot be used.

One of the cool aspects of using Facebook Connect vs. Canvas is that you can do instant anonymous/authorized registration. Which then will create a local account and authmap automatically. This can be tricky, but you can use the caveat $user->name and $user->mail. And by doing this, you avoid duplicated accounts.

For Support:



Facebook Development


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s