Facebook Page Tabs

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, 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.

The Autotune Configuration Tool, part of the JFBConnect installation process, will automatically configure your Facebook Application to allow for a Page Tab or Canvas.

Facebook Page Tab in Joomla

Please Note: Facebook requires 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 using Autotune, 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.

Social Stream
Refer and Earn

Like our extensions? You're not alone! That's why they're used on tens of thousands of websites. Now you can earn 20% of any sale you refer to SourceCoast.com.

We provide excellent documentation, well laid out sales pages and great support. All you need to do is spread the word and we'll take care of the rest.

Learn About Our Affiliate Program