Static FBML: Not Every Facebook Fan Page Needs An Application

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

587 Comments

This post was published 2 years 10 months 21 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.

http://www.facebook.com/heatherrichardslive Heather

I tried to add FBML to my fanpage. It gives no options to edit. How do I delete this from my fanpage? It has no options to do anything and I don’t see it in my applications. It sits in my dropdown list, but gives no option to delete it. I would like to delete it then readd it to my fanpage, not my main profile page. Any advice?

Heather
http://www.facebookgenie.com/facebook_fanpage.html facebook fan page

Hi,

Yes i agree not every fan page needs application you can still customize your fan page by using default fb tools.

Thanks
http://www.facebookgenie.com/facebook_fanpage.html facebook fan page

Hi,

Yes i agree not every fan page needs application you can still customize your fan page by using default fb tools.

Thanks
adrian

Hey Snipe, I posted an earlier comment about creating tabs in fbml box. I saw another example of this :
http://www.facebook.com/iTunes
Their podcast and featured section have functionality I am looking for. Any idea how they did this? Any help would be great, thanks

chewie
adrian

Hey Snipe, I posted an earlier comment about creating tabs in fbml box. I saw another example of this :
http://www.facebook.com/iTunes
Their podcast and featured section have functionality I am looking for. Any idea how they did this? Any help would be great, thanks

chewie
http://www.snipe.net snipe

Hi chewie – you can create tabs in an FBML box just by designing the HTML you’re using in the FBML box to look like tabs. The iTunes page you’re referencing uses an application for their (default) Featured tab, so they’re using an actual app there:
http://www.facebook.com/apps/application.php?id=74561238314

Even so, you just need to design the HTML you put in your FBML box to use tabs in the design and code them that way if you’re using just FBML and not a standalone app.
http://www.snipe.net snipe

Hi chewie – you can create tabs in an FBML box just by designing the HTML you’re using in the FBML box to look like tabs. The iTunes page you’re referencing uses an application for their (default) Featured tab, so they’re using an actual app there:
http://www.facebook.com/apps/application.php?id=74561238314

Even so, you just need to design the HTML you put in your FBML box to use tabs in the design and code them that way if you’re using just FBML and not a standalone app.
adrian

Tabs: Hey Snipe, thanks for the quick response. The problem I am having, is that when the user clicks on the tab it takes them to another page. How do I just reveal the contents rather than goto url? Here is the code I got going so far.
/////////////////

mybknd {
margin : 10px;
font: Verdana, Helvetica, Arial;
padding: 0px;
background: #fff;
}

#menu {
border-bottom : 1px solid #ccc;
margin : 0;
padding-bottom : 19px;
padding-left : 10px;
}

#menu ul, #menu li {
display : inline;
list-style-type : none;
margin : 0;
padding : 0;
}

#menu a:link, #menu a:visited {
background : #E8EBF0;
border : 1px solid #ccc;
color : #666;
float : left;
font-size : small;
font-weight : normal;
line-height : 14px;
margin-right : 8px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}

#menu a:link.active, #menu a:visited.active {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}

#menu a:hover {
color : #f00;
}

mybknd.section-1 #menu li#nav-1 a,
mybknd.section-2 #menu li#nav-2 a,
mybknd.section-3 #menu li#nav-3 a,
mybknd.section-4 #menu li#nav-4 a {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}

#menu #subnav-1,
#menu #subnav-2,
#menu #subnav-3,
#menu #subnav-4 {
display : none;
width: 90%;
}

mybknd.section-1 #menu ul#subnav-1,
mybknd.section-2 #menu ul#subnav-2,
mybknd.section-3 #menu ul#subnav-3,
mybknd.section-4 #menu ul#subnav-4 {
display : inline;
left : 10px;
position : absolute;
top : 95px;
}

mybknd.section-1 #menu ul#subnav-1 a,
mybknd.section-2 #menu ul#subnav-2 a,
mybknd.section-3 #menu ul#subnav-3 a,
mybknd.section-4 #menu ul#subnav-4 a {
background : #fff;
border : none;
border-left : 1px solid #ccc;
color : #999;
font-size : smaller;
font-weight : bold;
line-height : 10px;
margin-right : 4px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}

#menu ul a:hover {
color : #f00 !important;
}

#contents {
background : #fff;
border : 1px solid #ccc;
border-top : none;
clear : both;
margin : 0px;
padding : 15px;
}

Home
Reviews
Trailers
Chums

////////////////
Every where i look, this seems to involve java script, which fb doesn’t like.
thanks again,

chewie
adrian

Tabs: Hey Snipe, thanks for the quick response. The problem I am having, is that when the user clicks on the tab it takes them to another page. How do I just reveal the contents rather than goto url? Here is the code I got going so far.
/////////////////

mybknd {
margin : 10px;
font: Verdana, Helvetica, Arial;
padding: 0px;
background: #fff;
}

#menu {
border-bottom : 1px solid #ccc;
margin : 0;
padding-bottom : 19px;
padding-left : 10px;
}

#menu ul, #menu li {
display : inline;
list-style-type : none;
margin : 0;
padding : 0;
}

#menu a:link, #menu a:visited {
background : #E8EBF0;
border : 1px solid #ccc;
color : #666;
float : left;
font-size : small;
font-weight : normal;
line-height : 14px;
margin-right : 8px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}

#menu a:link.active, #menu a:visited.active {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}

#menu a:hover {
color : #f00;
}

mybknd.section-1 #menu li#nav-1 a,
mybknd.section-2 #menu li#nav-2 a,
mybknd.section-3 #menu li#nav-3 a,
mybknd.section-4 #menu li#nav-4 a {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}

#menu #subnav-1,
#menu #subnav-2,
#menu #subnav-3,
#menu #subnav-4 {
display : none;
width: 90%;
}

mybknd.section-1 #menu ul#subnav-1,
mybknd.section-2 #menu ul#subnav-2,
mybknd.section-3 #menu ul#subnav-3,
mybknd.section-4 #menu ul#subnav-4 {
display : inline;
left : 10px;
position : absolute;
top : 95px;
}

mybknd.section-1 #menu ul#subnav-1 a,
mybknd.section-2 #menu ul#subnav-2 a,
mybknd.section-3 #menu ul#subnav-3 a,
mybknd.section-4 #menu ul#subnav-4 a {
background : #fff;
border : none;
border-left : 1px solid #ccc;
color : #999;
font-size : smaller;
font-weight : bold;
line-height : 10px;
margin-right : 4px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}

#menu ul a:hover {
color : #f00 !important;
}

#contents {
background : #fff;
border : 1px solid #ccc;
border-top : none;
clear : both;
margin : 0px;
padding : 15px;
}

Home
Reviews

Trailers

Chums

////////////////
Every where i look, this seems to involve java script, which fb doesn’t like.
thanks again,

chewie
http://www.snipe.net snipe

Hi chewie – in Facebook, you have to use Mock Ajax or FBJS:

http://wiki.developers.facebook.com/index.php/Mock_ajax
http://wiki.developers.facebook.com/index.php/FBJS
http://www.snipe.net snipe

Hi chewie – in Facebook, you have to use Mock Ajax or FBJS:

http://wiki.developers.facebook.com/index.php/Mock_ajax
http://wiki.developers.facebook.com/index.php/FBJS
veronica

i want to hug you! excellent info
veronica

i want to hug you! excellent info
ellan

does anyone know how to create a link “become a fan of…” on the videos you have on your fan site? so that while the video is playing there is a link in the top corner named “become a fan”. so that when people click on the link, they becomes fans of your fan page. how do you do that? can anyone help me? and is it free to use static fbml?
ellan

does anyone know how to create a link “become a fan of…” on the videos you have on your fan site? so that while the video is playing there is a link in the top corner named “become a fan”. so that when people click on the link, they becomes fans of your fan page. how do you do that? can anyone help me? and is it free to use static fbml?
puneet

snipe hi,

i am trying to create application for a fan page. basically what i want to do is create a tab on my fan page and display a web form which includes uploading a file and save data on the backend. how can i go about doing this?

thanks
puneet
puneet

snipe hi,

i am trying to create application for a fan page. basically what i want to do is create a tab on my fan page and display a web form which includes uploading a file and save data on the backend. how can i go about doing this?

thanks
puneet
http://greenopolis.com Jeff

Thanks for this. I’ve added a landing page via FBML. The only problem I see is that when a user clicks to become a fan, they’re still staring at the landing page. Is there a way to have them go to the Wall once they’ve become a fan?

Thanks,
Jeff
http://greenopolis.com Jeff

Sorry, Jeff again…here’s the landing page I mention in the previous post: http://www.facebook.com/greenopolis

Thanks,
Jeff
http://greenopolis.com Jeff

Thanks for this. I’ve added a landing page via FBML. The only problem I see is that when a user clicks to become a fan, they’re still staring at the landing page. Is there a way to have them go to the Wall once they’ve become a fan?

Thanks,
Jeff
http://greenopolis.com Jeff

Sorry, Jeff again…here’s the landing page I mention in the previous post: http://www.facebook.com/greenopolis

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

@Jeff – The “become a fan” functionality is performed in Ajax, I think, so I don’t think there’s any way to change that. Better idea is to plan for the fact that fans and non-fans will see it, and message accordingly. You can change the default tab that a non-fan lands on in your app settings, but I don’t believe you can control anything beyond that.
http://www.snipe.net snipe

@Jeff – The “become a fan” functionality is performed in Ajax, I think, so I don’t think there’s any way to change that. Better idea is to plan for the fact that fans and non-fans will see it, and message accordingly. You can change the default tab that a non-fan lands on in your app settings, but I don’t believe you can control anything beyond that.
http://www.facebookguru.co.uk/ facebook application developme

Great post! loved it
.-= facebook application development´s last blog ..[Google opensocial development | Opensocial Applicaitons | Facebook Guru London] =-.
http://www.facebookguru.co.uk facebook application development

Great post! loved it
.-= facebook application development´s last blog ..[Google opensocial development | Opensocial Applicaitons | Facebook Guru London] =-.
Ali

I have the same problem with Jamie.But nobody answered his writing.Please reply us.I need to create a comment box to my fan page.
thanks
Jamie:
I am building a fanpage with Static FBML and I need to embed 2 facebook comment boxes for users to leave comments. Is this possible? The canvas app is looking to possibly be a bit out of my current knowledge range.

Any words on this would be greatly appreciated.
Ali

I have the same problem with Jamie.But nobody answered his writing.Please reply us.I need to create a comment box to my fan page.
thanks
Jamie:
I am building a fanpage with Static FBML and I need to embed 2 facebook comment boxes for users to leave comments. Is this possible? The canvas app is looking to possibly be a bit out of my current knowledge range.

Any words on this would be greatly appreciated.
http://www.snipe.net snipe

@Ali – the answer is the same as the one for chewie, adrian and Walter in the comments above. Target and iTunes are both using applications, not FBML boxes.

http://www.facebook.com/apps/application.php?id=82676004266

You cannot add comments to a Static FBML box – you have to make it an application.
http://www.snipe.net snipe

@Ali – the answer is the same as the one for chewie, adrian and Walter in the comments above. Target and iTunes are both using applications, not FBML boxes.

http://www.facebook.com/apps/application.php?id=82676004266

You cannot add comments to a Static FBML box – you have to make it an application.
Tony

Hi there – great site – thanks for the tips! I’m using the FBML app fine – however, one thing I can’t work out is how to change the name of the box so it doesn’t say FBML! In your example you’ve got yours called ‘A Team’.

Any help much appreciated!

cheers

Tony
Tony

Hi there – great site – thanks for the tips! I’m using the FBML app fine – however, one thing I can’t work out is how to change the name of the box so it doesn’t say FBML! In your example you’ve got yours called ‘A Team’.

Any help much appreciated!

cheers

Tony
http://www.snipe.net snipe

Hi Tony – the title of your box determines the title that shows up on the tab – this screenshot may help:
http://www.flickr.com/photos/snipeyhead/3945879399/
http://www.snipe.net snipe

Hi Tony – the title of your box determines the title that shows up on the tab – this screenshot may help:
http://www.flickr.com/photos/snipeyhead/3945879399/
http://dankaclothing.com/ Brian Lord

Hey thank you for the post very good info. I want to create a tab that shows my newly released clothes and also provide a link so my fans can purchase any items they are interested in. Here is an example of what I want to somewhat match. Can you point me in the right direction on figuring this out. The best way I see it working out is that I set up a tab and on that tab it pulls info (products) from my site and displays them on that tabs page. Can this be done?

Threadless page: http://www.facebook.com/search/?q=threadless&init=quick#/threadless?v=app_116832620224&ref=search

My fan page: http://facebook.com/dankaclothing
http://dankaclothing.com Brian Lord

Hey thank you for the post very good info. I want to create a tab that shows my newly released clothes and also provide a link so my fans can purchase any items they are interested in. Here is an example of what I want to somewhat match. Can you point me in the right direction on figuring this out. The best way I see it working out is that I set up a tab and on that tab it pulls info (products) from my site and displays them on that tabs page. Can this be done?

Threadless page: http://www.facebook.com/search/?q=threadless&init=quick#/threadless?v=app_116832620224&ref=search

My fan page: http://facebook.com/dankaclothing
http://www.snipe.net snipe

Hi Brian – yes, its possible, but not with a static FBML box. Threadless is using an application for their tab, and you would have to do the same if you wanted that kind of functionality:
http://www.facebook.com/apps/application.php?id=116832620224
http://www.snipe.net snipe

Hi Brian – yes, its possible, but not with a static FBML box. Threadless is using an application for their tab, and you would have to do the same if you wanted that kind of functionality:
http://www.facebook.com/apps/application.php?id=116832620224
vinnie

I want to do something which I think is very simple but I can not figure it out. I am not as skilled as the others on here. I added the static FBML application to create a custom tab on my charities fan page. I now want to simply link (show) the source web page in this box. Seems like it would be pretty simple, but I have been searching the net for answers. Great info on your site!
Thank you for your help!
vinnie

I want to do something which I think is very simple but I can not figure it out. I am not as skilled as the others on here. I added the static FBML application to create a custom tab on my charities fan page. I now want to simply link (show) the source web page in this box. Seems like it would be pretty simple, but I have been searching the net for answers. Great info on your site!
Thank you for your help!
http://dynastywebsolution.com/ Jarrett Gucci

Great post. I just recently had a client ask me to create a custom Fan Page on Facebook and I never have done it before but said I would figure it out. This post really helped and the final product (http://www.facebook.com/cherylburkedancestudios) gave me a new idea of offering this service in my company at a fraction of the price all others are doing it. I think these new “Facebook Websites” could be a great way for business owners to stand out on Facebook. It is also a good way to look different if you are using it for personal reason.

Thank you author

Jarrett Gucci
jgucci@dynastywebsolutions.com
http://dynastywebsolution.com Jarrett Gucci

Great post. I just recently had a client ask me to create a custom Fan Page on Facebook and I never have done it before but said I would figure it out. This post really helped and the final product (http://www.facebook.com/cherylburkedancestudios) gave me a new idea of offering this service in my company at a fraction of the price all others are doing it. I think these new “Facebook Websites” could be a great way for business owners to stand out on Facebook. It is also a good way to look different if you are using it for personal reason.

Thank you author

Jarrett Gucci
jgucci@dynastywebsolutions.com
Ward

Hi Snipey,

I have a tab enabled app that is set to iframe mode and embedded in a fan page and it keeps throwing a “Cannot allow external script” error and eating my links. I am trying to include some jquery goodness in this app.

Could you hazard a guess as to why I might be getting this type of error? The app is working fine otherwise. Well, mostly, the other issue i have is if I try and access it from apps.facebook.com/… then it shows a “page not found” but it works when it is embedded in the fan page.

Thanks infinitely,
W
Ward

Hi Snipey,

I have a tab enabled app that is set to iframe mode and embedded in a fan page and it keeps throwing a “Cannot allow external script” error and eating my links. I am trying to include some jquery goodness in this app.

Could you hazard a guess as to why I might be getting this type of error? The app is working fine otherwise. Well, mostly, the other issue i have is if I try and access it from apps.facebook.com/… then it shows a “page not found” but it works when it is embedded in the fan page.

Thanks infinitely,
W
http://www.facebook.com/people/Apple-Jax/1701177139 Apple Jax

Any idea how to get videos to work in the Static FBML box? It doesn’t seem to work.
thanks.
http://www.facebook.com/people/Apple-Jax/1701177139 Apple Jax

Any idea how to get videos to work in the Static FBML box? It doesn’t seem to work.
thanks.
http://www.lyocell.ch/ Lyocell

Hello all

I think I have the same question as Vinie postet on the Sep 25 (hope its from this year ) I have a Homepage (www.lyocell.ch) that I would like to show directly in my box. But I have no idea how to do this….I am even not sure if this is possible. Is it? What I tried is:

I thought that could work because like that I also embed my lightroom galleries into my iWeb homepage.

Would really appreciate if you could give me an answer.

Positive vibrations
Lyocel
http://www.lyocell.ch Lyocell

Hello all

I think I have the same question as Vinie postet on the Sep 25 (hope its from this year ) I have a Homepage (www.lyocell.ch) that I would like to show directly in my box. But I have no idea how to do this….I am even not sure if this is possible. Is it? What I tried is:

I thought that could work because like that I also embed my lightroom galleries into my iWeb homepage.

Would really appreciate if you could give me an answer.

Positive vibrations
Lyocel
http://www.playrugbyusa.com/ Dom Wareing

I am struggling with the static FBML app, i put in my HTML save changes but then when you go back to the page and “Get involved” nothing but a blank page, here is the htmal i am trying to upload:

“Get Involved”

Donate to Play Rugby
USA:
Your donation will help us continue to drive forward
our philosophy of ‘Developing Youth through Rugby’ by spreading our mission
throughout American schools and youth organizations. Donations will go directly
towards programs, event scholarships, curriculum development, staff training and
operating costs, to ensure that every child can afford to play rugby.

VOLUNTEER WITH PLAY RUGBY
USA:
We encourage parents, students and other CBOs to get involved with
our programs and offer training courses for those interested in learning how to
coach and referee flag rugby. Additionally, we can help you get a program going
at your neighborhood school by providing all the necessary information, support
and training that you may require. To get involved simply follow this link
and complete the form.

Thanks for the help
http://www.playrugbyusa.com Dom Wareing

I am struggling with the static FBML app, i put in my HTML save changes but then when you go back to the page and “Get involved” nothing but a blank page, here is the htmal i am trying to upload:

“Get Involved”

Donate to Play Rugby
USA:
Your donation will help us continue to drive forward
our philosophy of ‘Developing Youth through Rugby’ by spreading our mission
throughout American schools and youth organizations. Donations will go directly
towards programs, event scholarships, curriculum development, staff training and
operating costs, to ensure that every child can afford to play rugby.

VOLUNTEER WITH PLAY RUGBY
USA:
We encourage parents, students and other CBOs to get involved with
our programs and offer training courses for those interested in learning how to
coach and referee flag rugby. Additionally, we can help you get a program going
at your neighborhood school by providing all the necessary information, support
and training that you may require. To get involved simply follow this link
and complete the form.

Thanks for the help
Brian

How do you add pictures and paragraphs to “boxes” on the fan page in facebook? I have tried “enter”, “tab”, “shift+enter” and “space bar” but when saved and reviewed, it’s still in a single paragraph. Also wanted to add pictures next to the text.

Follow Me!

Recommended Hosts

My Other Sites

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: