How to Set Up Custom Facebook Page Tabs with Content Your Clients can Control

Please note: This article was originally published on October 19, 2011 but has been updated and republished to reflect changes to Facebook's custom page tab layout for timeline view.

Keeping up with Facebook can be a challenge. It was just a couple of years ago that we published this tutorial on setting up custom tabs on Facebook pages using FBML. In the year following that article, Facebook announced they were deprecating the FBML standard and actually turning off all FBML page tabs by June 1, 2012. So, we spent some time figuring out how to convert our page tabs to the new iFrame standard, and put together this guide based on what we've learned in the process, publishing it in October of 2011. Now, a few months later, Facebook is again making changes as they shift all pages to timeline view. So, we've updated and republished this article to reflect these changes.

The Impact of Timeline View

The changes Facebook is making correspond to their migration of all brand pages to the new timeline view. The new timeline view affects how custom page tabs are integrated. Here are a few significant changes:

  • Wider Content. Content on page tabs was previously restricted to 520px wide, but now content can be up to 810px wide, offering a much larger canvas for displaying content.
  • No More Default Landing Tab. With Timeline, all traffic to a brand's Facebook page will end up on the main timeline, whether or not the visitor already likes the page. Previously, Facebook allowed the page owner to specify a tab to serve as the landing page for non-fans when they visited. This is no longer possible.
  • New Branding Opportunities. Page tabs now provide an opportunity to insert additional branding onto the main timeline page. Each custom page tab can have a 110x74 cover image that can be displayed in the boxes below the timeline's main cover image. There are four boxes, of which one (the "photos" box) cannot be moved or changed. The other three can be replaced with custom imagery through the use of page tabs. You can see how we've replaced two boxes with custom artwork on the LightCMS Facebook page in the image below.

That's an overview of the most recent changes Facebook has made. Now, let's take a look at how you can put together your own custom page tabs.

Create Your Content

First, you need to determine what you want to include on your custom page tab and then create your content in HTML, CSS and JS standards. Whatever content you create, it needs to be no wider than 810px and you should remove any margin or padding around the body of your content so that it fits exactly in the space Facebook provides.

Host Your Content

You can host your tab content anywhere you like, but you must be able to provide secure hosting for your content or Facebook won't allow it. This is one reason that hosting the content on LightCMS is a convenient option. With LightCMS, SSL security is built into the publishpath.com domain and every LightCMS website can be accessed through the secure publishpath URL. You can provide your website's publishpath address to Facebook to retrieve the content without ever exposing the publishpath address to the public.

Of course, another plus for putting your content on LightCMS is that you can utilize LightCMS's content management tools, making it easy for you or your clients to update and change the content on the Facebook tab without having to edit any code. Simply create a design template and apply it to a hidden page on your LightCMS website to establish the page you'll provide to the Facebook custom tab.

Set Up Your Facebook App

To set up a simple page tab, Facebook requires you to create a custom Facebook App. Fortunately, this is actually much easier than it sounds. While there are several Facebook Apps out there that will create the tabs for you, I'm always a fan of doing things myself when possible and, in this case, it's a very simple process so I think it's worth it. Here's a quick rundown of the process:

Go to the Facebook Developer Website
Visit https://developers.facebook.com/apps. You must be logged in to Facebook to continue. If this is your first time to create a Facebook app, Facebook will ask you to authorize the developer tools, which you will need to do.

Click "Create New App"
You'll be asked to provide a name for your app. The name can be anything just to help you remember what the app is for. You don't need to put anything in the "App Namespace" box.

Fill in the Details
Facebook Apps have tons of settings, but there are only a few you need to worry about. When you edit the settings on your app, look for the section called "Page Tab." Click to enable that and you'll see five fields. Complete these fields as follows (see image below for reference):

  • Page Tab Name - put the words you want to use to represent the tab. You can actually override this setting when you add the tab to your page so the name used here isn't critical.
  • Page Tab URL - put the URL to the directory containing your iFrame content. This can't be a URL to a specific file, but must be to a directory or shortcut path. If using LightCMS, this is simply the URL to the page you set up earlier such as http://[yoursite].publishpath.com/facebook-tab
  • Secure Page Tab URL - this is the secure version of your content. If using LightCMS, you simply need to add an "s" to the "http" as such -- https://[yoursite].publishpath.com/facebook-tab
  • Page Tab Edit URL - you can leave this field blank.
  • Page Tab Width - choose either Narrow (520px) or Wide (810px). Wide is recommended.

That's it! Now you can save your changes.

Add the Tab App to Your Page

Now that your app is set up you need to add it to your Facebook page. Facebook has, unfortunately, made this harder than it needs to be. The best way I've found is to paste the following URL into your browser's address bar:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Replace "YOUR_APP_ID" with the numerical ID of your app and replace "YOUR_URL" with the URL to the iFrame content you have created. Accessing this URL through your browser will bring up Facebook's dialog allowing you to choose the page on which you want to install your app.

Adjust the Look

Visit your Facebook page and you should now see the new tab added to one of the boxes below the main cover image. If you have a lot of boxes, you may have to click the arrow at the far right to expand the second row of boxes. Once you click that arrow, you can hover over any box and select the edit menu at the top right of the box to change its position. Remember, the "Photos" box is the only one that can't be moved.

To customize the image used to represent your tab, click the edit menu on the appropriate box and choose "Edit Settings." You'll be able to upload your own 110x74 image to display in the box. You can also adjust the text that is used to describe the tab (overriding the Page Tab Name you set when you created your app). Click your image and you'll be taken to your custom tab, displaying the custom content you created.

Overriding iFrame Height

One problem we ran into is that the content we set up on our custom tab was taller than the iFrame Facebook created to display it. This caused the browser to add scrollbars which really looked messy. Fortunately, there is a way to tell Facebook to increase the height of the iFrame by including some Javascript in the code of the tab page itself. We'll include the code below in case you run into this issue. You would only need to include this if your iFrame content is more than 800px in height.

Include the following in the head of your html document. Replace HEIGHT-IN-PIXELS with the desired height for the iFrame. Be sure to replace it in both locations below.

  1. <script type="text/javascript">
  2. window.fbAsyncInit = function() {
  3. FB.Canvas.setSize( {height: HEIGHT-IN-PIXELS} );
  4. }
  5. // Do things that will sometimes call sizeChangeCallback()
  6. function sizeChangeCallback() {
  7. FB.Canvas.setSize( {height: HEIGHT-IN-PIXELS} );
  8. }
  9. </script>

And include the following just before the closing body tag. Be sure to replace YOUR-APP-ID with the numerical id of your app.

  1. <div id="fb-root"></div>
  2. <script src="http://connect.facebook.net/en_US/all.js"></script>
  3. <script>
  4. FB.init({
  5. appId : 'YOUR-APP-ID',
  6. status : true, // check login status
  7. cookie : true, // enable cookies to allow the server to access the session
  8. xfbml : true // parse XFBML
  9. });
  10. </script>

Tags

Archive

Try it today. It’s Free.

Takes less than 60 secondsNo commitmentNo payment information required

Get Started