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>

29 comments (Add your own)

1. Nickolas wrote:
This is just what I've been trying to do more lately, creating engaging Facebook pages for my clients. I've just created one (custom build- hand coded), but it took quite a while using a third party FB page/tab creator (MANY QUIRKS) and not very tech savvy. I've always thought this could work using light, given that it is easy for clients to make changes... but I haven't tried to create one yet. You've given me new inspiration to go ahead and make that happen. One question: Is EF in the process of creative some workable templates that we could use ... maybe 2-3 for starters that could speed some things up for me?

Thanks, Nickolas

Fri, October 21, 2011 @ 3:46 AM

2. Brian B wrote:
Is there a way to easily add a 520 px wide page to an existing template? In addition to home, inside, blog, login, etc., a "Facebook welcome tab" friendly page layout to create the hidden page content for my client to edit.

Many thanks in advance.....

Fri, October 21, 2011 @ 6:37 AM

3. Tim wrote:
Nickolas and Brian,

Thanks for the feedback. To answer both of your questions, we don't currently have plans to provide Facebook page tab templates as this is a pretty specialized application that's beyond the scope of what our LightCMS templates are designed to do. This tutorial was designed to help demystify the integration with Facebook but it does require some HTML/CSS know-how to be able to create the necessary template yourself.

That said, if you need help with that part, there are a ton of service out there who can convert your PSD designs to HTML or you might even post to the LightCMS forum to see if anyone there would be able to offer their services.

Fri, October 21, 2011 @ 9:27 AM

4. Nickolas wrote:
Got it Time and thank you. Another thing that may help when it comes to hosting, is the option to offer a 5 page hosting plan. Is that something you guys could offer us?

Fri, October 21, 2011 @ 2:57 PM

5. Tim wrote:
Hi Nickolas. We can only offer the standard plans listed on our pricing page. Sorry that I can't be of more help there.

Fri, October 21, 2011 @ 3:32 PM

6. Crystal Kelly wrote:
FYI - I've been working on a flexible design solution that uses media queries @media. It is my understanding that new Facebook tabs using an iFrame will recognize an @media for a 520px width version. I'm working on one now - will post a link here hopefully before Thanksgiving.

Light thank you for the screen shots, FB has changed the interface since the beginning of the year and I was not sure how to get around on the App page in the developer section.

My next quest is using the Google Analytics - Tracking Across iFrames code so that my clients now how many website visits/users came from FB.

Fri, October 28, 2011 @ 2:39 PM

7. Robert Williams wrote:
I recently launched Tab Projector. It is a Facebook Tab Creator using Light. I learned a great deal along the way as it was quite challenging. Would be glad to team up with anyone on projects... www.tabprojector.com

Mon, November 7, 2011 @ 5:10 PM

8. Robert williams wrote:
I have 2 templates, 1 of which has 6 colors and growing. Contact me for details...

Tue, November 8, 2011 @ 2:31 PM

9. Tim wrote:
Robert, that's a very interesting and creative use of LightCMS. Thanks for sharing about your project!

Wed, November 9, 2011 @ 9:36 AM

10. M wrote:
Dear Tim,

i am developing a facebook tab application and your article helped greating in achieving it. although i am not stuck at point that the page tab is not accessible from the facebook app on the ipad/iphone. is there any specific setting required to achieve it.

awaiting your expertise.

Tue, July 31, 2012 @ 7:10 AM

11. Rick Gladwin wrote:
This worked like a charm! Thank you so much! There are other tutorials out there, but with the rate Facebook has been changing their API, methods and best practices go out of date so fast and stop working!

Cheers.

Tue, July 31, 2012 @ 10:51 AM

12. Darren wrote:
Hi,

Great tutorial, this is exactly what i was looking for but i am still having problems with the height on the tab, any ideas ?
https://www.facebook.com/DeWAR.ie/app_333149853440740

Wed, August 15, 2012 @ 9:17 AM

13. Abhay Bajaj wrote:
This was great help to us. Started implementing what you've mentioned. An attractive facebook page, like the one in the aforementioned picture helps get a lot of likes. We focus more on the cover profile combo, and the tab apps!

Wed, October 3, 2012 @ 10:09 AM

14. Farhan wrote:
Hey Darren,

I fixed it like this, maybe this will help you too.

Just replace the http in the call to Javascript SDK with a https.

and i checked that you have included px with the height, i think that is the culprit too.

Hope it helps.

Sat, November 10, 2012 @ 12:21 AM

15. Sumeet wrote:
Thanx for the article. its awesome.

I have a query, Can you please tell me how can I override the pagetab name while adding it to the page?

Thanking you in advance.

Tue, November 20, 2012 @ 7:36 AM

16. Tim wrote:
For those who want to engage your Facebook fans easily, check out this simple tool called Tint (http://tintup.com) .

It lets you aggregate any social feed (even social feeds you don’t own) and lets you embed it into your Facebook page, giving your fans dynamic content to engage with.

Check out how this Facebook Page did it with inspirational quotes by aggregating from ‘StartupQuotes’: https://www.facebook.com/teamtint/app_394630527280041

Wed, November 28, 2012 @ 7:28 PM

17. dhotch salevo wrote:
im satisfied in the service of all internet server.but my problem is my facebook tab in google chrome.very wide and taller.set the original settings in my lop top RV510.thanks

Sat, January 12, 2013 @ 8:18 PM

18. Jonathan wrote:
I personally use PageYourself to customize my Page, it's really nice, all the more so as it links the tabs together to make it look like a real website! They call it the f-Site. Have a look if you like http://www.pageyourself.com/

Wed, February 6, 2013 @ 7:20 AM

19. Pete wrote:
Is there a way to set this up for a client, without requesting their Facebook login details, and "pretending" to be them?

As I see it, this only appears on the developers Facebook page.

Thu, May 2, 2013 @ 10:47 AM

20. Tim Wall wrote:
Pete,

You would need to have the client add you as an admin for their Facebook Page. Then you should be able to set everything up while logged into your own Facebook account.

Thanks,
Tim

Fri, May 3, 2013 @ 10:40 AM

21. wrote:
Okay I did everything you article says and I get the icon to appear on my page, but the link doesn't work. When I click on it nothing happens and nothing shows up. And I don't know why!

Fri, May 24, 2013 @ 1:29 PM

22. garry wrote:
Awesome Tab - HTML / WYSIWYG tab for your facebook pages powered by Redactor powerful editor..,.

http://awesometab.tumblr.com/

Sun, June 9, 2013 @ 11:13 AM

23. Jesus wrote:
HI!
Great tutorial.
Could you please explain where we can change the content to users that are not following our fanpage.

I mean the classic message who say... "Like My Page!"

Thank you!

Tue, June 25, 2013 @ 11:24 AM

24. Claude wrote:
Great tutorial. Finally have a tab on my FB Fan Page. The Tab url goes to: Not to When I click on it I get a generic webpage that states "Page Not Available: A general error has occured".
Thanks

Wed, August 7, 2013 @ 4:41 PM

25. Sean wrote:
Hi,

I would like to create a tab on my FB page and link my FB album page to it (I sort my contents based on photos in albums). I used the steps in this tutorial. I created my own app and it is now in my FB page, but when I click on the app, it goes to the app page but it is blank! No error message in chrome or firefox. Only in internet explorer I receive this error message:

This content cannot be displayed in a frame
To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.

Would you please let me know how to solve this problem?

Thanks

Thu, October 3, 2013 @ 3:51 PM

26. G.Campos wrote:
I got this error message after using that special url to get the tab added to my page:

An error occurred. Please try again later.

API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.

What now?

Fri, October 4, 2013 @ 9:26 PM

27. Compliannz wrote:
Thanks for sharing your knowledge on FB Costume tab

Wed, January 15, 2014 @ 1:37 AM

28. hasan hameed wrote:
I am unable to override the tab url via next=YOUR_URL. Its keep showing me the page which I provided in the "Page Tab Url" field in the "App settings".
Somebody knows the fix?

Thu, May 15, 2014 @ 8:25 AM

29. fgd wrote:
dgfdgfdg

Fri, September 26, 2014 @ 6:18 AM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free