ProWorks Blog

Add A Custom Tab to Your Facebook Fan Page - Starter Template Included

By  |  Friday, April 30, 2010  |  , , ,  |  36 comments

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.

fb_tab_7

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!

36 comments for “Add A Custom Tab to Your Facebook Fan Page - Starter Template Included”

  1. Posted 6/13/2010 at 10:47:26 AM

    It worked perfectly! Thank you for posting this. :)

  2. Posted 7/7/2010 at 4:32:29 AM

    [...] you could use to attract fans to your brand’s landing page and to make them return repeatedly.Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your [...]

  3. Posted 7/7/2010 at 5:03:52 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  4. Posted 7/7/2010 at 8:39:49 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  5. Posted 7/7/2010 at 9:06:18 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  6. Posted 7/7/2010 at 9:21:22 AM

    Thanks for the links!

  7. Posted 7/7/2010 at 10:15:24 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  8. Posted 7/7/2010 at 11:07:18 PM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  9. Posted 7/10/2010 at 9:48:46 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  10. Posted 7/18/2010 at 1:37:24 PM
    Gravatar of Luis

    Thanks.

  11. Posted 7/18/2010 at 11:07:24 PM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  12. Posted 7/19/2010 at 6:52:57 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  13. Posted 9/8/2010 at 12:52:45 PM
    Gravatar of Nicole

    Ohh please. I know my way around a bit of HTML and FBML bus CSS and uploading the style sheet is a bit beyond me!

    Let me know when it is all sorted. My page looked good in Firefox but a bit shoddy in IE!!

    Thanks for your help,

    Nicole

  14. Posted 7/21/2010 at 3:17:04 PM

    Thank you so much!


    You're pretty awesome for putting so much work into this.

  15. Posted 7/21/2010 at 3:17:59 PM

    Thank you so much! You're pretty awesome for putting so much work into this.

  16. Posted 7/22/2010 at 7:54:57 AM

    Glad you found it useful!

  17. Posted 9/6/2010 at 1:10:44 PM
    Gravatar of Nicole

    Hi there,

    Tried using your info to start a layout and edited it (in firefox) to display all the info I wanted. I am having trouble when other people are viewing it in IE.
    Instead of displaying the containers side by side they are just putting them one after the other as the coding appears on my FBML editing.

    Have a look at the link..

    http://www.facebook.com/home.php?#!/pages/Melton-Mowbray-United-Kingdom/Regal-Cinema-Melton-Mowbray/145121545527568?v=app_10442206389&amp;ref=ts

    Is the template meant to work in IE?

  18. Posted 8/25/2010 at 9:10:50 AM

    [...] Ajouter un onglet personnalisé à votre page Fan Facebook (Starter modèle inclus) Comme quelques-uns des tutoriaux ci-dessus, celui-ci vous apprend à intégrer un onglet personnalisé dans votre page fan Facebook. Mais ce tutoriel est un peu plus détaillé que les précédents, en expliquant comment construire HTML et CSS qui adhère à la nouvelle 520-pixel de largeur exigences fixées par Facebook, comment ajouter une vidéo YouTube et comment éviter d&#8217;utiliser des iFrames. En outre, il contient un modèle de démarrage de code avec des commentaires. [...]

  19. Posted 9/7/2010 at 9:35:03 AM

    Hmm, it appears to be an issue where IE isn't recognizing the embedded styles.

    We may have to add the styles directly to the markup to get it to work.

  20. Posted 2/2/2011 at 12:43:11 PM

    @lui

    Facebook is moving from FBML to iFrame for custom tab apps. However, the Static FBML App isn't going anywhere.

    See:

    http://www.hyperarts.com/blog/how-long-will-static-fbml-be-supported-by-facebook/

  21. Posted 1/31/2011 at 12:52:16 PM

    FYI,

    I found this article about Custom Tabs and IE 6-8:

    http://www.hyperarts.com/blog/static-fbml-external-stylesheet-css-styles-wont-work-internet-explorer/

    "If you want your CSS styles on your Facebook Custom Tab to work with Internet Explorer / IE 6, IE 7 or IE 8, you MUST use an EXTERNAL stylesheet."

  22. Posted 9/3/2010 at 8:31:47 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  23. Posted 11/4/2010 at 12:33:58 PM
    Gravatar of Jonathan

    I don't seem to have the "edit" next to any of the apps on my page... what should I do?

  24. Posted 10/26/2010 at 12:43:22 AM

    according to facebook, they'll be facing out fbml soon. you're better off 3rd party using custom tab applications. http://socialmediafunk.com is one of them. there's more out there of course. but i find this one easy to use and its free.

  25. Posted 10/29/2010 at 2:29:02 PM
    Gravatar of Faisal Muhammad

    Thanks for your kind help
    but actually i have problem, i added the application insert image to the FBML, but there was no pencil coming that shows add to wall. I think the problem is in Edit FMBL setting ,,, where tab showing but Box not showing. I also checked other applications ,, they also didnt show ,, Box. Only disscussion Tab showing Box.
    Please tell me whats the reason, i cant add this stuff to my wall

  26. Posted 4/26/2011 at 10:46:14 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Como alguns dos tutoriais acima referidos, este ensina como incorporar um layout personalizado em sua página de fãs no Facebook. Este tutorial é um pouco mais detalhado do que os anteriores, explicando como construir o HTML e CSS (que adere ao novo 520 pixels de largura) requisitos estabelecidos pelo Facebook , como adicionar um vídeo do YouTube e como evitar o uso de iframes. Além disso, ele contém um código de modelo inicial com comentários. [...]

  27. Posted 3/28/2011 at 10:48:00 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  28. Posted 4/28/2011 at 11:34:30 AM
    Gravatar of cking

    thank you so much! i was able to give our university fb page a facelift!

  29. Posted 5/31/2011 at 10:57:47 PM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  30. Posted 5/18/2011 at 12:26:33 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) [...]

  31. Posted 5/18/2011 at 9:06:25 PM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) [...]

  32. Posted 5/25/2011 at 6:13:26 PM

    As I understand it fbml isn't used anymore. Can you direct me to info on adding a custom tab as it is now (May 2011)?

    Thanks,
    Sylvee

  33. Posted 6/3/2011 at 9:35:38 AM

    Hi Sylvee,

    Well, if you don't have any programming or design chops, that is something ProWorks can help you with :). Just contact us here: http://www.proworks.com/company_contact.php

    If you are more of a DIY person, then check out this article. It's pretty good:

    http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/


    Thanks,
    Jason

  34. Posted 7/12/2011 at 7:41:22 AM

    [...] Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments. [...]

  35. Posted 12/29/2011 at 6:59:00 AM

    [...] Static FBML: Using External Style Sheets for CSS 8 Essential Apps for Your Brand’s Facebook Page Add a Custom Tab to Your Facebook Fan Page (Starter Template Included) Facebook Best Practices for Non-Profit Organizations How To Create the Perfect Facebook Fan Page [...]

  36. Posted 8/10/2012 at 12:11:59 PM

    For some reason I can't do this after 2 attempts. Will keep reading and experimenting

Post a comment

Comments closed

Need help?

Contact ProWorks today!