Creating Custom Tabs on Facebook Pages

Dear Reader,

Last week I talked about how I finally got a Welcome tab up on my Facebook fan page, and was asked to write a tutorial about how I navigated the murky depths of Facebook HTML editing. And so I shall, gladly.

The default for a Facebook fan page is for it to load on the wall tab, i.e. the list of activity that’s happened on the page.

This isn’t so great for branding, though, especially when trying to appeal to newcomers. What we want is a welcome tab where we can put our welcome message, maybe an image or two.

Good thing we have the option to use the Facebook Static FBML app, amiright?

Sure, once you figure out how to use the stupid thing.

Assuming you have a fan page and know how to edit it (click “Edit” below your page’s photo on the left), you should be familiar with this list of options.

When you click edit, you will see this list of options on the left. Your editing options will be in the center, and the typical Facebook ads will be on the right.

We want to go to the apps tab so we can customize our page with the additional functionality afforded through the Static FBML app.

Static FBML stands for Static Facebook Markup Language. When I saw this originally, I thought, “But I just want HTML. This is stupid. Why would Facebook make their own language?”

Turns out, you use this app for HTML as well. It will accept images, text, and tables. It won’t accept embedded media such as videos, as far as I’ve tried.

Anyway. At the bottom of your apps page, you might see an option to add the Static FBML app to your page. If you don’t see that, search “Static FBML” using the search field at the top of the left options menu to find it.

The app in the list of search results should look like this. Click it, and follow the directions to add it to your page.

Once the app is installed on your page, you will have no idea what to do next. Logically, clicking “Settings” would take you to a page that allows you to edit this random tab that is now appearing on your page, right? Wrong. But you are right to think that.

Facebook is stupid and actually makes you click “Go to App” in order to make edits. It’s ok. I can say Facebook is stupid from a heuristic standpoint: it’s my day job to find the weaknesses in a web design and point them out for the next iteration to improve the design. Are you listening, Facebook??

You should see a blank text box waiting for your HTML magic, like so pictured left. I made a 500 pixel wide x (??) pixel tall image that I threw in there for the welcome tab. Just to see what it would look like.

I noticed at the bottom, there’s a link that says “Add another FBML tab” or something like that. Don’t do that until you’ve saved your first tab.

Essentially, you can create as many customized tabs as you can think of, using this app. It’s pretty useful once you get to this point.

I made two tabs: a Welcome tab and a Buy a Copy tab. The latter is a simple 2×2 table that has the images of my books, descriptions, and links to where readers can buy them. Simple and straightforward.

From here, you’ll want to make your new Welcome tab the default landing tab. To do this, you need to choose the Manage Permissions option in the left menu.

There will be an option on this page to change the default landing tab from the Wall to your Welcome tab. Go ahead and do that. Or make the default landing tab something else.

Whatever floats your boat, I’m not the boss of you.

In the end, you will want to log out of Facebook to ensure that the landing tab is the one you specified. It took me an hour or so to realize that it didn’t matter how many times I refreshed it, I would always see the Wall tab as the landing tab because I’d liked the page.

The default landing tab, when made to be the Welcome tab, only appears first when you haven’t liked the page yet. So it’s kind of perfect. Welcome me if I’m new, but give me the juicy stuff if I’ve been around for a while.

So if you haven’t liked my fan page and are coming to it for the first time, you should see something like the image on the left. Otherwise, you will see the wall tab like in the first image of this post.

Ta-dah! Now you have a snazzy welcome tab. Hopefully you have some awesome content to throw in there.

Ask questions and provide additional suggestions in the comments!

All the best,

Belinda

12 thoughts on “Creating Custom Tabs on Facebook Pages

  1. Your welcome page looks fantastic, Belinda! Thanks for trying to help out the technotards, computer whiz. Still, this looks way too complicated for me since I don't know html code. Maybe the next time we're together I can coax some of that knowledge out of you to help with my fb page, ha ha. Hope you have a good week!

    Like

    1. Thanks Jen! Behold the power of knowing how to use Photoshop properly 😛

      We can definitely have an HTML study date sometime. All I did was create an image, upload it to my website, and then I dropped the code that referenced the image into the new tab.

      Like

  2. great article for begginers. but what shall i do if i passed that stage. now all i need is to be properly explained how to create that bloody code to insert to fbml lol
    i have no money to spare right now for progrmers and havent got much time to study html from scrach.
    so how i supposed to create nice fb page to get more money for my crafts
    sorry for moaning… 😀

    Like

  3. OMG THANK YOU! That would have taken me AGES to figure out (largely because I can't seem to stand FB for longer than 5 minutes and just leave before actually accomplishing anything–getting my Networked Blogs thumbnail updated tonight was an ordeal). No idea when I'll actually DO IT, but I am bookmarking this so I know HOW!

    Like

    1. I'm so glad this helped! I wrote the post fairly quickly as I was preparing for a week-long conference and was afraid I wasn't making sense.

      I just hope these instructions still work now that the Facebook pages are updating once again. I think the behind-the-scenes stuff is still valid, so we should be good.

      Like

  4. " There will be an option on this page to change the default landing tab from the Wall to your Welcome tab. Go ahead and do that. Or make the default landing tab something else. "

    I can't find an option of making my welcome tab as default landing page for non fans for my recently created FB page.

    Any help??

    Like

Comments are closed.