How to add a custom tab to your Facebook fan page


Since I led a webinar this week about Twitter and Facebook usage this week for HigherEdHero, I’ve received a lot of questions from folks wanting to know how we added a custom tab to my institution’s fan page. I thought it’d be a worthwhile blog post to show you how we did it, and to see if there are easier ways to accomplish what we have.

We have a “Welcome” tab on our page with some general campus information. It looks like this:

Picture 10

Here’s how to add a similar tab to your institution’s fan page. Keep in mind you must be an administrator of the page you want to add the tab to.

First, search for the FBML app. You can just enter in FBML in the search box on any page.

Picture 1

You’ll want the application called Static FBML. It will look like this. You can click for a larger size image.

Picture 2

Visit the application’s page, which looks like this. You’ll want to say “Add to my Page.”

Picture 3

When you add it to your page, you can choose what pages or applications you want to add the FBML to. You can add it to multiple pages, but be aware that you can only have 1 FBML application on a page, unfortunatly.

Picture 4

At this point, begin editing your page. Find the FBML area and click on the pencil icon to start editing it.

Picture 5

You’ll be given an area where you can title your box as well as edit the content. In box title, enter what you want the text of your tab to say. Don’t worry if you don’t know FBML, you don’t need to. You can put straight up HTML in here, complete with images and more.

Picture 6

Once you’ve got your content in the box (and don’t worry, you can always edit or add more later), it’s time to add it to your page. Go back to your fan page and click on the plus sign (+), which should be the last tab in the row, like such:

Picture 7

When you click the plus sign, you should see all the applications and content you can add as a tab. One of the choices should be the box name you entered when editing the FBML box. Click on it and it will be added to your page.

Picture 8

Click on the tab and if everything’s gone correctly, you should see the HTML content you entered in. Here’s what I see using the HTML I entered a few screens ago.

Picture 9

There you go – you should now have a brand new tab on your fan page you can add all sorts of neat content to. As I said earlier, as far as I know, you can only have 1 FBML app on a page at a time, thus just one custom tab. If you know a better way to accomplish this, please let me know.

Please see the comment from Mark below on how to have more then 1 FBML tab on a page

25 thoughts on “How to add a custom tab to your Facebook fan page”

  1. Just a quick note on FBML Tabs from our research of 912 college and university Facebook Fan Pages:

    58.4% of Pages open to a tab other than Wall (Boxes, custom FBML apps, etc.).

    Pages that open to other tabs averaged 23.78% growth from March 30 – May 30, 2009.

    Pages that open to the Wall averaged 57.63% growth from March 30 – May 30, 2009.

    I’m a big fan of FBML tabs, but believe that institutions should open directly to the conversation.

  2. You actually can have more than 1 FBML tab on your Page. At the bottom of the Edit FBML page, there is a link to “Add another FBML Box”.

    I don’t know if there is a limit or not. I just tried to put 3 FBML tabs on a Page and it worked fine.

    For documentation on FBML, you can go here:
    http://wiki.developers.facebook.com/index.php/FBML
    Please note: not all FBML tags can be used with the Static FBML box. Any tag that requires a Facebook User ID is unlikely to work.

  3. Thanks for the article … I am a less than savvy computer person … very technologically challenged to be precise … but I was able to follow your instructions to add a tab to our Facebook Fan Page (still under construction) … So kudos to you for helping a dope like me figure it out …

    Now the problem is this … I created a Word document and saved it in HTML thinking I could simply copy paste into the FBML box … NO NO NO … Doesn’t work! So, I referred this problem to some of my tech savvy colleagues, but they are having some trouble with it as well … Could you send a snippet of the HTML you used on your “Welcome” tab so that they can get a better understanding of what needs to be done? If that’s not possible, then you could provide some further instruction or resources that might help?

    Thanks again … and I look forward to your next post!

  4. I added the FBML app, but once I go into this tab and try clicking on the pencil, nothing happens (no editing available). The only other option i get is to delete the tab. Any ideas??

    Thanks!

  5. Wow… thank u for the real useful article. really really apprecuates it.

    There is a 1 more advice I need to seek from u. If i want to add a picture or video on to the box i just create. Any tips on how can can do that?

    Thank u so much.

    Lan

  6. This is brilliant – thanks.

    I have the same problem as Lan. How do I add a photo or vid?

    Thanks

    Kathryn

  7. Hi there!

    Thanks for the step by step.

    One thing, if you’re adding this application, you have to go and click “edit profile” to be able to edit your box and add additional boxes. Works like a charm!

    Be sure to adjust the location of where you want your box to show on the menu bar by dragging it to the appropriate positions.

    Thanks again!
    Tiffany
    @virtualpartner or [http:///www.twitter.com/talksocialnet]

  8. Danielle Lawrence

    I am trying to add an address and hours /phone number instead of Founded.. Any suggestions?

  9. Thank you for this! It’s been extremley helpful.

    1 question for anyone out there to answer:

    I’ve added the tab, edited the name … but i don’t really understand computers that well.

    Is it possible to use the HTML to insert boxes into the customised tab?

  10. I have the same problem as Ana. When I click on the pencil, the only option I get is Delete the tab. I tried this on two different pages with the same result.

  11. LaTara Ham-Ying

    I am not able to Edit the page at all! I click he pencil over and over and it is not working

  12. Thank you Mikew, this REALLY made it very simple to add the FBML page. Was battling before I found this and once I did it took a few minutes to set it all up. Thanks!

  13. Thanx for ur support….this time it look so simple for me to add new tab…thats becaz of u…

  14. Ana, Lnda,LaTara,

    I had the same problem as you people. Not being able to edit the FBML. Here is the solution. Go to your page, on the left you will see an option called Edit page. Click on edit page and it will show a long list of things you can edit. One of these will be the FBML.

    Good luck.

  15. Can I use plain html inside the app, or does it need to be fbml? I get nothing but a plain blank white page either way..

  16. This does seem pretty buggy. I added the app, added the tab, found where to edit, but when I submit on the edit page, it just takes me back to my profile with no errors or messages. FBML page is not edited, still blank.

  17. Everyone who is trying to edit by clicking on the pencil icon on the tab – you need to first create the content by going to Edit Page.

    Once you have created the content THEN you click the + sign in the tabs and add your content.

    Unless you are like Aaron and I who are doing this, but the app is not saving the content 🙁

    What’s up with that?

  18. Correction- the FBML will save as edited as long as you have SOME valid HTML or FBML code in there.

    So – if you try and save in the body:

    Text here..

    You’ll get nothing.

    If you put that text into a div then you’ll be golden.

  19. Hi there

    Thanks for the tutorial!
    My question: Is it also possible to put Java Script Tools into a new tab? Or just HTML?

    Thanks in advance
    Christian

  20. I have created 3 static FBML pages. I am having a problem putting the html embedded code of my you tube videos onto my video page.

    Does anyone have instruction?

    Thank you.
    JULIE

Comments are closed.