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

Unexpected Progress

Dear Reader,

I’ve made unexpected progress. Unexpected, because it doesn’t have to do with writing, sadly. Once again not following through with my ROW80 goals. I once again have taken a break from the writing, but instead made progress on some of my web presence issues.

Maybe I should change my ROW80 goal altogether. To something like, “Do it. Whatever it is, if it takes you one measurable step forward this week, do it.”

You see, I have a Facebook Page, but have struggled with what to do with it. Even though I have a computer engineering degree, the FBML app just confused the crap out of me that last time I tried to work with it. I was over-thinking it like CRAZY, which isn’t a surprise. That’s kind of my modus operandi, to be honest.

That said, I finally buckled down yesterday and worked on two graphics for the fan page: a large banner on the left, and a splash image for the welcome tab. AND, I figured out how to get the stupid FBML tabs to work so I can throw in my HTML. So now we have a “welcome” tab and a “buy a copy” tab. The content from “buy a copy” came straight from my Bright Bird Press website. Easy peasy. What took me so long?

No clue. But I credit ROW80 for making me do something about it. Check out how everyone else is doing, will you?

All the best,

Belinda