Add A Custom Tab to Your Facebook Fan Page - Starter Template Included - ProWorks Web Design, Development, and Umbraco Blog

Adding a custom tab to your Facebook Fan page really isn't that hard if you know a little HTML. But if you are daunted by CSS and layout, then today is your luck day. I'm going to give you a starter template to get going with and you can use that to get something up.

The Goal:

Build some HTML/CSS that works within the new 520px width requirements set by Facebook
Add a YouTube video
Not use iFrames

The Process:

1. Get to the admin section of your Facebook Fan Page.

Simply click the "Edit Page" link below your Fan Page photo on the Wall tab:

fb_tab_1

2. Install the Static FBML Application.

At the bottom of the admin area, there is a "More Applications" section.

fb_tab_2

If you're lucky the Static FBML app will be listed like above in the apps you might find useful. If that is the case, click the "Static FBML" link.

If it isn't, then click "Browse More" and search for "Static FBML" or "FBML".

fb_pages_3

Again, click "Static FBML".

When you're on the Static FBML app page, simply click the "Add to my Page" link below the icon in the top left.

fb_pages_4

There will be a popup to select the Page you want to add it to. Find the correct page and click the "Add to Page" button next to it.

fb_pages_5

Now go back to the admin area of your Fan Page and lets add the template.

3. Add content to your tab.

Click the Edit link on your new FBML application:

fb_tab_3

You now should see the edit screen. Edit your box title text which will be the new tab title so keep it short.

fb_tab_4

Now comes the tricky part. Getting HTML and styling into your new tab FBML content area.

Luckily, I have a starter template to get you going :)

Download the html code here: /facebook/proworksStarterKit.zip and copy/paste the code into the FBML textbox. You can also get it from here: http://pastie.org/940569

I'll explain this code below. For now, just paste it in and click the "Save Changes" button.

Lets go back to the admin area of your fan page and get this tab live. The easiest way is to click the "edit" link at the top of the FBML edit page. Now click the "Application Settings" link in the FBML box under Applications. Then click the "remove" link next to "Box:" and the "add" link next to "Tab:" in the resulting popup. It should look something like this when you're done:

fb_tab_5

Now you should see your new tab on your Facebook Fan Page! If you have a lot of tabs you may need to click the >> arrows on the right side of the tabs. You can drag tabs around to reorder them. It should look something like this:

fb_tab_6

4. Customize with your own stuff

OK, so now you have a new tab. First thing to note is that this will not accept all HTML and styling. However, you can add new photos, links, text, or even flash fairly easily.

First thing you'll want to to is add your own image/text to the box on the right. The image needs to be hosted on your server somewhere.Simply edit the <a href=""> to your site URL and change the <img alt="" /> src to an image location of your choice. The ideal image width for the right side boxes in this layout is 168 pixels.

YouTube Video

Changing the YouTube video to your video is actually very easy as well. Simply find the video you want to show and copy the weird text after the "v=" in the URL.

In this case its the "sIFYPQjYhv8" part. Then replace all occurrences of "sIFYPQjYhv8" in the code below (in your tab FBML content).

Save the changes and your have your content in the starter template and you're on your way!

If you want to get adventurous and get other crazy things like Flickr slideshows or Vimeo videos or other cool things, check out the list of blogs by HyperArts on FBML and Static FBML. Its a really good resource.

Thanks and let me know if you have questions or comments below!