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
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
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
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
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
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.
Am pretty new to these aspects of facebook… but am learning fast! thanks for his one!
thanks man, very easy demonstration….!
This is an awesome application. Love it people.
Great read, i have been looking into ways to set this up…thanks for the info will save.
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!
Wow! one of the easiest and the best fanpage design tutorial I’ve ever read. Learn a lot from this read. Thank you.
Can I add more than one page?
unfortunately you can add only one page.
I am new to this, but tried it, and it worked after a few times to add a FAQ page to my facebook, but I cannot get the links to work using FBML, they will not click outside of facebook pages.
Great instructions! Thanks!!!
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/
Hii, i am unable to get “Default Landing Tab for Everyone Else“ option wall setting ,,, can anyone help me ?????
what is happening? can you provide more details?
I have a page on fb name http://www.facebook.com/bikanercity... i am able to make FBML box unable to make it default for its users… on wall setting option i can see all options except “Default Landing Tab for Everyone Else“ option!!! what to do ?????
well, with new facebook, follow these steps…
1. Click on Account (top right hand corner of facebook)
2. Manage pages
3. click on Go To Page (in your case bikaner page)
4. click on Edit page (on the left sidebar menu)
5. Click on Manage permissions.
6. Change Default landing page.
I do that but i m unable to see the option of “Default landing page” ?????
Its right there nikhil. just look carefully. its one of the drop down menus.
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.
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?
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?
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.
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.
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.
where i can find the “add to my page”? it doesn’t appear in Static FBML !! answer plss
Hey Michikio, unfortunately facebook has changed quite a lot since this post was written.
We’ll be updating the tutorial soon, meanwhile please check http://wp4fb.com