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.snipe.net snipe

Are you using tables or CSS divs? If you’re using divs (which you should be), you have to set a height to the div as well. Other than that, I can’t think of anything off the top of my head without seeing the code.
http://www.snipe.net snipe

Are you using tables or CSS divs? If you’re using divs (which you should be), you have to set a height to the div as well. Other than that, I can’t think of anything off the top of my head without seeing the code.
http://www.snipe.net snipe

@Facebook User – how are you trying to set up the invite page? What code are you using int he FBML box, I mean?
http://www.snipe.net snipe

@Facebook User – how are you trying to set up the invite page? What code are you using int he FBML box, I mean?
puneet

hi,

very informative article.

how can i detect that a user clicking on a tab on a fan page is a fan of the page or not and display the contents of tab based on that information similar to what vh1 has done here http://www.facebook.com/s.php?init=q&q=vh1&ref=ts#/VH1.tv?ref=s
puneet

hi,

very informative article.

how can i detect that a user clicking on a tab on a fan page is a fan of the page or not and display the contents of tab based on that information similar to what vh1 has done here http://www.facebook.com/s.php?init=q&q=vh1&ref=ts#/VH1.tv?ref=s
http://www.iristools.com/ pablo ciccarello

First of all, Congratulations for your carrier.
Second, this articles denotes that you are really commited to share your knowledge, great deal!
I will try to implement it to a FaceBook proyect that a client has ordered me.
But I preffer to contract you to develop something similar (Twitter, form and campaigns tabs) in my FB site.
http://www.iristools.com pablo ciccarello

First of all, Congratulations for your carrier.
Second, this articles denotes that you are really commited to share your knowledge, great deal!
I will try to implement it to a FaceBook proyect that a client has ordered me.
But I preffer to contract you to develop something similar (Twitter, form and campaigns tabs) in my FB site.
http://www.snipe.net snipe

@puneet – you can use the Pages.isFan API call if you’re creating an actual application:
http://wiki.developers.facebook.com/index.php/Pages.isFan

If you’re just using an FBML box, not your own application, you can use the FBML tag visible-to-connection:
http://wiki.developers.facebook.com/index.php/Fb:visible-to-connection
http://www.snipe.net snipe

@puneet – you can use the Pages.isFan API call if you’re creating an actual application:
http://wiki.developers.facebook.com/index.php/Pages.isFan

If you’re just using an FBML box, not your own application, you can use the FBML tag visible-to-connection:
http://wiki.developers.facebook.com/index.php/Fb:visible-to-connection
http://www.plaidpony.com/ plaidpony

Quick question. I have a static FBML application that I can add to a tab on the fan page, but it doesn’t have the option to add it as a box–what do I need to do to get it to work? The page is here: http://www.facebook.com/home.php?#/BestWestern?v=wall&viewas=1046181173 and the tab is the “Find a Hotel” tab.
http://www.plaidpony.com plaidpony

Quick question. I have a static FBML application that I can add to a tab on the fan page, but it doesn’t have the option to add it as a box–what do I need to do to get it to work? The page is here: http://www.facebook.com/home.php?#/BestWestern?v=wall&viewas=1046181173 and the tab is the “Find a Hotel” tab.
http://www.snipe.net snipe

@plaidpony – Have you set fb:wide and/or fb:narrow and then called setFBML in your code? Would look something like this, assuming $fbml is the variable you’re keeping all of your out in (also the FBML brackets are replaced by braces for this example so WordPress won’t eat them:

$wide_fbml = ‘{fb:wide}’;
$wide_fbml = .= ‘My wide box content’;
$wide_fbml = ‘{/fb:wide}’;

$narrow_fbml .= ‘{fb:narrow}’;
$narrow_fbml = ‘My narrow box content’;
$narrow_fbml = ‘{/fb:narrow}’;

$all_fbml = $wide_fbml.$narrow_fbml;

$facebook->api_client->profile_setFBML(NULL, $Page_ID, $all_fbml, NULL, NULL, $narrow_fbml);

For reference:
http://wiki.developers.facebook.com/index.php/Fb:wide
http://wiki.developers.facebook.com/index.php/Fb:narrow
http://wiki.developers.facebook.com/index.php/Profile.setFBML
http://www.snipe.net snipe

@plaidpony – Have you set fb:wide and/or fb:narrow and then called setFBML in your code? Would look something like this, assuming $fbml is the variable you’re keeping all of your out in (also the FBML brackets are replaced by braces for this example so WordPress won’t eat them:

$wide_fbml = ‘{fb:wide}’;
$wide_fbml = .= ‘My wide box content’;
$wide_fbml = ‘{/fb:wide}’;

$narrow_fbml .= ‘{fb:narrow}’;
$narrow_fbml = ‘My narrow box content’;
$narrow_fbml = ‘{/fb:narrow}’;

$all_fbml = $wide_fbml.$narrow_fbml;

$facebook->api_client->profile_setFBML(NULL, $Page_ID, $all_fbml, NULL, NULL, $narrow_fbml);

For reference:
http://wiki.developers.facebook.com/index.php/Fb:wide
http://wiki.developers.facebook.com/index.php/Fb:narrow
http://wiki.developers.facebook.com/index.php/Profile.setFBML
http://tksham.com/ tksham

plaidpony,
I just came across the same problem but I managed to figure it out.

Make sure you have “add to MY page” in Static FBML
Go to the profile page for your application
And Edit Application (top left, right below go to application)
FBML – FBML (the little pen)
application setting
and you will find the setting for box and tab
http://tksham.com tksham

plaidpony,
I just came across the same problem but I managed to figure it out.

Make sure you have “add to MY page” in Static FBML
Go to the profile page for your application
And Edit Application (top left, right below go to application)
FBML – FBML (the little pen)
application setting
and you will find the setting for box and tab
http://www.snipe.net snipe

@plaidpony – I’m so sorry – I misread your original comment, and thought you were NOT using Static FBML, but were instead using a custom built application. Ignore my comment – that will only work in a custom application. My apologies.

tksham is correct on where to find the settings for box and tab.
http://www.snipe.net snipe

@plaidpony – I’m so sorry – I misread your original comment, and thought you were NOT using Static FBML, but were instead using a custom built application. Ignore my comment – that will only work in a custom application. My apologies.

tksham is correct on where to find the settings for box and tab.
http://www.plaidpony.com/ plaidpony

When I go to the application profile page and click “Edit Application”, my only options are “Application Information”, “Application Settings”, “Wall Settings”, “Mobile”, “Discussion Boards, “Reviews”, and “More Applications”–there is nothing that is titled “FBML” on the page.
http://www.plaidpony.com plaidpony

When I go to the application profile page and click “Edit Application”, my only options are “Application Information”, “Application Settings”, “Wall Settings”, “Mobile”, “Discussion Boards, “Reviews”, and “More Applications”–there is nothing that is titled “FBML” on the page.
http://www.snipe.net snipe

And what do you see when you click on Application Settings?
http://www.snipe.net snipe

And what do you see when you click on Application Settings?
http://tksham.com/ tksham

plaidpony,
that’s strange, have you add the pages to your app in the FBML app?
http://www.facebook.com/apps/application.php?id=4949752878
there is “add to My page” near the app logo

snipe,
I would like to know how to create a custom application for embedding into company’s page, would you please share any ideas /post / tutorials with us?
.-= tksham´s last blog ..How innovation … =-.
http://tksham.com tksham

plaidpony,
that’s strange, have you add the pages to your app in the FBML app?
http://www.facebook.com/apps/application.php?id=4949752878
there is “add to My page” near the app logo

snipe,
I would like to know how to create a custom application for embedding into company’s page, would you please share any ideas /post / tutorials with us?
.-= tksham´s last blog ..How innovation … =-.
http://www.snipe.net snipe

@tksham – I have a few articles on writing facebook apps, but haven’t had time to put up a tutorial on writing one from scratch, start to finish yet:

http://www.snipe.net/2008/09/planning-a-facebook-application/
http://www.snipe.net/2008/12/planning-a-facebook-application-part-two/

There are several good tutorials out there already though – just check Google:
http://tinyurl.com/kqm2r4
http://www.snipe.net snipe

@tksham – I have a few articles on writing facebook apps, but haven’t had time to put up a tutorial on writing one from scratch, start to finish yet:

http://www.snipe.net/2008/09/planning-a-facebook-application/
http://www.snipe.net/2008/12/planning-a-facebook-application-part-two/

There are several good tutorials out there already though – just check Google:
http://tinyurl.com/kqm2r4
http://tksham.com/ tksham

@snipe,

I am sorry to bother you. (I know you are spending your own time to share with us, it is very kind of you.)

Thanks to your posts, I figure it out that I missed typing the URL in the tab URL…that’s why I cannot choose to add the tab in my page.

But the problem now is that I cannot set the Tab URL correctly

my app is stored in xxx.com/facebook_dev
and if I set the Tab URL to tab
it will return

Errors while loading page from application
Runtime errors:

fb:redirect: redirect forbidden by flavor TabFBMLFlavor

and if I set the Tab URL to index.php

Errors while loading page from application

The URL http://xxx.com/facebook_devindex.php returned a 404 Not Found error.

Any ideas?
.-= tksham´s last blog ..How innovation … =-.
http://tksham.com tksham

@snipe,

I am sorry to bother you. (I know you are spending your own time to share with us, it is very kind of you.)

Thanks to your posts, I figure it out that I missed typing the URL in the tab URL…that’s why I cannot choose to add the tab in my page.

But the problem now is that I cannot set the Tab URL correctly

my app is stored in xxx.com/facebook_dev
and if I set the Tab URL to tab
it will return

Errors while loading page from application
Runtime errors:

fb:redirect: redirect forbidden by flavor TabFBMLFlavor

and if I set the Tab URL to index.php

Errors while loading page from application

The URL http://xxx.com/facebook_devindex.php returned a 404 Not Found error.

Any ideas?
.-= tksham´s last blog ..How innovation … =-.
http://www.snipe.net snipe

Hi tksham – I actually wrote about this issue here:
http://www.snipe.net/2009/04/facebook-application-tabs/
http://www.snipe.net snipe

Hi tksham – I actually wrote about this issue here:
http://www.snipe.net/2009/04/facebook-application-tabs/
http://www.plaidpony.com/ plaidpony

I feel like such a dork–another developer already had some Static FBML boxes on the page–they were labeled as [box name] – FBML and I didn’t realize that those were the Static FBML application boxes–I was specifically looking for FBML – FBML. I was able to add another box successfully. Thanks for the help!
http://www.plaidpony.com plaidpony

I feel like such a dork–another developer already had some Static FBML boxes on the page–they were labeled as [box name] – FBML and I didn’t realize that those were the Static FBML application boxes–I was specifically looking for FBML – FBML. I was able to add another box successfully. Thanks for the help!
Becks

Do you know if FBML boxes support image maps? The map in my html does not work when I use it on facebook. Thanks.
Becks

Do you know if FBML boxes support image maps? The map in my html does not work when I use it on facebook. Thanks.
http://www.snipe.net snipe

@Becks – I believe so, but I usually CSS to make imagemaps, not HTML. Can you use pastebin.com or something similar to show me the code you’re using?
http://www.snipe.net snipe

@Becks – I believe so, but I usually CSS to make imagemaps, not HTML. Can you use pastebin.com or something similar to show me the code you’re using?
Becks

For some reason pastebin is labeling my code as spam?
Becks

For some reason pastebin is labeling my code as spam?
Becks

Here is the coding I tried using: http://www.transferbigfiles.com/Get.aspx?id=acfc8a50-4796-4b87-878f-5027f8bf874f
Becks

Here is the coding I tried using: http://www.transferbigfiles.com/Get.aspx?id=acfc8a50-4796-4b87-878f-5027f8bf874f
http://www.snipe.net snipe

@Becks – okay, well two things off the top of my head:

1) Skip the html/body tags
2) Your imagemap image is a link itself:

{a href=”http://s722.photobucket.com/albums/ww221/beckssphotobucket/?action=view&current;=FinalFBTabSmall.jpg” target=”_blank”}
{img src=”http://i722.photobucket.com/albums/ww221/beckssphotobucket/FinalFBTabSmall.jpg” border=”0″ alt=”LTM” width=”575″ height=”615″
usemap=”#map”}{/a}

If the image is an imagemap, it shouldn’t have a link surrounding it, since the href locations are defined by the map coords.
http://www.snipe.net snipe

@Becks – okay, well two things off the top of my head:

1) Skip the html/body tags
2) Your imagemap image is a link itself:

{a href=”http://s722.photobucket.com/albums/ww221/beckssphotobucket/?action=view&current=FinalFBTabSmall.jpg” target=”_blank”}
{img src=”http://i722.photobucket.com/albums/ww221/beckssphotobucket/FinalFBTabSmall.jpg” border=”0″ alt=”LTM” width=”575″ height=”615″
usemap=”#map”}{/a}

If the image is an imagemap, it shouldn’t have a link surrounding it, since the href locations are defined by the map coords.
Becks

Hmmm. It is still now working. Thanks for the try.
Becks

Hmmm. It is still now working. Thanks for the try.
http://www.snipe.net snipe

I’ll try to take a stab tonight when I get home from work, and see if I can get it working. Otherwise you might try a CSS imagemap instead. I don’t remember having any issues with FBML boxes and imagemaps, but it’s been a while since I used an imagemap in an FBML box.
http://www.snipe.net snipe

I’ll try to take a stab tonight when I get home from work, and see if I can get it working. Otherwise you might try a CSS imagemap instead. I don’t remember having any issues with FBML boxes and imagemaps, but it’s been a while since I used an imagemap in an FBML box.
cocopop

Hi there,

Really good article. Just a quick question. Is it possible to add static FBML boxes inside a static FBML tab?

If yes, how?

Thanks.
cocopop

Hi there,

Really good article. Just a quick question. Is it possible to add static FBML boxes inside a static FBML tab?

If yes, how?

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

@cocpop – well, no – but you wouldn’t need to. If you want the appearance of separate boxes within a static FBML tab, you would just design your HTML/FBML within that static FBML box that you’re using as a tab to give the appearance of being multiple boxes. You can’t put an app inside an app, and the static FBML box is an app.

http://www.facebook.com/valerie.cudnik Valerie Deloy Cudnik

Delayed, but Im stumped on this. I’ve got a decent fan page all html/fbml (sized to the newer narrower spec that is coming our way) but the client wants a fan box on it. I’ve tried everything I can think of — fb:iframe, etc., but I’m getting nothing but space. Actually considering hosting the freaking fan box on a html page on my site and iframing it in. Lots of back and forth. They only have a few hundred fans, so it won’t get all the much traffic while I figure it out. The wiki says to use the iframe with fb fan info inside it, but it’s still not working for me. No clear examples anywhere that I can find.

Help please!

http://www.snipe.net snipe

What do you mean you want a fan box in it – the fanbox widget that lets you fan the page, see some of the current fans, etc?
http://www.snipe.net snipe

Facebook Pages already contain the ability for viewers to become a fan. And if you’re already a fan, the ‘Become a Fan’ button changes to ‘You Are a Fan’.

You cannot use iframes in static FBML boxes, and to my knowledge, fb:fan will not work within Facebook – it’s meant to live on other sites.
http://www.snipe.net snipe

Facebook Pages already contain the ability for viewers to become a fan. And if you’re already a fan, the ‘Become a Fan’ button changes to ‘You Are a Fan’.

You cannot use iframes in static FBML boxes, and to my knowledge, fb:fan will not work within Facebook – it’s meant to live on other sites.

http://www.facebook.com/valerie.cudnik Valerie Deloy Cudnik

Delayed, but Im stumped on this. I’ve got a decent fan page all html/fbml (sized to the newer narrower spec that is coming our way) but the client wants a fan box on it. I’ve tried everything I can think of — fb:iframe, etc., but I’m getting nothing but space. Actually considering hosting the freaking fan box on a html page on my site and iframing it in. Lots of back and forth. They only have a few hundred fans, so it won’t get all the much traffic while I figure it out. The wiki says to use the iframe with fb fan info inside it, but it’s still not working for me. No clear examples anywhere that I can find.

Help please!

http://www.snipe.net snipe

@cocpop – well, no – but you wouldn’t need to. If you want the appearance of separate boxes within a static FBML tab, you would just design your HTML/FBML within that static FBML box that you’re using as a tab to give the appearance of being multiple boxes. You can’t put an app inside an app, and the static FBML box is an app.

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: