How To Create A Custom Tab For Your Facebook Page
July 18th, 2010
Ever wonder how to make a custom tab for your Facebook page? In this tutorial, I’ll show you how to do just that using the the app. Adding a custom tab is actually quite easy, I’ll have you up and running in no time.
Getting Started
Before we get started, I’ll assume you have a Facebook page. If not, you can setup a new Facebook page for your business, service, band, etc… over at . Click on the + Create Page button and follow the on screen instructions. Once you have your page setup, we’ll move onto adding the Static FBML app.
Static FBML App
The app allows you to add a custom tab to your Facebook page. The content for the tab can be designed using static HTML. Make sure you’re logged into your Facebook account and navigate to the page. Once you’re there, click on the Add to my page link, which is located under the profile image (top left corner).
Once you click the Add to my page link, an overlay should appear with a list of all your Facebook pages. If you only have one page, it should appear on it’s own. Click the Add to page button next to the page you want to add the tab too. Once you add your page, click the Close button to hide the overlay.
Adding The Tab To Your Page
Head over to your Facebook page and click the Edit Page link under the profile image (top left corner). On the edit page, scroll down to the Applications section and locate the FBML – FBML application. Click the Edit link under the FBML Application section. This will load a new page with two fields: Box Title and FBML.
Box Title is the title for your tab. Enter the name for your tab here. I’d recommend trying to keep it short and sweet. In the FBML section, paste the HTML for your custom tab. You only need to paste in the code that would appear within the <body> of a regular HTML page. See below for a basic example:
<h2>This is a sub-title for my tab</h2> <p>This is some copy about my tab</p> <p><img src="image.jpg" width="300" height="300" alt="tab image" /></p>
Once you are done entering your code, click the Save Changes button. To head back to the Edit page, click the (edit) link near the top left corner of the page. Once you get back to the edit page, you’ll notice the FBML – FBML application title has changed to Your Tab Name – FBML. That’s a good thing, it means it worked :)
The last step is to add the new tab to your page. To do this, on the edit page click on the Applications Settings link under your new Tab application. An overlay will appear with two options: Box and Tab. Box adds your tab to the Boxes tab on your page. I’d recommend removing that from Boxes. The second option, and the one you need to tweak, is the Tab setting. It should read available, click the (add) link next to available and you’re done. Head to your page and you’ll see your new custom tab.
Adding Multiple Tabs
If you’d like to add more than one tab, it’s quite easy. Go back to the Edit page, and head down to the FBML application section. Click the edit link which will load your current custom tab. At the bottom left corner of the page, there is a link titled Add another FBML box. Click this link to add another custom tab. You’ll notice it adds a new box to the list in the bottom left corner. Simply click the edit link next to the new box to edit it. Once you are done, you can add the second tab the same way that you added the first one to your page. That’s it, that’s all, feel free to leave questions in the comments section.
Print This Post
Styling a Custom Facebook Tab | Cardeo
[...] until now, I was under the impression that you had to do all your styling inline when building a custom Facebook tab. Rejoice! Today I discovered there is another way to do the styling which is way less [...]
September 15, 2010 » 12:04 am