Columbus, Ohio SEO Expert | Jacob Stoops

How to Create a Custom Tab on Your Facebook Business Page

Post Comments
0 Comments

Today we’ll address a question that I get a lot, “How can you create a custom tab on your Facebook Official Business page?” I think it might be more helpful to you if you can see a step-by-step screenshot of the process – which is what I’ve done (using a work Facebook account).

As a pre-cursor to this article, you must actually have a Facebook Business Page. If you haven’t already created one, then go back and check out my article entitled “Creating a Facebook Business Page & Promoting It Step by Step.”

If you’ve already got an Official Business Page, let’s jump right into getting that custom tab built out using the Static FBML application.

Step #1: Selecting Page to Manage

Sign in to your Facebook account, then find the “manage pages” link under your “Account” tab. One thing to keep in mind – you must be an administrator of a page in order to add a custom tab to it.

Creating a Custom Tab on Your Facebook Business Page - Step #1a

Then, select the page from the “Pages You Manage” pop-up that you’d like to add a Custom Tab to.

Creating a Custom Tab on Your Facebook Business Page - Step #1b

Step #2: Finding & Adding Static FBML App

Once you arrived at your page, use Facebook’s search box to search for the Static FBML app. This application will add a tab/box to your Official Facebook page which will allow you to render HTML or FBML (Facebook Markup Language) for enhanced Page customization.

Creating a Custom Tab on Your Facebook Business Page - Step #2a

Once you’ve arrived at the Static FBML Application page, click “Add to my Page” and then you’ll be prompted to select the page you’d like to add the application to.

Creating a Custom Tab on Your Facebook Business Page - Step #2b

Once you’ve added it to your page, you should be able to see it in place.

Creating a Custom Tab on Your Facebook Business Page - Step #2c

Step #3: Managing FBML App

Once you added the app and check to see if it’s in place, you’ll want to venture back to your Official Facebook page and click the “Edit Page” link in the left-navigation. After that, you’ll want to click “Applications” from the left-menu of the ‘Edit Page’ section.

Creating a Custom Tab on Your Facebook Business Page - Step #3a

Find the FBML application, and click the “Go to Application” link.

Creating a Custom Tab on Your Facebook Business Page - Step #3b

You’ll now be taken to the area where you can edit your FBML tab.

Creating a Custom Tab on Your Facebook Business Page - Step #3c

Step #4: Editing FBML App

You can now add your HTML or FBML code to the tab. Below is a test example of what I added. You can see that I’ve renamed the tab and added some HTML text.

Creating a Custom Tab on Your Facebook Business Page - Step #4a

Let’s go ahead and re-visit our Official Facebook page to see if anything has changed. You should see (if you’ve made the edits I made) that your custom tab’s heading has changed, and when you click the tab you should be able to see the HTML that you’ve entered.

Creating a Custom Tab on Your Facebook Business Page - Step #4b

And success! Our test code has been added to the tab.

Creating a Custom Tab on Your Facebook Business Page - Step #4b

Step #5: Removing Tabs

In order to make room on your Official Facebook page, you may have to remove some existing tabs. To do this, go back to the “Edit Page” section, click “Applications,” find the application you’d like to remove, click “Edit Settings” under that application, and from there you should be able to remove it as a tab (if it is on your tabbed menu already).

Creating a Custom Tab on Your Facebook Business Page - Step #5a

Step #6: Adding Multiple FBML Tabs

In addition, if you’d like to add multiple FBML tabs, simply click “Add another FBML Box” in your Edit FBML administration area.

Creating a Custom Tab on Your Facebook Business Page - Step #6a

Step #7: Customize Away!

From here, you’re only limited by your imagination! I’ve provided an example of the custom tab on the page I’ve created for the SEO Department at People To My Site. I didn’t get too dynamic (although you can), but just stuck with simple HTML and added some images (hosted elsewhere).

Creating a Custom Tab on Your Facebook Business Page - Step #6a

Important Things to Remember

Here are some important things that you’ll need to remember about the Static FBML application – or else you may run into problems with getting it to work like you want.

  • The Static FBML is only for Official Pages, and not personal profiles.
  • All styles, scripts, images, fonts are anything else you wish to add or customize should be hosted another server,
  • Stick to using an external style sheet (CSS) at the top of your FBML code to avoid any rendering issues with Internet Explorer.
  • Facebook allows a maximum of 6 tabs on Pages. You can re-order the tabs to display your preferred 4 tabs (the Wall and Info tabs can’t be moved or removed), but a total of 6 is all you are allowed.
  • The max width for your tab is 520 pixels. I also tested height and was able to upload and view a document as large as 2500px (although I’m not sure what the exact height restrictions are, if any).
  • Facebook requires a user action to trigger any JavaScript (i.e. you can’t have JavaScript run when the tab loads without that user action). Also, Facebook has its own proprietary version of JavaScript — FBJS (Facebook JavaScript) — and you should become familiar with this and use it in your Static FBML.

Helpful Resources

Here are some resources that I found particularly helpful when research how to add an FBML tab, as well as problems and restrictions:

I hope this article helps you, and please feel free to add something to the discussion from your experiences in creating a custom tab with the FBML application. I’ve surely not quite covered everything, and I always love added more content based on insightful visitor comments!

GD Star Rating
loading...

This entry was posted in Social Media and tagged . Bookmark the permalink.

Jacob Stoops

About the Author

is an SEO professional living in Columbus, Ohio and working for Rosetta Marketing. He's been working in the SEO industry since 2006, and has been blogging since 2009. Learn more about , a Columbus, Ohio SEO Expert.

Comments & Social Reactions

  • http://www.erikapryor.com Erika Pryor

    Jacob,
    Thanks for the great post. I don’t know as much as I would like when it comes to anything coding related, and felt frustrated when I tried to add a customized tab previously. I’m thinking the easy to follow step-by-step directions give me hope. Thanks for such a great piece. I’ll keep you posted on my progress.
    Erika

    GD Star Rating
    loading...
    • http://www.agent-seo.com/ Jacob Stoops

      No problem Erika! If you need any help, feel free to ask.

      GD Star Rating
      loading...
  • Andrew Moon

    Jacob,

    Thanks for the great info. This will come in handy for myself and several clients.

    Andrew

    GD Star Rating
    loading...
  • Aaron

    Terrific Post! I am really into social media right now (like everyone else out there!), especially Facebook Marketing and FBML. It can be hard to keep up to date with such a fast changing innovative topic but I manage to do it through the fan page factory (http://facebook.com/thefanpagefactory ?) and blog posts exactly like yours. Tips and tricks rock. I am trying to learn as much as possible to put myself ahead of the curve. So thank you again!

    Enjoy!

    Aaron

    GD Star Rating
    loading...
  • Aaron

    oh and also, theres new tools for codeless pages. like lujure.com (what i used) you can design a custom page yourself and it codes it automatically for you! Have you heard of these tools?

    GD Star Rating
    loading...
    • http://www.agent-seo.com/ Jacob Stoops

      That sounds like a fairly easy and straight-forward tool. Unfortunately, I’ve had to learn the hard way with that sort of stuff so I’ve never really had any experience with that particular tool. Do you know of a similar tool that is free? Thanks.

      GD Star Rating
      loading...
My Work
Agent SEO Portfolio | Ohio SEO

Connect with Me

803 Subscribers & Followers
  • Subscribe to the Agent SEO RSS Feed
  • Follow Jacob Stoops on Twitter
  • Follow Jacob Stoops on Facebook