Facebook Tab & Canvas Integration for JFBConnect

Showing your site (or parts of it) in Facebook can be a huge boon to getting more traffic and more users. By using the Facebook Tab and Canvas integration features of JFBConnect v3.4 or higher, you're letting your users see your site through Facebook's "walled garden", which adds a layer of trust and also adds enhanced social integration options for better engaging with your users. The below guide takes you through the steps of setting up a Facebook Page Tab and Canvas views for your site and Facebook Application.

Example Page Tab and Canvas App Integration

Facebook Tab Page - SourceCoast's Facebook page loaded from this site using a Reveal page to increase Likes

SourceCoast App Canvas - This site loaded into a Canvas Page

Required Application Configuration

In order to show your site within Facebook you'll first need to make sure you've created a Facebook Application. This can be done by following the initial steps in JFBConnect Configuration Guide.

Once created, you'll need to perform the following additional configuration changes to make sure you're application is ready for viewing within Facebook. In your application settings, go into the "About -> Advanced" area, and make sure the following settings are configured as below.

Please Note: These settings are not available on all applications. Proceed to the next step if you don't see these.

signed_request for Canvas: - Enabled
iFrame Page Tab - Enabled
Develop Using Deprecated FBML Canvas - Disabled

Facebook Page Tab in Joomla

Application Configuration for Facebook Tab

Once your application is configured correctly as above, you're ready to start integrating your website into your Facebook Page. The following additional settings should be configured in your Facebook Application under the "Settings -> Basic" section. Scroll down to the "Page Tab" area and click on it. It will expand to show the following options:

Page Tab Name: This is the default name that will be used for your tab when added to a Facebook Page. This will show up in the left-hand bar similar to Wall, Photos, etc. Ex. "My Site"
Page Tab URL: This should be a full URL to the page of your site you want displayed to visitors on your Page. This can be your home page (http://www.site.com/), your forums (http://www.site.com/forums) or even just a single article view with no extra template modules loaded (http://www.site.com/index.php?option=com_content&view=article&id=12&tmpl=component)
Secure Page Tab URL: If you have an SSL certificate for your site, this should be the same URL as specified above, but with https instead of http.
Page Tab Edit URL: This URL is not required.

Note: As of October 1st, Facebook will require that you have an SSL certificate for your site and that the Secure Tab URL setting is filled in. Obtaining an SSL certificate can take under 15 minutes and can cost under $20. Learn more on how to Get an SSL Certificate for Facebook.

JFBConnect Page Tab Configuration

After your Facebook Application is setup, there's just a few settings for you to configure in JFBConnect. First, go to the "Page Tab/Canvas" section, and then click the "Application as Page Tab" setting. In here, you'll be able to configure your Reveal Page (if you want one) and how your site looks to users through Facebook.

Display Template: This setting lets you set a different template to use when your site is viewed in a Facebook Page. Since applications in a tab are limited to a width of 520px, this lets you use a specific template to accomodate these dimensions. Additionally, with a separate template, you can load different modules in different positions, which helps to let you completely customize the look of your Facebook Page.
Reveal Article ID: When set, the Joomla Article specified with the ID here will be shown until the user Like's your page. Once Like'd, the URL set in the Tab URL or Secure Tab URL's set in the application will then be shown.
Enable Automatic Resizing: When enabled, JFBConnect will attempt to constrain your template to 520px and instruct Facebook to grown the Page area to the full height of the content shown from your page instead of showing scrollbars. This does not work with all templates, but when it does, generally creates a better user experience.

Adding Your Application To Your Facebook Page

When your Facebook application and JFBConnect are configured properly, you see the following text at the top of the Page Tab configuration area:

Your Page Tab application appears to be setup properly. To add it to your Facebook Page, Click Here.

Click the link in that text. A popup will appear where you can select the Facebook Page you wish to add your application to.

You will need to already be logged into Facebook with an administrator of the Page you want the application shown on. The popup will ask you to log into Facebook if you aren't already logged in.