God isn't bland. The Church shouldn't be, either.
Custom Facebook Tabs: Why Not?

Facebook now makes it easier than ever to make custom tabs for your Facebook Page. After avoiding them like the plague for a while, I decided to jump in and see what they hype is about.

No more FBML code knowledge needed. Now it’s all based on iFrames.

End result? I’m sold.

I recently put together a Facebook Page for The Chapel’s children ministry – TGA Parent Connection. It’s a page that serves as a hub for parents to connect, find out what we’re teaching their kids, and see resource suggestions.

Our children’s ministry leadership wanted to be on Facebook, for the social aspect, but also wanted to be able to share a ton of resources. In order to keep these organized, I suggested custom tabs.

Check it out: TGA Parent Connection

Quick Tutorial

Here’s the steps to follow to create your own custom Facebook Tabs.

1. Create your custom html webpage, and upload it to your server.

This will be the page that will be displayed within your custom FB tab.

<!--BEGIN NO SCROLLBARS SCRIPT -->

<script type="text/javascript">

FB.Canvas.setAutoResize( 100 );

</script>

<!--END NO SCROLLBARS SCRIPT -->

2. Create a new app on the Facebook Dev’s site.

  1. Go to https://developers.facebook.com/apps
  2. Click on “Create New App.”
    new-app
  3. Name the app. Click “continue.”
    fb-tab-01
  4. Once on the “Basic Info” page, provide a description. You can also upload an icon and a logo. The icon is important because it’s the image found in the list of tabs on your Facebook page. This should be all you have to fill out.
    fb-tab-redux-02
  5. Click “Save Changes,” and then look at the tab on the left side of the page that says, “On Facebook,” and click it.
  6. You are now on the Facebook integration part of this process. Fill out the form using the following guidelines, and click “Save Changes.”
    fb-tab-redux-01 Canvas URL: The directory where the file you uploaded is located, NOT the name of the file. The URL must have a trailing slash. iFrame size:Auto-resize unless you want scrollbars. Tab Name: This is what you want the tab to be called.

    Tab URL: The name of the file you uploaded, NOT the path.

3. Add your new tab to your Facebook Page

  1. Click on the tab, in the left column, that says “View App Profile Page.”
  2. Add the application you created to your Facebook Page. This is just like adding any Facebook application. Click on the link on the left under the profile image that says “Add to My Page.”
    fb-tab-04

4. Go to your Facebook Page and see your new tab!

Check out your Facebook Page and see the new tab in the list under the Page photo – complete with the icon you uploaded.

Some more goodies:

  • Click the “Edit” link at the bottom of your Page’s tab list, on the left, and you can move the tab higher up in the list, but not higher than “Wall” and “Info.”
  • You can also make your custom tab the default landing tab when folks come to your Page by going to Edit Page > Manage Permissions > Default Landing Tab.
  • Bring attention to your new tabs by adding a tease to your Page’s profile pic. See our example.
  • I used Google Webfonts for some fonts on my custom pages. Really easy.

Why Not?

What do you think? Are you already doing this? Share your examples, below.

Share on TwitterShare on TumblrShare via email


  1. Tom Jamieson (Reply) on July 14th, 2011

    Great tutorial. thanks for sharing!

  2. Eric J (Reply) on July 14th, 2011

    Turn off secure browsing?
    We can’t display this content while you’re viewing Facebook over a secure connection (https).
    Would you like to temporarily switch to a regular connection (http) to use this app?
    You will have a secure connection upon your next login.

    I get that error, personally i am not going to click to turn off secure browsing, you might want to get an ssl certificate, digicert which facebook uses is quite affordable http://www.digicert.com/.

  3. Steve Spillman (Reply) on July 29th, 2011

    Cleve,
    Thank you! We’ve been usinf a 3rd party app I’m not impressed with. Thanks for saving me hours of digging, reading and head scratching. You’ve also probably saved me from a few more expletives on my record.
    Love what you guys do … mostly love why you do it.
    In Him,

  4. Aaron Burrows (Reply) on April 26th, 2012

    Facebook will be requiring all apps to have a secure version of their app later this year. This is an important consideration for churches, because secure hosting/SSL certificates are an additional cost that may not have much benefit for a church. (Unless you’re a larger organization, or you do a lot of private/financial transactions on your site.)


Connect with Facebook