Snipe.Net - Geeky Stuff
Twitter
Currently: @zate hope so! :) in reply to zate 29 mins ago

Static FBML: Not Every Facebook Fan Page Needs An Application

closeThis post was published 2 years 7 months 7 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.

Sunkist Soda Fan Page - Static FBML Box

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:

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

    Hi Chris – no, no required tags. In fact, if you try to include a head/body, Facebook will strip that out, since the page itself already has a head/body (the one Facebook sends with the page load.) Only thing I can think of is that maybe things are still a little wonky after yesterday’s DDoS attack on Facebook. Whaqt have you tried so far?

  • http://www.snipe.net snipe

    Hi Chris – no, no required tags. In fact, if you try to include a head/body, Facebook will strip that out, since the page itself already has a head/body (the one Facebook sends with the page load.) Only thing I can think of is that maybe things are still a little wonky after yesterday’s DDoS attack on Facebook. Whaqt have you tried so far?

  • http://www.ColicCare.com/ Mark

    Hey Snipe,

    First I’d like to say that you rock by helping us all out. I have been digging on the Internet for days trying to find a solution to my problem and so far, you are the only one that is offering advice that may actually work.

    So here is what I’m trying to do. I have a fan page, http://www.facebook.com/pages/Colic-Care/104961885431, and I would like a small box on the left side of the wall that will allow people to invite friends to become fans of Colic Care. I want something like what JCPenney has on their fan page. All I have found so far, is code that is geared toward inviting people to applications. Everything I have tried from the Internet has led to blank boxes and tabs. I have removed Static FBML (from the fan page) and HTML Box (from my personal page) and would like to start from scratch. Could you possible walk me through how to do that? I would greatly appreciate it.

    Thanks in advance,

    Mark

  • http://www.ColicCare.com Mark

    Hey Snipe,

    First I’d like to say that you rock by helping us all out. I have been digging on the Internet for days trying to find a solution to my problem and so far, you are the only one that is offering advice that may actually work.

    So here is what I’m trying to do. I have a fan page, http://www.facebook.com/pages/Colic-Care/104961885431, and I would like a small box on the left side of the wall that will allow people to invite friends to become fans of Colic Care. I want something like what JCPenney has on their fan page. All I have found so far, is code that is geared toward inviting people to applications. Everything I have tried from the Internet has led to blank boxes and tabs. I have removed Static FBML (from the fan page) and HTML Box (from my personal page) and would like to start from scratch. Could you possible walk me through how to do that? I would greatly appreciate it.

    Thanks in advance,

    Mark

  • http://www.facebook.com/people/Rob-Castellucci/2029745 Rob Castellucci

    Hey, very useful post! I’m wondering if you could point me to some resources or know yourself if there’s a way to create a piece of a website inside a fbml tab in your fan page. So really just a window into the website where people could donate, join, put down their information, etc. anything you know of? Thanks!

    • Anonymous

      Hi Snipe,

      Thanks for the great info. Do you know if FBML boxes support javascript? I tried to create a box (banner ad from an ad server) that I would eventually move to the wall, but it’s not working. Any thoughts?

      sr_adspace_id = 2000000247107;
      sr_adspace_width = 180;
      sr_adspace_height = 150;
      sr_ad_new_window = true;
      sr_adspace_type = “graphic”;

      • http://www.snipe.net snipe

        Javascript on Facebook is extremely limited, unforunately. They do that to protect their users from malicious content.

  • http://www.facebook.com/people/Rob-Castellucci/2029745 Rob Castellucci

    Hey, very useful post! I’m wondering if you could point me to some resources or know yourself if there’s a way to create a piece of a website inside a fbml tab in your fan page. So really just a window into the website where people could donate, join, put down their information, etc. anything you know of? Thanks!

  • Arun

    Hi Snipe,

    Thanks for the great post.

    I have a doubt, I was planning to create an app to get our calendar/twitter updates to the same tab. I can create a PHP app for that, but i need to have 2 tabs with twitt/calendar updates.. How can i do that?

    Thx in advance
    Arun

  • Arun

    Hi Snipe,

    Thanks for the great post.

    I have a doubt, I was planning to create an app to get our calendar/twitter updates to the same tab. I can create a PHP app for that, but i need to have 2 tabs with twitt/calendar updates.. How can i do that?

    Thx in advance
    Arun

  • Chris

    Do I need to make a full-fledged application (vs. just use a static fbml tab) if I want this to happen:
    When a user takes an action on my fan page, I want that action to post to their wall, so that their friends will see it in their news feeds.

    Would making that happen require “a call to the API” and therefore needing an app?

    Here’s why I want to do this:
    I’m looking to do some PPC on Facebook. The only reason that I can see to take the user from the ad to my FB fan page (instead of my website) is so that -if- I succeed in getting the user to take the desired action, that I have the chance of it “going viral” via their friends seeing that action in their news feeds.

  • Chris

    Do I need to make a full-fledged application (vs. just use a static fbml tab) if I want this to happen:
    When a user takes an action on my fan page, I want that action to post to their wall, so that their friends will see it in their news feeds.

    Would making that happen require “a call to the API” and therefore needing an app?

    Here’s why I want to do this:
    I’m looking to do some PPC on Facebook. The only reason that I can see to take the user from the ad to my FB fan page (instead of my website) is so that -if- I succeed in getting the user to take the desired action, that I have the chance of it “going viral” via their friends seeing that action in their news feeds.

  • KennyNegs

    Would you be able to tell us how you handled the call to the http://twitter.com/statuses/user_timeline/USERNAME.json since “Javascript src=”doesn’t work?

    Great work, btw!

  • KennyNegs

    Would you be able to tell us how you handled the call to the http://twitter.com/statuses/user_timeline/USERNAME.json since “Javascript src=”doesn’t work?

    Great work, btw!

  • http://www.snipe.net snipe

    Hi KennyNegs – do you mean for the Twitter tab? That tab is actually an application, so I’m using PHP to grab the RSS feed for the Sunkist_Soda user, and than parsing it out for display.

  • http://www.snipe.net snipe

    Hi KennyNegs – do you mean for the Twitter tab? That tab is actually an application, so I’m using PHP to grab the RSS feed for the Sunkist_Soda user, and than parsing it out for display.

  • KennyNegs

    Yep. that makes WAAAY more sense. Thanks a ton!

  • KennyNegs

    Yep. that makes WAAAY more sense. Thanks a ton!

  • Chris

    The more I learn, the less I’m sure that I need to be making an app.

    I’m really only interested in creating a fan page that has a form for people to fill out. -IF- they do fill out that form, then I’d like for that action to be seen by their friends.

    It’s more of an “awarenes cause” than it is an “app” perse. Meaning, I can’t imagine people using the app much more than one time. It will never be like “photos” where its multi-purpose and used daily.

  • Chris

    The more I learn, the less I’m sure that I need to be making an app.

    I’m really only interested in creating a fan page that has a form for people to fill out. -IF- they do fill out that form, then I’d like for that action to be seen by their friends.

    It’s more of an “awarenes cause” than it is an “app” perse. Meaning, I can’t imagine people using the app much more than one time. It will never be like “photos” where its multi-purpose and used daily.

  • Anna

    Hi Snipe,

    I have no programming background whatsoever. I want to add an FBML box to my profile. I’ve been looking at people’s feedback on how to do it but Im still lost, and way in over my head. Any way you could (or show me where) give me step by step directions on how to do it? I know its probably super simple, but it would really help!

    Thanks

  • Anna

    Hi Snipe,

    I have no programming background whatsoever. I want to add an FBML box to my profile. I’ve been looking at people’s feedback on how to do it but Im still lost, and way in over my head. Any way you could (or show me where) give me step by step directions on how to do it? I know its probably super simple, but it would really help!

    Thanks

  • Teresa

    Snipe, I’m creating a business page for a very large company and have the basics. I’m a developer. I’ve been ALL around the world wide web trying to get a very simple basic question answered to no avail!! I see you have accomplished the feat I am trying to do.. Add the ‘Become a Fan’ button underneath the Sunkist name. HOW DID YOU DO THAT???? I can get the code, but have no idea how or where to paste this code to have it appear there on my FB business account.

  • Teresa

    Snipe, I’m creating a business page for a very large company and have the basics. I’m a developer. I’ve been ALL around the world wide web trying to get a very simple basic question answered to no avail!! I see you have accomplished the feat I am trying to do.. Add the ‘Become a Fan’ button underneath the Sunkist name. HOW DID YOU DO THAT???? I can get the code, but have no idea how or where to paste this code to have it appear there on my FB business account.

  • http://www.snipe.net snipe

    Teresa – The become a fan text is there by default, unless you have already fanned the page. Try removing yourself from fans, and reloading. It appears on its own.

  • http://www.snipe.net snipe

    Teresa – The become a fan text is there by default, unless you have already fanned the page. Try removing yourself from fans, and reloading. It appears on its own.

  • Wes

    I have the same question as Mark on 8/7. Has it been answered?

    I want to create a box that will allow me to invite people (who aren’t necessarily my friends) to become fans of my page if I have their e-mails.

  • Wes

    I have the same question as Mark on 8/7. Has it been answered?

    I want to create a box that will allow me to invite people (who aren’t necessarily my friends) to become fans of my page if I have their e-mails.

  • Pingback: (Anti) Social-Lists 8/16/09 | (Anti) Social Development

  • http://www.facebook.com/people/Andy-Ellis/1189316597 Andy Ellis

    Hello,

    I am trying to create a preview of the wall on the boxes page which is where i want non fans to land. My first thought was to put a Fanbox widget into a fbml box, but facebook seems to strip out he javascript, so my next option seems to be to strip out the java script myself and use fbml…but i am not familiar enough with fbml to a)make that work or b) know if it is even possible.

    My page http://www.facebook.com/bmoreconnected definitely includes this preview feature in my ideal world, but i don’t know if it is possible? Is it, and if not using a fanbox then how?

  • http://www.facebook.com/people/Andy-Ellis/1189316597 Andy Ellis

    Hello,

    I am trying to create a preview of the wall on the boxes page which is where i want non fans to land. My first thought was to put a Fanbox widget into a fbml box, but facebook seems to strip out he javascript, so my next option seems to be to strip out the java script myself and use fbml…but i am not familiar enough with fbml to a)make that work or b) know if it is even possible.

    My page http://www.facebook.com/bmoreconnected definitely includes this preview feature in my ideal world, but i don’t know if it is possible? Is it, and if not using a fanbox then how?

  • Pingback: Creating Custom Tabs For Facebook Fan Pages | AJ Vaynerchuk

  • http://www.snipe.net snipe

    Hi Andy – To my knowledge, this just isn’t possible – also, it’s not really necessary, since the “Become a fan” link that Facebook includes is all the way at the top of the page, impossible to miss. I find with Facebook, a lot of what I’d like to do isn’t possible, so it requires a different approach. You might try a graphic that suggests people fan the page, or reminds them to, but to my knowledge, there is no way to put a “become a fan” workin functional widget in an FBML box.

  • http://www.snipe.net snipe

    Hi Andy – To my knowledge, this just isn’t possible – also, it’s not really necessary, since the “Become a fan” link that Facebook includes is all the way at the top of the page, impossible to miss. I find with Facebook, a lot of what I’d like to do isn’t possible, so it requires a different approach. You might try a graphic that suggests people fan the page, or reminds them to, but to my knowledge, there is no way to put a “become a fan” workin functional widget in an FBML box.

  • http://www.ColicCare.com/ Mark

    Hey Snipe,

    Mark here again, from the Aug 7th request/post. If you search JCPenney on Facebook and look on their wall, they do exactly that. On the left side of the wall is an image that allows users to select their friends and invite to become a fan. This was the functionality that I was hoping you could help me with. I’d like to do the same thing that they do. I guess that Wes from the Aug 15th post was looking for the same thing. Any help on how to duplicate what JCPenney did would be great.

    Thanks again,

    Mark

  • http://www.ColicCare.com Mark

    Hey Snipe,

    Mark here again, from the Aug 7th request/post. If you search JCPenney on Facebook and look on their wall, they do exactly that. On the left side of the wall is an image that allows users to select their friends and invite to become a fan. This was the functionality that I was hoping you could help me with. I’d like to do the same thing that they do. I guess that Wes from the Aug 15th post was looking for the same thing. Any help on how to duplicate what JCPenney did would be great.

    Thanks again,

    Mark

  • http://www.snipe.net snipe

    Mark – please give me a link to the fan page – when I search on JC Penny, I get nothing relevant.

  • http://www.snipe.net snipe

    Mark – please give me a link to the fan page – when I search on JC Penny, I get nothing relevant.

  • http://www.ColicCare.com/ Mark
  • http://www.ColicCare.com Mark
  • Chris

    @Andy Ellis
    The code for a “fanbox widget” is for use on websites OTHER THAN facebook. It is for getting people already at your site to also become your facebook fan page fans. So yes – you are correct – the fbml box is stripping out the javascript. You can do the JS equivalent by learning fbjs – there’s no shortcut here – you’re just going to have to learn it.

    @Mark & @Wes
    If you want it to show up on your wall tab, then it will have to be added to the wall as a box. To add as a box, it must be an application. So you are going to have to learn how to create an application. In your case, a simple fbml box will not be enough.

  • Chris

    @Andy Ellis
    The code for a “fanbox widget” is for use on websites OTHER THAN facebook. It is for getting people already at your site to also become your facebook fan page fans. So yes – you are correct – the fbml box is stripping out the javascript. You can do the JS equivalent by learning fbjs – there’s no shortcut here – you’re just going to have to learn it.

    @Mark & @Wes
    If you want it to show up on your wall tab, then it will have to be added to the wall as a box. To add as a box, it must be an application. So you are going to have to learn how to create an application. In your case, a simple fbml box will not be enough.

  • http://www.facebook.com/people/Andy-Ellis/1189316597 Andy Ellis

    Its not the become a fan functionality that i am trying to acheive, what i want is the ability for people who land on boxes to see the topic of the daily discussion on the wall…I speant some time working on it and have a solution i am going to try to implement tonight that simply uses an rss feed…it requires more day to day tasks on my part but it solves he problem while i am learning a more automated approach…thanks for the help!

  • http://www.facebook.com/people/Andy-Ellis/1189316597 Andy Ellis

    Its not the become a fan functionality that i am trying to acheive, what i want is the ability for people who land on boxes to see the topic of the daily discussion on the wall…I speant some time working on it and have a solution i am going to try to implement tonight that simply uses an rss feed…it requires more day to day tasks on my part but it solves he problem while i am learning a more automated approach…thanks for the help!

  • http://www.snipe.net snipe

    Andy – As I said, I don’t think you can do this through a static FBML box, since the code needs to access the API in order to get a list of your friends, to populate the box. JC Penney is using an app for their widget box.

  • http://www.snipe.net snipe

    Andy – As I said, I don’t think you can do this through a static FBML box, since the code needs to access the API in order to get a list of your friends, to populate the box. JC Penney is using an app for their widget box.

  • http://arbynblog.blogspot.com/ Robyn

    This information will definitely change my life. I can’t wait to put it into use.

    Thank you for sharing. Also, your Facebook Sunkist page is an absolute gem!
    .-= Robyn´s last blog ..One more Ottawa anecdote =-.

  • http://arbynblog.blogspot.com Robyn

    This information will definitely change my life. I can’t wait to put it into use.

    Thank you for sharing. Also, your Facebook Sunkist page is an absolute gem!
    .-= Robyn´s last blog ..One more Ottawa anecdote =-.

  • http://www.facebook.com/pages/Des-Moines-IA/RPO-Consulting/157479305596?v=app_4949752878 Ben Stone

    I was pretty stoked to read this post – it was right in line with what I’ve been telling folks the last few weeks after finding out how to use the Static FBML app. Stoked and a little smug until I read the last line and realized that “any jackhole who knows basic HTML can handle themselves”. Oh well, I guess I’m a Jackhole with some cool custom content for my FB page.

    Just busting your balls a little Snipe – great write up and dead on in terms of how the FB really shines with some basic old school HTML. I think that many of the current current platforms are the same – who would have thought I’d need to sharpen up my low rez image vectoring skills to make a Twitter background? HTML for FB. LinkedIn is even more basic and limiting. Take care – ben

  • http://www.facebook.com/pages/Des-Moines-IA/RPO-Consulting/157479305596?v=app_4949752878 Ben Stone

    I was pretty stoked to read this post – it was right in line with what I’ve been telling folks the last few weeks after finding out how to use the Static FBML app. Stoked and a little smug until I read the last line and realized that “any jackhole who knows basic HTML can handle themselves”. Oh well, I guess I’m a Jackhole with some cool custom content for my FB page.

    Just busting your balls a little Snipe – great write up and dead on in terms of how the FB really shines with some basic old school HTML. I think that many of the current current platforms are the same – who would have thought I’d need to sharpen up my low rez image vectoring skills to make a Twitter background? HTML for FB. LinkedIn is even more basic and limiting. Take care – ben

  • Tom

    Hi,

    I am a newbie and non-programmer (like Anna on the 14th, who didn’t get answered). I’ve gotten to the point where i have an FBML Tab on my page, but that’s it. When I click on the tab I don’t get any place to type any code, just a blank white area that doesn’t accept any keystrokes (the space underneath does look for a second or two like something is going to happen, but nothing does). The only thing I can do is to click on the pencil to the right of FBML and be allowed to “delete” the FBML Tab, which I’ve accidentally done several times.

    Is this what Facebook developers bug#6377 is – and is it still unresolved?

    Thanks in advance

    - Tom

  • http://None Tom

    Hi,

    I am a newbie and non-programmer (like Anna on the 14th, who didn’t get answered). I’ve gotten to the point where i have an FBML Tab on my page, but that’s it. When I click on the tab I don’t get any place to type any code, just a blank white area that doesn’t accept any keystrokes (the space underneath does look for a second or two like something is going to happen, but nothing does). The only thing I can do is to click on the pencil to the right of FBML and be allowed to “delete” the FBML Tab, which I’ve accidentally done several times.

    Is this what Facebook developers bug#6377 is – and is it still unresolved?

    Thanks in advance

    - Tom