One Mom’s Journey from Fat to Skinny to Confident

BLOGGING THOUGHTS

Adding a Tab to Your Facebook Fan Page is a EASY! Who Knew?

14 Comments 1506 views

I’ve seen it TONS of time. Like here on the Vitalicious Fan page

facebook fan page - the laughing cow

and here on the Laughing Cow one

facebook fan page - Vitalicious

But I never really gave much thought to HOW they did it. I always assumed it required some crazy facebook developement guru who understood some crazy API or something. But alas adding a tab to your facebook fan page is seriously a CINCH! I recently made one for the launch of my new GreenLiteBites book!

facebook fan page - GreenLiteBites

Adding a Tab to your Facebook Page

Adding the tab literally takes seconds.

Click Edit Page on your Facebook fan page

facebook fan page - Edit Page

Click Apps

facebook fan page - apps

On the bottom of the page you should see the Static FBML app

facebook fan page - Add FBML

If you don’t, simply search for FBML by clicking Browse more applications.

Click Add App

facebook fan page - Click add app

It may seem like nothing happened but it did! The page does not refresh for some reason.

Now click Go to App

facebook fan page - go to app

It will take you to this simple edit screen.

Whatever you enter in the "Box Title" will be the text on the tab itself. The large FBML field is reserved for the content of the field.

Facebook used to have it’s own language called FBML (Facebook Markup Language) but it is being depreciated in favor of plain old HTML, CSS and Javascript. A great move in my opinion.

Now all you need to do is simply enter HTML/CSS to design the page. Here’s the code for my "Buy the Book" page…

facebook fan page - the code

As you can see I start with some basic CSS styles just as I would in an HTML doc. If you are uncomfortable with HTML/CSS you could simply use a WYSIWYG editor like Dreamweaver and copy/paste the code.

Setting the Default Tab

Making the new tab for my Facebook Fan page the easy part. The thing I found confusing–for some reason–was making it the default tab–the tab that is seen first.

To make your new tab the first thing seen on your fan page simple go to settings on your wall and select the new tab under the "Default Landing Tab for Everyone Else" tab.

facebook fan page - set the default tab

You will still your wall when logged into facebook but if you logout and visit your fan page you’ll see that the new tab is indeed the first thing seen just like mine…

facebook fan page - GreenLiteBites

I hope that helps those wanted to spruce up their fan pages. I find Facebook a fun easy way to publicize my blogs, especially for the non-twitter crowd.

Let me know if you have any questions!



Leave a comment

I’d love to hear your story or thoughts on mine.

However, to prevent the massive amounts of spam I was receiving I have turned off comments on any post older than 5 days old. If you'd like to leave me a note regarding this post or anything really try me on twitter (@RoniNoone,) my Facebook page, or even IG (@RoniNoone) I'm so sorry for the inconvenience. I never thought I'd have to do this but it's gotten way out of hand and comment management has become simply too time consuming to manage.

Discussion

There are 14 comments so far.

    Amazing, I’ve been trying to figure out how to do this. Thank you!

    Katie @ Healthy Heddleston

    February 8, 2011

    Wow great tutorial–thank you so much Roni!

    Jennette

    February 8, 2011

    Thanks for posting the tutorial, Roni! I know some of my clients will find this useful.

    Ryan @NoMoreBacon

    February 8, 2011

    Great tutorial Roni.

    The thing that drove me crazy when I first started developing Facebook pages is that I’d make a change to the HTML or the CSS and then it wouldn’t show live on the Facebook page because of caching.

    I found that if you added a small mod to the end of the file names that it would update right away.

    For example, if you want to replace an image on your page with a new updated image, you can make the following modification:

    If the image URL is http://domain.com/uploads/mypicture.jpg

    You can change the URL to http://domain.com/uploads/mypicture.jpg?v=1 and Facebook will recognize it as a new image and post it immediately.

    It works the same way with the CSS files to. Then, every time you want to update the image or the CSS file you can just change the 1 to a 2 and so on.

    I just thought I’d add that long winded comment because I’m not a fan of waiting :)

    Cynthia (It All Changes)

    February 9, 2011

    This is fantastic. I’ve always wanted to add stuff like this and you make it so easy.

    Jennette

    February 10, 2011

    Ok, I just upgraded my fan page to the new layout, and the damn “Settings” button disappeared!! I found where it is now though. Go to “Edit Page” and click on “Permissions.” The “Default Landing Tab” field is there now.

    roni

    February 10, 2011

    Well of COURSE they upgrade the day AFTER I take a bazillion screen shots for this tutorial. Ugh.

    Matt

    April 1, 2011

    Roni,

    Thanks for posting this. I already have created a custom welcome page (http://www.facebook.com/cobracorn) w/ FBML and I have no idea what the code means, but got it online and it works. On my welcome tab, you can click on main image to go to the company’s website. For the “Add to cart” button, are you simply having the whole image go to the purchase area of your website and not the button specifically? then basically all you are doing is adding that button image to the graphic and not actually having a button at all? sorry, but I do not know anything about code, but trying to make my page look nice

    roni

    April 4, 2011

    I’m sorry Matt, I have no idea what you are asking.

    The Add to Cart button is simple a link to my check out page, yes.

    Dee Child

    July 18, 2011

    Hello,

    I don’t see how to add the facebook Static FBML app. It’s not in the apps you may like. :( Could facebook have changed their settings? I need help! Thanks!

    roni

    July 28, 2011

    They did and I haven’t kept up. Sorry. :(

    jennettefulda

    October 11, 2011

    I just figured out how to do this with the new Facebook settings. Just go to the Static FBML app page here and add it to your page: http://www.facebook.com/apps/application.php?id=4949752878

    violetjoanne

    February 19, 2012

    Click Add App for FBML <— it's not in the app list anymoreNow they only allow to add :- Photos

    – Links- Events

    – Notes

    – VideosIt's there another way to add the FBML ?

    RoniNoone

    February 20, 2012

    @violetjoanne I think it’s being depreciated so I’m not sure. Check here… https://developers.facebook.com/docs/reference/fbml/