Static FBML: Not Every Facebook Fan Page Needs An Application

Posted on June 26, 2009 by snipe in Featured, Web Development

586 Comments

This post was published 2 years 7 months 5 days ago. There is a chance that some APIs or software versions discussed have changed since this article was written.

You don’t always need a custom application for your Facebook fan page to look amazing. Save yourself time and money by using the Static FBML application instead.

If you’ve played around with Facebook pages at all, you know that layout-wise, you don’t have a lot of options. It’s one of the reasons some people prefer MySpace, where you can have custom font colors and sizes and custom backgrounds, and one of the reasons I personally have to be paid to logon to MySpace.

A current misconception seems to be that in order to have any custom content or display elements in a Facebook page, such as a custom tab or profile box with a specific promotion or branded look and feel, you need a Facebook application.

This is not true at all, and hopefully, I can save you a lot of time, headache and money by letting you in on a little secret.

There is a Facebook application called Static FBML that could potentially save you a lot of hassle. This application was put out by Facebook, and it allows you to create custom HTML/FBML boxes and tabs on your Facebook fan page.

At its most sophisticated, the Static FBML app can allow you pull FBML elements into a profile box, boxes tab box, or an entire tab, At its most basic, you can use it to create custom HTML boxes in those same places that you can completely design and brand to your liking.

For example, I recently worked on the Facebook fan page for Sunkist Soda. While we do use a custom application to display recent Twitter posts by the Sunkist Soda Twitter account, there is an entire branded tab that is simple HTML. The “Team” tab on this page isn’t a custom application – it’s simply a Static FBML box with custom HTML.

We also use a Static FBML box on the main page’s profile, with a small box that includes promotions for various campaigns.

The general rule of thumb is – if you don’t actually need to use any scripted languages like PHP or ASP, and you don’t need to access the API to get the user’s information for any reason, you probably don’t actually need an application. In our Sunkist Soda tab example, we’re not accessing the API, and we’re not doing anything database-related. We’re just displaying a nice background image and some thumbnails that link out.

The end result is a beautifully designed and branded tab or box that looks exactly the way you want it to look. When you need to update the content, just login to Facebook and make your changes in the Static FBML box.

Times When Static FBML is Enough

As I mentioned, if you’re not accessing the API and you’re not doing anything fancy, Static FBML will usually cut it. Also bear in mind that you can use Mock Ajax and FBJS in these boxes, so you could actually have a fairly dynamic tab/box, including expandable onclick elements, etc – without an application.

It basically behaves like a stand-alone webpage within your Facebook fan page.

Some suggestions on where beefing up your fan page with Static FBML can really help:

Promotional text/graphics that click through your Facebook application or website
HTML version of your latest newsletter in its own tab (with signup box!)
A shortcut to important links on your website
Any other place where you want a custom look and feel within your fan page

Figuring this out sooner rather than later can save you thousands of dollars if you’re considering hiring someone to help you. A contractor is going to have a vested interest in not mentioning this option to you, because it turns a specialized, several-thousand-dollar project into something any jackhole who knows basic HTML can handle themselves.

Also check out:

Extending Facebook Static FBML Tabs with Dynamic Content

Taking Your Static FBML Microsite to the Next Level

Want to Set a Default Landing Tab on Your Facebook Fan Page? It’ll Cost You

Google Style Page Numbering (with x per page and y page numbers displayed)

If you think this article kicked ass, subscribe to the RSS feed or follow me on Twitter! Share with your friends, or leave a comment below (or better still, do both!) My entire concept of self-worth is in your hands, so that makes you kind of a big deal. Srsly.

This entry was posted on Friday, June 26th, 2009 at 5:31 am and is filed under Featured, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tommy

Thanks for the information. This is the one I am looking for. How long you took to create the Sunkist Soda page? How do you put the promotions and video on the left hard side? I cannot find any settings to do it.

Thanks.
Tommy

Thanks for the information. This is the one I am looking for. How long you took to create the Sunkist Soda page? How do you put the promotions and video on the left hard side? I cannot find any settings to do it.

Thanks.
http://www.snipe.net snipe

I didn’t do the graphic design – no idea how long it took the designers to do it, but it has the same look and feel as many of the things we were doing, its really just a modification of existing artwork we had already developed.

The video is not embedded – its just HTML thumbnails that link out to YouTube. If we had embedded the video, the size of rhe player would be tiny, accounting for the video controls.

That said, the Static FBML box supports the fb:swf tags, so that would be your easiest bet:
http://wiki.developers.facebook.com/index.php/Fb:swf
http://www.snipe.net snipe

I didn’t do the graphic design – no idea how long it took the designers to do it, but it has the same look and feel as many of the things we were doing, its really just a modification of existing artwork we had already developed.

The video is not embedded – its just HTML thumbnails that link out to YouTube. If we had embedded the video, the size of rhe player would be tiny, accounting for the video controls.

That said, the Static FBML box supports the fb:swf tags, so that would be your easiest bet:
http://wiki.developers.facebook.com/index.php/Fb:swf
Tommy

Thanks snipe. Some more questions.
-How come you only have one advertisement on the right hand side and my facebook page has more than that?
-I assume The Mission tab is using graphic on the top part and some background and html on the bottom. How do you capture the submitted information? Using another web site and database to store the data?

Thanks.
Tommy

Thanks snipe. Some more questions.
-How come you only have one advertisement on the right hand side and my facebook page has more than that?
-I assume The Mission tab is using graphic on the top part and some background and html on the bottom. How do you capture the submitted information? Using another web site and database to store the data?

Thanks.
http://www.snipe.net snipe

Re: ads – no idea. I have ad blocker software set up, so it might be blocking other ads, or maybe the number of ads is randomized. You’d have to ask Facebook.

Re: the Mission tab – that’s a Flash widget, so the Flash captures and writes the data to an external database.
http://www.snipe.net snipe

Re: ads – no idea. I have ad blocker software set up, so it might be blocking other ads, or maybe the number of ads is randomized. You’d have to ask Facebook.

Re: the Mission tab – that’s a Flash widget, so the Flash captures and writes the data to an external database.
Becks

Great post. Regarding The “team” tab, how do you make a simple static FMBL box into its own tab? Thanks man.
Becks

Great post. Regarding The “team” tab, how do you make a simple static FMBL box into its own tab? Thanks man.
http://www.snipe.net snipe

Hi Becks – you just do that through your Edit Page screen in Facebook. Find the FBML box you want to make a tab, click on the pencil icon to the right, and click on Application Settings.

http://www.flickr.com/photos/snipeyhead/3681686973/
http://www.flickr.com/photos/snipeyhead/3682500768/
http://www.snipe.net snipe

Hi Becks – you just do that through your Edit Page screen in Facebook. Find the FBML box you want to make a tab, click on the pencil icon to the right, and click on Application Settings.

http://www.flickr.com/photos/snipeyhead/3681686973/
http://www.flickr.com/photos/snipeyhead/3682500768/
Tommy

Snipe, I am totally new to facebook development, please bear with me.
The flash widget that you mentioned, did you develop in house or some ‘apps’ that I can add to the page?

Thanks
Tommy

Snipe, I am totally new to facebook development, please bear with me.
The flash widget that you mentioned, did you develop in house or some ‘apps’ that I can add to the page?

Thanks
Becks

Thanks for the help, I’m quite new facebook applications. Is it possible to keep it as a box and move it to the fan pages main screen?
Becks

Thanks for the help, I’m quite new facebook applications. Is it possible to keep it as a box and move it to the fan pages main screen?
http://www.snipe.net snipe

@Tommy – It was developed by a third-party specifically for Sunkist

@Becks – You can have a small profile box on the same page, but its very narrow. What you may want to do instead is make it a tab and then specify in the page preferences that the tab should be the default one that loads when someone goes to the page.
http://www.snipe.net snipe

@Tommy – It was developed by a third-party specifically for Sunkist

@Becks – You can have a small profile box on the same page, but its very narrow. What you may want to do instead is make it a tab and then specify in the page preferences that the tab should be the default one that loads when someone goes to the page.
Becks

Thanks again Tommy. Where is the page preferences?

–
Becks
Becks

Thanks again Tommy. Where is the page preferences?

–
Becks
http://www.snipe.net snipe

Becks – on the page itself, in the top left, just below the page profile image, you should see a link that says “Edit page” if you are a page administrator. That will take you to your page preferences options.

Anonymous

I have this SAME issue! I have an online widget that I must get onto several fb pages. I have the link but I have no idea how to add the tab, how to make it a url or what I need to do! PLLLEASE HELP! I have HUGE proposal ridding on my ability to make this happen.

http://www.snipe.net snipe

Becks – on the page itself, in the top left, just below the page profile image, you should see a link that says “Edit page” if you are a page administrator. That will take you to your page preferences options.
Becks

Hey Snipe. Sorry to keep bothering you, but does this mean that I can’t have a small FBML box on the main page next to the wall? The only option I see under preferences would be to make the default tab another section entirely.
Becks

Hey Snipe. Sorry to keep bothering you, but does this mean that I can’t have a small FBML box on the main page next to the wall? The only option I see under preferences would be to make the default tab another section entirely.
http://www.snipe.net snipe

Becks – as I said, you CAN have an FBML box on your front page, below the friend preview list in that left column. When you create the FBML box, you just want to set it as a profile box instead of adding it to Boxes or making it a Tab.
http://www.snipe.net snipe

Becks – as I said, you CAN have an FBML box on your front page, below the friend preview list in that left column. When you create the FBML box, you just want to set it as a profile box instead of adding it to Boxes or making it a Tab.
Becks

The application I am using ‘Static FBML’ does not give me that as an option? Eeek
Becks

The application I am using ‘Static FBML’ does not give me that as an option? Eeek
http://www.snipe.net snipe

I believe you add it as a box, and then on the boxes tab move it to “profile” or “wall”
http://www.snipe.net snipe

I believe you add it as a box, and then on the boxes tab move it to “profile” or “wall”
Becks

Now I get it. Awesome.
Becks

Now I get it. Awesome.
http://obrienonline.com/ Chris

Great post Snipe! The comments are very handy too. Any links to getting started with FBML/HTML? Even just some samples to see how it is done.
.-= Chris´s last blog ..070509 =-.
http://obrienonline.com Chris

Great post Snipe! The comments are very handy too. Any links to getting started with FBML/HTML? Even just some samples to see how it is done.
.-= Chris´s last blog ..070509 =-.
http://www.snipe.net snipe

Hi Chris – The amount of FBML needed in these types of boxes is very limited. FBML is really used more in actual applications, since it helps tie-into the API. Since you won’t be able to tie-into the API, you’d only need it for displaying stuff like flash, videos, etc – if you needed it at all. I believe all of the Sunkist stuff was done without a lick of FBML. That said, the Facebook API wiki has decent docs on FBML here: http://wiki.developers.facebook.com/index.php/FBML – but bear in mind API-related calls may not work here, since each user has to authorize information about them to be used on an app-by-app basis.

For HTML/CSS tutorials, you can just google them – there are literally thousands of great ones out there. A good starting point is the World Wide Web Consortium tutorial tho: http://www.w3.org/Style/Examples/011/firstcss
http://www.snipe.net snipe

Hi Chris – The amount of FBML needed in these types of boxes is very limited. FBML is really used more in actual applications, since it helps tie-into the API. Since you won’t be able to tie-into the API, you’d only need it for displaying stuff like flash, videos, etc – if you needed it at all. I believe all of the Sunkist stuff was done without a lick of FBML. That said, the Facebook API wiki has decent docs on FBML here: http://wiki.developers.facebook.com/index.php/FBML – but bear in mind API-related calls may not work here, since each user has to authorize information about them to be used on an app-by-app basis.

For HTML/CSS tutorials, you can just google them – there are literally thousands of great ones out there. A good starting point is the World Wide Web Consortium tutorial tho: http://www.w3.org/Style/Examples/011/firstcss
http://obrienonline.com/ Chris

Thanks Snipe. The wiki site is perfect. I’m familiar with HTML/CSS, so I was just looking for what can be used in Facebook. I found that here http://wiki.developers.facebook.com/index.php/Allowed_FBML_and_HTML_Tags

Thanks again for your help and keep up the great work.
http://obrienonline.com Chris

Thanks Snipe. The wiki site is perfect. I’m familiar with HTML/CSS, so I was just looking for what can be used in Facebook. I found that here http://wiki.developers.facebook.com/index.php/Allowed_FBML_and_HTML_Tags

Thanks again for your help and keep up the great work.
Matt

Hey Snipe,
Very helpful post.

Question for you:

Do you know of any other top notch Pages?
How do you think Harley embedded the video in their “Women Riders” tab?
http://tinyurl.com/lf8h4x

Their main page under “Harley – Davidson” is quite good as well.
Matt

Hey Snipe,
Very helpful post.

Question for you:

Do you know of any other top notch Pages?
How do you think Harley embedded the video in their “Women Riders” tab?
http://tinyurl.com/lf8h4x

Their main page under “Harley – Davidson” is quite good as well.
http://www.snipe.net snipe

Hi Matt – they embedded the video by using the fbml:swf tag in the Static FBML box: http://wiki.developers.facebook.com/index.php/Fb:swf

It’s very easy – the wiki outlines it pretty well.

That page is pretty to look at, but really its just just a nice HTML page with some video embedded. It’s the design that’s striking, because it was its a nice looking design that a graphic designer clearly spent lots of time working on. The meat and potatoes of making it work is just HTML and that little FBML swf tag.

You can see what Facebook considered to be top notch pages by checking out this article about their Facebook Blue Ribbon, which they gave to Vitamin Water (another project I worked on), Starbucks and H&M.; The Vitamin Water page isn’t as elaborate as it was, and it used apps (that I wrote), but they consider pages top notch if they provide lots of ways for users to interact, which is generally done through apps.
http://www.insidefacebook.com/2009/06/11/facebook-recognizes-starbucks-hm-and-vitamin-water-for-innovative-pages/
http://www.snipe.net snipe

Hi Matt – they embedded the video by using the fbml:swf tag in the Static FBML box: http://wiki.developers.facebook.com/index.php/Fb:swf

It’s very easy – the wiki outlines it pretty well.

That page is pretty to look at, but really its just just a nice HTML page with some video embedded. It’s the design that’s striking, because it was its a nice looking design that a graphic designer clearly spent lots of time working on. The meat and potatoes of making it work is just HTML and that little FBML swf tag.

You can see what Facebook considered to be top notch pages by checking out this article about their Facebook Blue Ribbon, which they gave to Vitamin Water (another project I worked on), Starbucks and H&M. The Vitamin Water page isn’t as elaborate as it was, and it used apps (that I wrote), but they consider pages top notch if they provide lots of ways for users to interact, which is generally done through apps.
http://www.insidefacebook.com/2009/06/11/facebook-recognizes-starbucks-hm-and-vitamin-water-for-innovative-pages/
Matt

Thanks!
Matt

Thanks!
http://www.facebook.com/people/Apple-Jax/1701177139 Apple Jax

Hey Snipe,
I tried the static FBML app and it didn’t work on facebook and it seems like numerous people are having the same problem. I added the app to my page and then went to edit it and it couldn’t be found nor could I find it to delete it and re-add it.

This is what I ultimately wanted to do, I want to create an area like pazza hut did on the left side where they have long banners.
http://www.facebook.com/PizzaHut?v=wall&viewas=794192998

How can I do this?
Thank you
http://www.facebook.com/people/Apple-Jax/1701177139 Apple Jax

Hey Snipe,
I tried the static FBML app and it didn’t work on facebook and it seems like numerous people are having the same problem. I added the app to my page and then went to edit it and it couldn’t be found nor could I find it to delete it and re-add it.

This is what I ultimately wanted to do, I want to create an area like pazza hut did on the left side where they have long banners.
http://www.facebook.com/PizzaHut?v=wall&viewas=794192998

How can I do this?
Thank you
Facebook User

Hi Snipe, great article.

I’ve been trying to find out how to add a ‘suggest friends’ box in my fbml tab but can’t for the life of me figure it out.

Like the one on this page: http://www.facebook.com/pages/Great-Hudson-River-Revival-2009/50496617538#/pages/Great-Hudson-River-Revival-2009/50496617538?v=app_10339498918&viewas=1424766892

Any ideas?
Facebook User

Hi Snipe, great article.

I’ve been trying to find out how to add a ‘suggest friends’ box in my fbml tab but can’t for the life of me figure it out.

Like the one on this page: http://www.facebook.com/pages/Great-Hudson-River-Revival-2009/50496617538#/pages/Great-Hudson-River-Revival-2009/50496617538?v=app_10339498918&viewas=1424766892

Any ideas?
Fred

I can’t seem to even get my background image to display in the staticFBML I can get links and images to show, but not a background…

Any idea what I’m doing that’s so foolish?
Fred

I can’t seem to even get my background image to display in the staticFBML I can get links and images to show, but not a background…

Any idea what I’m doing that’s so foolish?

Follow Me!

Recommended Hosts

My Other Sites

Buy My Crap!

Static FBML: Not Every Facebook Fan Page Needs An Application

Posted on June 26, 2009 by snipe in Featured, Web Development

Times When Static FBML is Enough

Also check out: