How To Create A Custom Tab For Your Facebook Page
Feeling a bit bogged down by all the social media hype out there? Phenomenoodle’s SociaLite posts present the easy-to-understand version of the social media maze, and are designed to introduce you to the light side of having an online social life for your business.
Update: This post is still largely valid, but there have been a few changes to Facebook’s tab creating process. If you’d like a completely updated version, sign up for our newsletter above or at the end of this post to receive a copy of the How To Create A Custom Tab For Your Facebook Page ebook absolutely free.
In my last post on how to create a Facebook page, I mentioned that Facebook allows you to create a custom landing tab for your business’ page. This provides you with the opportunity to deliver a personalised welcome message to new visitors, highlight any current special offers you may have, and reinforce your branding.
Creating a custom tab is easy – as long as you know some basic HTML and CSS. While you can also include Facebook’s own markup language, FBML, to add extra functionality to your tab, this is neither required nor, in many cases, needed. Landing tabs designed using only HTML and CSS can be as simple or complex as you want.
Teaching the basics of HTML and CSS (not to mention FBML) are beyond the scope of this blog, I’m afraid (that’s a whole ‘nother blog entirely!). If you’d like to delve into the world of HTML and CSS, I’d recommend visiting W3Schools for their straightforward free tutorials. And you can find a reference to FBML at Facebook’s Developers’ Wiki.
Once you’re comfortable with HTML and CSS, here are the steps to follow to create a custom landing tab for your Facebook page:
Step 1: Add the Static FBML application to your page
Go to your Facebook page, and click on the link at the top left (under the picture) that says “Edit page”. Scroll down the list of applications to the very bottom, where there’s a box that says “More applications”. Click on the pencil icon to the right of this box and then click on “Browse more”.
Type “Static FBML” (without the quote marks) into the search box to the top left of the “All applications” page.
Follow the Static FBML search result link to the application’s page. Here, click on the link to the top left (under the picture) that says “Add to my page”. When you do this, you’ll be presented with a list of the pages for which you are the administrator (it may just be one!) and confirm which page you want to add the application to by clicking on “Add to page”.
Step 2: Open up the editing area for the Static FBML
Return to your Facebook page and again click on the “Edit this page” link in the top left. Scroll down the list of applications to find the newly installed Static FBML application. Click on the pencil icon to the right of this box, and click on the “Edit this application” option in the drop down list.
Step 3: Title your tab
Enter the name of your tab into title field of the tab editing area. This can be anything you choose, from “Welcome” to “Special Offers”, “About Us”, or even “Competition” if you have one on the go!
Step 4: Add the tab content
It’s at this point that you get to use your HTML and CSS skills to create a design for your tab that is as serene or as fancy as you wish. My only recommendation here is that you stay true to your branding, and mimic the look and feel of your website to ensure consistency in your marketing message.
There is unfortunately no preview option when you’re editing your tab’s content. You will need to save your changes and click the link at the top of the page to return to your page and view your custom tab. My own solution to this was to open my Facebook page in a new window and refresh it each time I had made changes that I wanted to preview – it saved me some of the frustration that I would otherwise have encountered through endless to-ing and fro-ing!
Step 5: Making your Static FBML box a separate tab
After you’ve entered some content, saved the changes and returned to your page for a sneak preview, you may notice that your custom tab is sitting as a box on the “Boxes” tab rather than being a separate tab in its own right.
In order to change this, click on “Edit my page” and scroll down the list of applications to the Static FBML one. Click on the pencil icon and choose “Application settings” from the drop down menu. On the pop up screen, click on “remove” in the brackets next to where it says “Box” and click on “add” in the brackets next to where it says “tab”. The settings will change to those illustrated in the image below, and your custom tab will be visible as a separate tab when you return to your page.
Step 6: Change your default landing tab for new visitors
Click on “Edit my page”. Under the second box (“Wall settings”), choose the name of your new tab from the drop-down menu to set it as the default landing tab for any new visitors to your page.
Step 7 (optional): Change the order of your tabs
If you want to move your newly created custom tab to another position, simply click on it and drag it (while holding the mouse button down) to where you want to position it. The only limitation here is that the wall and info tabs are set in positions one and two and this cannot be changed.
Please use the comment section below to ask any questions you may have (or contact me by email). And once you’ve set up your page and your custom tab, please share it in the comments below – I’d love to see what you’re up to and become a fan of your business!
Lastly, please visit our Facebook page – we look forward to welcoming you to our Facebook space!
Comments [45 Comments]
Trackbacks/Pingbacks
-
[...] this page was mentioned by magswallis (@magswallis), Lea Woodward (@leawoodward), Nancy Brauer (@tenaciousn), Andy (@andrewghayes), magswallis (@magswallis) and others. [...]
Great tutorial! I’m definitely going to try this–I just first need to think about what I want my welcome page to look like and what content it should have. Thanks, so great!
Thanks, Sarah! I look forward to seeing the finished product!
Hi there!
I did everything you said, step by step, and when I went to view my new tab, there was nothing. Just a blank tab. All I want is to mimic the look of this webpage of ours and put it as a tab….http://effectivetraining.com/elearning.php. Any suggestions or can you help me.
Thanks-Summer
Hi Summer
Hmmm… it’s difficult to debug exactly what’s gone wrong from a distance – it could be a Facebook issue (their system can be quite counterintuitive, and there have been a few bugs with it), it could be something with your code, possibly even just a missing semi-colon or angle bracket that would cause things not to work!
When you enter the HTML into the tab editing field, you don’t need the HTML opening and closing tags, nor do you need the head and body tags – check that you haven’t included these.
If there’s still an issue: if you’re happy to do so, send me the HTML code you’re using via our contact form, and I’ll take a look at it. I’ll either spot a problem, or if it’s perfect, we can at least eliminate that as a cause and see what else we can find!
OMG, this was sooo helpful! Thanks for a super thorough explanation and detailed instructions. No way to change title tabs for, like, Photos, though, right?
Thanks, Renae!
No, unfortunately, I don’t know of any way to change the names of FaceBook’s default tabs – it seems you have to use the label they give them
Thank you so much for posting this very useful tutorial! I appreciate your time in helping those of us who are less savvy in adopting these tools early. I landed on the J.Crew page just yesterday and was blown away. When I searched for ‘how to create custom welcome facebook page,’ your tutorial came right up. Thankfully!
You’re welcome, Sean – glad it was helpful!
Great tutorial, thank you! do you know if I can put an iframe in a custom tab. the code is in the application, but is not showing when I click on the tab. Any suggestions?
Thanks, Ruthann.
I’m not 100% sure about iframes on a Facebook page…. it doesn’t seem to be as easy as copying code from your web page into the FBML box. I’d suggest having a look at the Facebook developers’ wiki for more info, particularly the page on the fb:iframe tag (http://wiki.developers.facebook.com/index.php/Fb:iframe).
Just to let you know that instead of having 2 windows open to see how the FBML page is looking there is a webdevelopers site for Facebook with a FBML test console, so you can view and see any code errors. http://developers.facebook.com/ Then go to tools.
Thanks for posting this info it has got me started. I have been wondering for ages how others were customizing their pages.
Thanks for the tip, Sheila, and I’m glad that the info was helpful to you.
Hi Taryn,
Very helpful info, thank you!
Do you know how to add a custom icon to the new tabs that are created? Right now it just shows the little grey FBML box.
Thanks!
Thanks, superJennifer!
By “little grey FBML box” do you mean the little pencil icon next to the tab’s name? That will only be visible to you (as the page administrator) – clicking on it allows you to edit the tab. The icon won’t be visible to your visitors as they don’t have editing privileges.
I’m not sure if it’s possible to add custom icons to the tabs, though – would be nice! I’ll look into it!
Hi Taryn,
Not the pencil; You know how when the drop down menu shows you can see a little video camera for the “videos” tab, etc. One of those little icons.
Thanks!
Okay, yes, I know which icons you mean now! Do you just want a custom icon in the dropdown menu (only visible to you) or do you want an icon to appear on the tab itself next to the name of the tab?
An icon that the user can see would be nice to have. Is that possible?
It doesn’t look like it…
According to the Facebook Developers Wiki: “The labels are text only; a favicon cannot appear on the tab label at this time.”
But, I am heartened by the phrase “at this time” – it suggests things may change in the future!
ok, thank you! appreciate you taking the time to research it for me! i’ll let my client know!
This was the best how-to tutorial I found on this topic. It was totally idiot proof & helped me set up something I had wanted to do for a while. Thank U soooo much!!
You’re welcome, Rae!
Man oh man…
Amazing!!!
Thanks you so much!
Hands down one of the best online tutorials I’ve ever seen
keep up the good work!
Thank you, Adam!
Hi, I have the tab, but have no idea about getting the HTML code from my site or even creating one. Help anyone
Hi Sally
If you right-click anywhere in your webpage, a pop-up menu will appear. One of the options is to ‘view page source’, and this will show you the HTML code.
A word of warning, though… creating a FB tab to look like your website is not as simple as just cutting and pasting the code. There are a few adaptations that you will need to make to both your HTML and CSS that will require you to be familiar with both of these. For example, your website will be pulling in the styles from a .css file – for a FB tab, you will have to ensure that these styles are inline and not in a separate file. In addition, if you want your FB tab to not be an exact copy of your website (e.g. you don’t want the navbar in the tab), you will need to adapt your HTML accordingly.
In the blog post, I mention a few online resources for learning HTML and CSS – have a look through these to see if this is something you are happy to tackle yourself. If not, the easiest solution is to hire someone to design the custom FB tab for you
GREAT tutorial Taryn!! Is there anyway to add images (jpg’s and such) to a custom tab or is it text only?
Thanks, Audrey!
You can add images to your custom tab, though these have to be hosted somewhere other than Facebook. I use Photobucket, and then reference the photo url in the custom tab HTML.
Worked like a charm, thanks so much!!
Thanks Taryn,
This was a really clear, extremely helpful tutorial. By following your instructions I was able to get our Earth Day celebration (where you click, and plant free trees) up and running. http://www.facebook.com/pages/Plant-free-trees-with-Earthpoints/281721274475 It’s basic tab but couldn’t have done it without you. Brilliant!
Well done, Srimath! You’ve got a fantastic FB page going. Thanks for the compliments
Wow, that was so helpful. Thank you Taryn and Phenomenoodle! (-:
Thanks, Oded – I appreciate the compliments!
This is great, but I’m having a problem with something. I have a bunch of mp3s that are podcasts that are not routed through any particular site (just uploaded on our own web page) and they want to have a tab with all of them on a player. Right now, we have Facebook Music Player uploaded but that will not create its own tab (only a box). I’ve been looking for any way to create my own tab, but now I have no idea how to upload these mp3s and get them to play. Is there any help you give me?
Hi Kara
Off the top of my head, I’d guess that you’d have to link to the mp3s from your Facebook page (i.e. link to wherever they’re hosted), just like Facebook doesn’t allow you to upload images for custom tabs (you have to host them elsewhere and link to them in your html).
great easy to understand guidance until I got to the bit about inserting HTML – all i want to do is create a tab on a business page so it acts like as a link to a certain page on our website. It’s so easy in mail or even on my website, I guess I am missing a trick! I can see the HTML on our website but don’t know which bits I need – guess for idiots like me the advice is get a techi in?! cheers
Hi Bob
HTML links are contained within a tags (‘a’ enclosed with <>)… have a look for those
Failing that, send me an email and I’ll see what I can do!
Hey, thanks for the great tutorial. ive set up a custom page for my business – its startign to look good now! Ive set my customer tab to be the default welcome page, but if you “like” my page you are directed straight to the wall. Is there a way to change this?
Thanks!
Hi Larry – Well done on setting up your page!
Unfortunately, Facebook automatically directs people who like your page to the wall tab, and there isn’t a way to change this
A very nice set of instructions – thank you.
Thank you, Arlyn.
the default landing tab doesnt exist anymore ..what should i do
Gunky, can you be more specific and provide more details about the problem? I’m not quite sure what you mean…
This is great. I was looking to find out how to do this and your instructions are 100% dead on. 1 question I have is I want to design a page outside of facebook and save it as a jpg and just ref the image with an html img pointer but cannot figure out the correct sizt to have it fit on the page correctly. In other words I want a welcome tab and instead of codeing the page have a img pointer to an external jpg. But need to know what size to make the jpg. Hope this makes sense
Hi Gary
Facebook tabs have now been changed to 520px wide, so resize your image to that width and corresponding height and you’ll be fine.