Adding a Custom Facebook Static FBML Tab

Adding a custom tab to your Facebook Page will allow you to better brand your page and tie it into your overall Internet branding.  If you haven’t yet created your Facebook Page, check out the Creating a Facebook Page post.

To add a custom tab to your Facebook Page you will want to add the Static FBML application to your page and then enter your FBML, FBJS and styling code.  A custom Facebook tab using the Static FBML application can be very simple to quite complex.  The following video steps you through the process of adding the Static FBML application to your Facebook Page and how to then edit this tab and integrate it into your Facebook Page. I’ve also included a checklist and some sample FBML code below the video.

httpv://www.youtube.com/watch?v=3Ph_ry7KYmI

If you prefer the checklist approach, you can follow these steps:

1. From the “Wall” tab of your Facebook Page click the “Edit Page” link on the left, just below the page’s profile picture.
2. Next, scroll to the bottom of the edit page and click the “Browse More” link below “More Applications”.
3. In the page that is displayed, type “Static FBML” into the Search Apps box on the upper left of the screen and hit .
4. A list of applications will be listed.  Click on the “Static FBML” label or icon.
5. You now are on the Static FBML Facebook Application Page.  Below the page’s badge in the upper left of the screen, click on the “Add to my Page” link.
6. A list of your pages will be presented.  Click the button for your page and then close the page selection screen.
7. The easiest way to get back to your page to edit this new application is to hit the “Home” link on the top right of the screen and then the “Ads and Pages” link from the left sidebar.
8. You should be on the edit page screen, if not click “Edit Page”.  Now scroll down until you find the “FBML – FBML” application in the list.  At this point, since we want a custom tab, click on “Application Settings” and remove the box and add the tab.
9. Next, click the “Edit” link for FBML – FBML to bring up the edit screen.
10. Give the tab a name by specifying it within the box title input area, replacing the current “FBML” text.  Something like “Home” or “Welcome” works well.
11. Next, enter your FBML, FBJS, CSS… code and click .  One thing to keep in mind is that, unlike a typical web page, you are only including the “body” component in the tab, that is, don’t include , , or tags as the custom Static FBML tab you are creating is within a web page and these tags are already present.
12. Finally, to see your handiwork click on the page’s name located in the top left of the screen and navigate to your new tab.

That’s all there is to adding a custom tab to your Facebook Page!  Here is some FBML code you can use to start playing around with this great application:

When creating your custom tab make certain to keep the environmental constraints of Facebook in mind.  The most critical of these, other than that noted in Step 11, is probably the 520 pixel width restriction that will be pushed in the first half of 2010.  More considerations are laid out in the “Creating a Custom Static FBML Facebook Page” post along with links to other resources that will help you get more fancy in your Facebook Page development.