Home » Web Development » Static FBML: Not Every Facebook Fan Page Needs An Application
Static FBML: Not Every Facebook Fan Page Needs An Application

Static FBML: Not Every Facebook Fan Page Needs An Application

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.


FBML and FBJS were deprecated by Facebook in 2012 in place of iframe applications, so the code in this article will not work anymore. This article is being kept here for historical purposes only.

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.

Advertisement

468x60_makemoney

Advertisement

Graphic River

flattr this!

About snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist, and the CTO at Mass Mosaic in New York City. Tweet at me @snipeyhead or read more...
  • forrestwang

    very good article.

    btw ,if i want to create an application for the Fan Page.how would i do?

  • http://www.snipe.net snipe

    You would create it as any other FB app, and specify what file you wish to use as the tab in your FB app settings.

  • Duncan

    Hi Snipe

    Sorry to bother but Im going crazy. I have set up a new welcome page which works great, and I wam trying to make it the default page people see when first visiting the site. It should be really easy – as the page should be available in the dropdown in wall settings > Default Landing Tab for Everyone Else, but my new tab is just not an option in there. I only have the option for Info or Wall – thats it. I've scoured for a solution around the net but noone seems to have this issue. Have you any idea why I cant set the page as default? Thanks in advance!

  • http://www.snipe.net snipe

    Hi Duncan – looks like this has been brought up on the developer forums. No word on why it's happening yet:
    http://forum.developers.facebook.com/viewtopic….

  • Summer

    Just ran across this site. This may be a silly question, but do you have to have a personal profile linked to your business page in order to install Static FBML? Do you recommend having a personal profile linked to a corporate site?

  • http://www.snipe.net snipe

    Hi Summer – The public can't see who the admins of a page are, so there's no real harm in linking the two. But if you're paranoid, you can always create a separate profile.

  • Duncan

    Thanks! I actually fixed it – I had to “like” my own page – then they appeared – maybe I was being stupid. But without being my own fan I couldn't see those drop downs. Maybe it will help someone else

  • http://davidlawton.com david

    Any idea how to add a like button for page within the static fbml?

    Cheers!

  • kevin

    same problem for me… any solution?

  • Santosh Setty

    Firstly thanks snipe for nice tuts, i just wonder how you displayed twitter feeds on facebook page?? suggestion would be appreciated.

    Thanks
    Santosh Setty

  • http://www.snipe.net snipe

    I created a cutom application that pulls from the Twitter API. If you don't want to (or don't know how to) make a FB application that reads from the twitter API, you can use one of these badges. Normal JS won't work on FBML boxes, but a few image/html/flash based options are listed. http://mashable.com/2009/03/30/twitter-badges/

  • http://www.santoshsetty.com Santosh Setty

    Thanks a lot for the reply

  • Jasonwilliams2005

    Very Cool Post I actually discovered Static FBML and was searching on ways to use it when I stubled on your site. The only thing is I am trying to set up a good looking FB page for my website http://pokerheavy.com and it seems like the FBML box only publishes to bxes can I use FBML to create a wall back ground? or in the other sections?

  • http://www.snipe.net snipe

    You can set it as a tab or in boxes, but when you first add it, it will always default to boxes. Go to Edit Page, find the FBML box you just created, and click on the “application settings” link underneath it. A popup will show up that shows two options – boxes and tab. click “remove” to remove the FBML box from Boxes, and click “add” next to Tabs to add the tab.

  • Maurizio

    Hi snipe, good stuff really. I have a question though; do you know how to put a video within a picture? here is an example, http://www.facebook.com/HiltonCaribbean, thanks!

  • http://www.snipe.net snipe

    They're not really putting a video within a picture – they've just set the background-image for the div to a specific image, and then coded in a video on top.

  • Maurizio

    oh ok….and do you happen to know how to do that?…:)
    Thanks

  • Mark

    Hey Snipe, thanks for all the help! I was wondering if you knew of a way to get around making the user click “Add a comment…” when using the <fb:comments> tag. I found an example of it on this page and now i just have to have it! http://www.facebook.com/threadless?v=app_116832

  • http://www.snipe.net snipe

    Hi Mark – they may not be using the fb:comments tag, since that tab is definitely an application. It might be a custom commenting piece.

  • Mark

    Well I suppose I will let that go for now… Unfortunately, I am actually having a real problem now.

    I wrote my page and it has a fb:swf object on it. Now I want this item to change everyday, so i thought thats pretty simple and made a file named facebook.swf and facebook.jpg on my domain. I then have a script that will overwrite those files with new files of the same name. Now every time the script runs the flash runs perfectly, however, the image is not updated in real time and I see the last image that was used for some time after it has changed.

    I am guessing that Facebook is caching that image and it is only refreshed every so often. I know its a long shot for you to know of anyway to reset that cache (especially since the idea would be to do it from code so I don't have to), but is there anything you can think of to help me out?

  • Mark

    And in fact now it is sometime reverting back to the very first image that was stored as facebook.jpg and seems to sporadically show images that were used before.

  • http://www.snipe.net snipe

    Yeah, the problem is that Facebook aggressively caches image across multiple CDNs, which is why I'd normally use an application for a situation like that (instead of a static FBML tab), since I can use the API to request an image refresh.

    You might try setting a clear transparent gif as the swf image, and then setting a background image via CSS in a div that the swf sits in. CSS calls to external images don't get cached I don't think, so that might work. Something like:

    <div style="background: url(http://example.com/image.png)">[your swf code]</div>

  • Mark

    I gave it a try and it looks like they may also cache the css image. Ill give it a little time to maybe clear itself out, but I will probably have to write an application or go with a generic play image…

    Thanks for the try though.

  • http://www.snipe.net snipe

    Sorry I can't be of more help. :( The CSS trick was the only thing I could think of that wouldn't require an app. If you did an app, though, you could basically use the same code, just tack a timestamp onto the end of the image/swf urls so that it forces a unique url every day. Wouldn't be a lot of extra work.

  • http://twitter.com/MindworksChile MindworksChile

    I think I know what you mean… and it is easy, I have something similar on one of my pages. Check out one of my clients pages ( http://www.facebook.com/wsichile ). When you get there, it should automatically be opening on the BIENVENIDO (welcome in Spanish tab.) The tab is basically set up like a mini website, with its own navigation bar, etc. On the navigation is an option called “Estudio”.

    Choose ESTUDIO and you will see a little text, and a image of a lady holding a notice board. Click on her, and you can se I have a swf running behind her. Now, in this case it is an swf… but the mechanics are the same for movies, or whatever you need.

    Have a check, and if it is what you were asking, I can copy/paste the code for the image/media here for you.

    Let me know

  • Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources - Smashing Magazine()

  • Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | ()

  • Pingback: TG Designer » Designing A Facebook Fan Page: Showcases, Tutorials, Resources()

  • Jeffrey

    Hi snipe. Great stuff in here. I've researched all the links you've provided, but I'm still having trouble. Here is my situation:

    here is my fan page: http://www.facebook.com/EZLinksGolf

    I created a new tab called: Online Tee Times

    I would like feed in this URL: http://zodiacfalls1.ezlinks.com (it is an online booking engine for golf tee times)

    Here is the code that I have:

    <fb:iframe src=”https://zodiacfalls1.ezlinks.com/%28S%28tcyy0sav1z1yr4qwyzfrk5fy%29%29/Search/ReservationSearch.aspx”></fb:iframe>

    The URL in the code is what it resolves to. Not sure if this matters or not. In any case, when I click on the Online Tee Times tab a blank page shows up.

    Thank you in advance for any help.

    -Jeff

  • http://www.snipe.net snipe

    That's because iframes are not allowed in FBML tabs. :(

  • Jeffrey

    So I would need to make an application? What are my options if I want to feed in a URL into an iframe?

    Thanks again.

  • http://www.snipe.net snipe

    Well, yeah. You've either got to make it into an application and set up the iframe that way, OR, there is a hack that allows you to place an iframe into an fbml box, but being that it's a hack, it's not endorsed (or technically allowed) by Facebook, so that means it can stop working at any time.

    &lt;script&gt;<br><br>function foo(){<br>    ajax = new Ajax();<br>    ajax.responseType = Ajax.FBML;<br><br>    ajax.ondone = function(data){<br>      dlg = new Dialog().showMessage(&#39;title&#39;,data);<br>    }<br><br>    ajax.post(&#39;http://yoursite.com/test.php&#39;);<br>}<br><br>&lt;/script&gt;<br><br>&lt;a href="#" onclick="foo(); return false;"&gt;book your green</a>

    Then you have a file, script, whatever resource you want, that serves up the iframe. The contents of that file (in this example, test.php) are:

    <fb:iframe src="https://zodiacfalls1.ezlinks.com/%28S%28tcyy0sav1z1yr4qwyzfrk5fy%29%29/Search/ReservationSearch.aspx"></fb:iframe>
  • Pingback: ArticleSave :: Uncategorized :: Designing A Facebook Fan Page: Showcases, Tutorials, Resources()

  • Pingback: Smashing Magazine: Tim’s shared items in Google Reader: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | XtremelySocial.com()

  • Pingback: 王赟的分享博客 » Blog Archive » Designing A Facebook Fan Page: Showcases, Tutorials, Resources()

  • Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources « YouTooDesign()

  • Witch Craft

    Hi Snipe ! I do see the Static FBM App on the bottom of my business page, but the symbol isn´t green, it´s grey and everytime i click on it i end up on my profile page. Same problem when I use the search for the application. I am admin of the page and i´m logged in … but i´m not able to add the application … can you pleeeeeeeeeeeeease help?? THX

  • http://www.snipe.net snipe

    FB might be acting up – have you tried it again since?

  • Witch Craft

    yes … I´m trying every day … I also tried using IE instead of FF … who knows … but still can´t add it. i also tried setting up another page – just for testing – still doesn´t work … I can´t even get in touch with the developers, cause I can´t open the application page …

  • http://www.snipe.net snipe

    Can you take a screenshot? I'm not sure I understand what you're seeing.

  • Witch Craft

    I don´t see anything – when clicking on http://www.facebook.com/apps/application.php?id… – I am automatically transferred to http://www.facebook.com/home.php

  • http://www.snipe.net snipe

    Did you mabe accidentally block it? Try going here: http://www.facebook.com/settings/?tab=privacy and then click on the middle-bottom option, “Block lists”

  • Witch Craft

    oh my god!! i can´t believe it!!! YOU ARE RIGHT!!! i don´t know … this must have happened long ago when I didn´t think to ever need it or whatever … THANK YOU SOOOOO MUCH!!! I posted on several pages – but nobody could help!! You´re amazing!!!!

  • http://www.snipe.net snipe

    Glad to help :)

  • Dslockward

    Is it possible to add this to a regular Profile Page?

  • Kgpvideo

    My facebook business page does not have a like button, and idea on how to add one?

  • http://www.snipe.net snipe

    All pages have a like button – you likely cannot see it becau're you've already liked it. The button disappears once you like it.

  • marco

    Hi, thanks for the info – It helped me a lot looking at other pages and learning how FBML works to make my pages look much better. Also, I think it was really helpful to find out how to feed my RSS feed right into the Notes tab without any additional application. So thanks for the input, we do appreciate it out here! Here is what I have come up with the latest page I created:
    http://www.facebook.com/pages/ReXark-Archival-Recordings/152834168063347

  • Stacey

    Hi there,
    I’m just commenting with the hope that you can help. I’m trying to create a very basic photo Static FBML for a musician page (anything first up is better than looking at the boring wall). I added the app you mentioned, but have no idea what to do next! (laugh at me if you feel it appropriate. What do i need to write in the fbml box after i have renamed the tab? Please email if you can help me, blakwrx@hotmail.com.
    Thanks in advance,
    Stacey Gambell.

  • http://www.snipe.net snipe

    I am available for paid consulting work, but I cannot give free email support to everyone who visits my blog, I’m sure you understand. Have you read the other tutorials on the site?

    http://www.snipe.net/2009/10/mini-site-facebook-static-fbml/
    http://www.snipe.net/2010/05/static-fbml-microsite-next-level/