a-o-n-c-1.jpg

I was always impressed with the fan page of Chris Guillebeau’s The Art of Nonconformity [his blog]. It was one of the first few fan pages that used the power of Custom tabs in Facebook Pages. What I loved about this fan page was that it first loads the Welcome Page for those users who aren’t fan at the moment. Check out the page (link mentioned above) and you’ll know what I’m talking about. Lets find out that how one can add Custom Tabs on Facebook Fan page.

1. Go to Static FBML application

This is the application that helps in creating the custom tabs. This application renders HTML & FBML (Facebook markup language), so pretty much gives enough control to the user to customize the page the way they want. We’ll learn about the customization in upcoming posts.

2. Click on Add to my Page


static-fbml.jpg

As soon as you click on this, it’ll give you the option of selecting the page where you would like to add this application. Just select the right page and click on Add to page. Nothing much will happen, click on Close.

3. Edit your tab page

edit-static-fbml.jpg

At this point, you should continue editing your fan page. You’ll notice there will be a new application that you would need to edit. This application comes from “Static FBML” and once we click on “Edit” (as shown in screenshot) – we’ll get the ability to customize the tab page.

4. Customize the tab page

facebook-tab-page.jpg

As you can see that I’ve used the HTML tags to create a “test” Welcome Page. Of course, you’d need to know HTML or FBML in order to publish anything on these pages. Either you can use a free WYSIWYG web page editor or if you are comfortable with WordPress editor, then simply write your message and then go to HTML editor section and use the code.

5. Adding the tab on the Fan Page

welcome-tab.jpg

Once you are done with designing your custom facebook tab page. You would want to show it on your fan page. You will need to visit the page as administrator and click on the “+” icon at the right hand side of all the tabs. You’ll see your custom developed page in the list, just select it and you are good to go!

Note : You can always drag and drop the tab to change its position. For e.g. you may want to have this tab as the 3rd tab instead of 7th, then you just need to drag it on the left hand side till it comes to the third position.

6. Loading the custom tab at first

edit-wall-settings.jpg

Again edit the page and in that edit the “Wall Settings”. This will give the option of selecting your custom tab page as the “Default Landing Tab for Everyone Else

Just save the settings and everything should work the way you always wanted. Custom Tabs on Facebook Fan pages is a wonderful feature as its a quick way to introduce about who you are and what services do you offer. If optimized properly, it can be a great resource in your “Social Media Marketing strategy“. I’ll come up with optimization tricks in the next post and to ensure that you don’t miss it – you can subscribe to our newsletter.

31 Comment

Featured Designs

Parent Society

Parent Society

Marijuana Maps

Marijuana Maps

Cake Journal

Cake Journal

CopyKat Recipes

CopyKat Recipes

Jessica Denay

Jessica Denay

Keith Ferrazzi

Keith Ferrazzi

Rennaissance Yoga

Rennaissance Yoga

Brink Zone

Brink Zone

Illustrious Author

Illustrious Author

Boca Care

Boca Care

KingsCast

Kingscast

Notecook

Note Cook

My Business Musings

My Business Musings

31 Responses so far | Have Your Say!

  1. Am pretty new to these aspects of facebook… but am learning fast! thanks for his one!

  2. khurram

    thanks man, very easy demonstration….!

  3. Michael McGhie

    This is an awesome application. Love it people.

  4. Great read, i have been looking into ways to set this up…thanks for the info will save.

  5. Does this work for fan pages only? I would really like to add it on my personal facebook page, I am hoping it’s possible because when I tried to click the add to my page, no results came out. Hope you can help. Thank you!

  6. Wow! one of the easiest and the best fanpage design tutorial I’ve ever read. Learn a lot from this read. Thank you.

  7. Can I add more than one page?

  8. Great instructions! Thanks!!!

  9. Hey,
    Cool blog post. I have a similar one on my site but also shows how to add a static picture to the tab by using Photobucket. Check it out:

    http://whebly.com/2010/11/custom-facebook-page-tabs/

  10. nikhil

    Hii, i am unable to get “Default Landing Tab for Everyone Else“ option wall setting ,,, can anyone help me ?????

  11. Very comprehensive post. You could easily make a pdf of this post and sell it :-).
    If you’re running a business it’s better to pay a professional to make you a good one.

  12. FB says any html can be used, can I copy my email signup sheet code into the custom tab? Any sample FB code for a email/newsletter signup page?

  13. I am having trouble with step 4….My tab is there and you can not post anything to the tab…what have I done wrong?

  14. Hey,

    this is a great article about customizing Facebook fan pages by using FBML.

    I think FBML is indeed very useful, but it´s very complicated as well.

    Therefore I want to share with you our free tool on http://mashlab.com – mashlab makes it possible for you to draw new elements simply on the work surface using drag & drop. You need no knowledge of complex programming languages such as FBML or HTML.

    Hope I could help you with this post!
    Best, Julian

    • hello Julian, thanks for sharing mashlab with us. I would love to check it out and find out that how it can help people in developing wonderful pages.

  15. Alex

    Is it possible to edit the icon of the that now appears with custom tabs on the left side of the new facebook page layout? This icon wasn’t an issue with the old layout, but it would be nice if this could be customized as well.

  16. The easiest way of all custom landing tab creation options. Pagelever allows you to upload a single image and create a welcome tab in about two minutes.

  17. MiChikO VirTuoSo

    where i can find the “add to my page”? it doesn’t appear in Static FBML !! answer plss

Trackbacks/Pingbacks