Snipe.Net - Geeky Stuff
Twitter
Currently: @synxiec Or rather, Sugu modori masu in reply to synxiec 3 mins ago

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.

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.

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.

Also check out:  

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.
  • tomsmarch
    Great article. Is there an easy way to display my web page in one of the FBML tab areas like you have for Sunkist? I am a photographer and it does exsists in an app for photographers who use showit websites but I do not use them and want to do it on my own.
  • Hi Tom - no way to include a website. You'd have to design something specifically for Facebook and code that out in the FBML.
  • kprDOTnu
    iam dumb.

    can i add java script to fbml static? if not how can i add a java poll it my page. thanks for any responses.
  • You can add some basic FBJS, but adding a poll calls 3rd party scripts, so that wouldn't be allowed.
  • scottbedford
    It's amazing what some basic HTML can do to to FB - so tired of the blue and white!

    Cheers for the post.
  • leej0nes
    On the Sunkist Soda page I see that you are able to dynamically load content upon click the tab. So far I have been unable to do this - I have the AJAX calls working and the JSON data turned into nice pretty FB style items - but have yet to discover how to do this without having to click an element. Please can you provide a code snippet?
  • I'm not sure I understand what you're asking. Which content are you referring to, and can you give me an example of what you're trying to do with a little more specifics?
  • leej0nes
    Further to my last message. I've tried things like setInterval/setTimeout
    in the script block's global scope but to no avail.

    --
    Lee
  • Generally speaking, in FB, you can't do things like that. Facebook doesn't let you automatically load any kind of script that could potentially load content the user isn't expecting. It's the same way that their FBJS onmouseover events ONLY work after the user has clicked something else on the page.
  • leej0nes
    Argh!. Ok I can see the security implications but hell thats an unfortunate
    limitation. Are there any kind of workarounds?

    Thanks again.
  • Sort of, but not really :D 1) Do it in Flash. (I know, I know.) 2) Do it the way I mentioned earlier - letting your server side scripting language (like PHP, ASP, etc) handle the JSON parsing. The parsing isn't done via Javascript that pont, so you can display whatever you want. You could display all of your offers, or just stash the parsed data into your javascript, to reveal selectively when the user clicks on specific things, (sort by, etc.)
  • leej0nes
    Ok thanks for the help, much appreciated. I guess I'll have to come up with
    some creative wording for the click...

    --
    Lee
  • But again, you don't need the click if you parse the JSON server-side and then just display the contents as part of the normal page load content.
  • leej0nes
    Ok I've got you on one aspect... build the page on the server side - more
    than happy to do that. What I'm being super thick on - or I guess an avenue
    I haven't explored yet - is calling the server side code on page load. I
    dunno, sorry mate I'm confusing myself something chronic here. Brain ache
    from something that should be a no-brainer.

    --
    Lee
  • Well, let me bck up - are you trying to do this in a Static FBML tab? Or an application/application tab?
  • leej0nes
    Its a Static FMBL tab. The person I'm doing this for doesn't want an
    application unfortunately.

    --
    Lee
  • Ahh - well then, that makes it harder. I'm not sure you can do what you're trying to do in Static FBML. Tell him he needs an application :)
  • leej0nes
    Ok thanks. I have figured out some sensible and creative wording for
    the link so they'll have to live with it fir now.

    I'm very grateful for your time and input.

    --
    Lee
  • leej0nes
    Basically I'm looking for an equivalent to window.onload or div.onload or
    something to offer the same sort of behaviour when a user clicks an my
    Offers tab. At which point the server will be queried for a JSON response
    listing the current offers. I've got the Ajax side working just fine but
    cannot get the data to load upon opening the tab, instead the user has to
    click a link to load the offers data which is kinda naff. I hope I have
    explained myself a little better and appreciate your speedy response and
    assistance.
  • What are you using as the scripting language? Wouldn't you just parse that JSON via your scripting language when the page loads. For example, using php, fetch and parse all of the JSON data, and then do whatever filtering and so on via ajax clicks.
  • leej0nes
    FBJS is the scripting language I'm using, well attempting to use. I'm a
    C/C++/C# developer by day but happy to code in JavaScript, FBJS and FB are
    throwing me some curveballs due to their limitations. The handling of the
    JSON response is not a problem, that code works fine, its simply the user
    being forced to click a link to kick the whole thing into action that
    bothers me. In an ideal world there's be support for .onload or similar to
    fetch the data automatically in FBJS.

    --
    Lee
  • Right, but what I'm saying is that you can work around the curveball by letting your server-side script do the parsing, and then just use JS to figure out what to display when. The user isn't forced to click, because the data has already been parsed and is loaded as part of your server-side generated code. So you can just display it without having to use JS. Then if you wanted to offer sorting or what have you, ajax could handle that part.
  • leej0nes
    A snippet of the FBJS side of things.

    --
    Lee
  • leej0nes
    Ah I think I'm getting you now. I don't suppose you have small snippet that
    shows how you currently do this? I know I'm asking a lot but this one still
    hasn't fully suck in...

    --
    Lee
  • erikarenewal
    Snipe,

    I am finding that when I go into the FBML app, the only option shown is to add it to my page's favorites, not a way to actually add it as an app. Any ideas?

    Thanks!
  • No clue - it's showing up fine for me.
    http://www.facebook.com/apps/application.php?id...

    Directly under the logo, "Add to page".
  • Keli
    Thanks - this is awesome, I'm just discovering how much i can actually do to my facebook page! I do have a question... I have a swf which contains an rss feed, and when I add it to the FBML, the feed doesn't work. Is there any way to get it to work? Thanks, any help is appreciated!
  • Hi,

    I've reviewed so many articles on FBML for Facebook boxes my head is spinning yet none of them answer the simplest of all questions. Everyone likes to deal with the more complex stuff. Maybe you can help me.

    I simply want to add a website link (URL) in my Facebook FBML box that actually works. No images, no photos, no video, just your ordinary, everyday website link. I have the link in my box including the http but it does not act as a link. What is the pre and post code so it will be recognized as a link?

    Thanks
  • Hi Don - it's probably not covered in other FBML tutorials because what you're asking for is HTML, not FBML. I don't know if my commenting system is going to screw up the display of this but it would be:

    [a href="http://www.yoursite.com"]your text[/a]

    But change the [ and ] to < and >.

    Make sure the quotes in the above are straight quotes, not formatted curly quotes. You can read more on hyperlinks in HTML here: http://www.w3schools.com/html/html_links.asp
  • Don Shapiro
    Your a hero! Thanks so much. I really don't know much about HTML either. This worked.
  • Very good advice. I never know how easy it was to use FBML on fan pages till I tried it. It supports most html and css tags and classes and anyone with a basic knowledge can create a very nice fan page or landing page
  • Crystal
    Hey there Snipe, this is probably the dumbest of all questions but here i go... ive already mape my "WELCOME page" but want to add another... how the bloody hell do i do it? any ideas... i know you will have all the answers...
  • By "Welcome page" do you mean a tab you created with the Static FBML app? You have to go back to the screen where you edit the text in the FBML box. Look underneath the text box, and it's got a link that says "Add another FBML box" (or something similar.) Once you create the new FBML box, you'll be able to add that one as a tab. HTH.
  • segrace
    I am trying to use an image map for mine, but the links won't work in Facebook. I am not sure why either! I took out the HTML and BODY stuff, but the links wont work. The image comes up on my page tho. Please help asap

    <img src="https://app.onlinephotofiler.com/images/A_8/1/5/5/125518/84a996ed13264355b8196e33314e4781.jpg "width="191" height="586" alt="WingsnMore" usemap ="#WingsnMore" />

    <map name="WingsNMore">
    <area shape="rect" coords="0,0,191,290" alt="Rate Us" href="http://www.wingsnmorehouston.com/rateus.asp" />
    <area shape="rect" coords="0,295,191,435" alt="Order Online" href="http://www.wingsnmorehouston.com/order.asp" />
    <area shape="rect" coords="0,440,191,586" alt="Wing Email Club" href="http://www.optemaxcorp.com/subscribe.cfm?clientid=46" />
  • Please see previous comments. HTML Imagemaps are not permitted in FBML. You have to use CSS.
  • RHG
    I have a Facebook fan page and am trying to add the static fbml application. Here's the problem: the only option it is giving me is "add to my page's favorites" - nothing else, no "add to my page" option. Why can I not get it? Is this a known bug?
  • jeanne
    Great article. I am using static FBML to embed a flash file (.swf file - hosted on my own server). It works great, although I am concerned that one day I'll wake up and it won't work anymore because I've heard that FB does NOT want links to external sites embedded in tabs (they want us to create applications to do this). I thought that was just a nasty rumor, but appears it does have some truth - i.e., can't embed an iframe in static fbml (used to, but that doesn't appear to work any longer)....

    Thoughts?
  • Hi Jeanne - I don't actually remember a time where iframes were allowed in FBML boxes, and I've been doing this a long time. Lots of big brands link to external pages from the tas - I wouldn't worry about it. It's always a risk you take when you use someone else's platform that they'll go and change things. It is unfortunately the nature of the beast. :(
  • abraham
    Hi, this page is awesome, lods of information about fbml.
    I have a fbml page, and i would like to set up a button that get you a pop-up to suggest to friends when you click on it ( Example here: http://www.facebook.com/pages/cafe-world-bonuse...) but i can't figure it out, i looked all over the net, from the wiki i used the multi friend selector but it limits the invites to 12. here is another example of how i want to have it on my page since you have to click on each button for the next button to show.It would be great if you can help me with the second example thank you.
  • I believe the multi-friend selector is going to be the only way you can do this, so you're stuck with the limit of 12 invites per day.
  • abraham
    Thank you for your really fast reply, in this example how did they do it?
    example: http://www.facebook.com/pages/cafe-world-bonuse...
  • shedhead
    Hi Snipe, Im on custermising my friends Fan page on FB using FBML. Is there any way of changing the text color on the tabs???
    Cheers
    ShedHead
  • Hi Shedhead - you can customize text colors using inline CSS
  • shedhead
    Sorry Snipe, I seem to have posted the same question twice!! oops!!
  • max
    thanks dude :)
  • Craig
    I'm trying to do a general welcome tab for my Facebook page with links to Twitter, YouTube, and a website. I tried to do an image map and link it up with Photobucket but I can't get it to work. Any suggestions?
  • HTML imaemaps aren't allowed in FB code. You have to use CSS to set the hotspots. :(
    If you're not sure how to do that, there are lots of tutorials online:
    http://designreviver.com/tutorials/css-image-ma...
  • Alan Rodgers
    Ive tried to use fbml on one of my fiends FB fan page. I followed the above instructions and tried to put an image on it. The only thing I managed to do was put the title on a new tab!! Is it just a case of copying and pasting HTML from say, Deamweaver or am I missing something???
    Thanks for anyhelp
  • Nope, that's pretty much all there is to it. You set a tab/box title, and then put your HTML/CSS into the main textarea. Obviously rememember that when placing images, you need a full url (http://www.yoursite.com/path/to/yourimage.jpg) instead of a relative url.
  • Alan Rodgers
    Thanks snipe, Ill try that tommorow.
    Alan
  • that was good article, would you please let me know how do i add this website http://ohlalashopping.co.uk/ or run php code in fab page? Or probably you have already written an article to do just that.


    Thanks
  • andreatantillo
    I am trying to include an EPA widget on my Facebook Fan Page, but the EPA embeddable code is iframe. Is there an easy way to use FBML to show this widget?

    <iframe FRAMEBORDER="1" WIDTH="141" HEIGHT="215" id="dailytips" SCROLLING="no" MARGINWIDTH="0" MARGINHEIGHT="0" SRC="http://www.epa.gov/widgets/dailytips.htm"></iframe>
  • Iframes are not allowed, I don't believe.
  • Andrea Tantillo
    thanks. I've used informaiton from this article on several of my fan pages. If Iframes aren't allowed, is there another way to call an external web site using FBML? I'm getting the feeling it's just not gonna happen!
  • Unfortunately, no. Facebook doesn't want you to be able to call external elements (CSS, Javascript, web pages, etc) because you could be prompting users to enter data or do other things that they cannot control. You could try making a very simple application and having the entire app be the iframe code, then adding it as a tab. Other than that, I'm not sure what to tell you. :(
  • jenben123
    Very good comment. I though wanted to see some sample code.
  • PremiumWebsites
    I am off to create my first FBML tab for my upcoming workshop - thanks for the idea!
  • jamieponiatowski
    thanks so much for sharing all this info with us! I am pretty much computer illiterate and just getting into this because I started a Business/Fan Page on FB. I was completely upset with the standard set up of the page and started reading Help discussions on FB trying to learn how to achieve creating custom tabs and how to use Static FBML. Wow this has been an eye opener to say the least! I found a tutorial on eleen.com on how to create custom tabs, yay it worked, I jumped up and down! From her page I found Customizing Pages by Hyper Arts and thus found you :) I loved the way Hyper Arts had the sub tabs on their page when you clicked on a main tab and you showed me how to accomplish this, doesn't look near as good as theirs but its ok-Thanx! Dilemma, yeah you saw this coming, huh? Well for some reason only part of my info is showing up like I have put too much info in the FBML box??? Question-Do the boxes have a limit of some sort or is there something that pops into your head that could be causing this? Second question-Since starting this I have become highly interested in learning more about stuff like this...The book Designing with Web Standards (3rd Edition) by Jeffrey Zeldman was recommended, have you heard of this book and would you recommend it? Or are there other books you would recommend for a beginner. I don't want to buy the book and find that I can not even understand it, LOL, which is highly likely to happen! Once again thanx sooo much for time and help!
    ~Jamie
  • I'm out of town in meetings for the next few days but I'll try to
    address your questions soon
  • Sorry, just found the answer in an earlier comment from you, thank you!!
  • Glad you got it sorted :)
  • Hey Snipe,

    My company would really like to take advantage of FBML, but I can't for the life of me figure out how to get started on it. I've added it into the page, then added the application, but when I try to edit it; I only have the "Delete Tab" option.

    http://i359.photobucket.com/albums/oo37/mochuu/...

    Any insight on this would be greatly appreciated, thanks!
  • Go to your page wall, click on Edit Page. In the Edit screen, find the
    Static FBML app in the list, and click on 'edit' link below it.
  • bunhan
    sample create tab ? sample fb:redirect
  • That happens when you're trying to ask for user data from the API on tab load, which is not allowed. Please see my post here: http://www.snipe.net/2009/04/facebook-applicati...
  • plzz i m not understanding can any1 tell me how to make a new tab at fan page i need a help wit other friends plzz help me this is my link add me and and send me msg if u want to help me plzzz i need help http://www.facebook.com/profile.php?ref=profile...
  • This is, by far, the best I have found on the subject. Thank you for sharing this information.

    A huge kudos to you and your patience. ;-)
  • Jorge
    Thank you! Your article is great. This is what I was looking for.
  • matthew
    Where do you place the link tags to call an external stylesheet?
  • I don't thin you can - you have to embed inline. FB's proxy sees any attempt at loading an external script file as potentially malicious.
  • projectx
    Hi, great site , helped me out a lot.

    Need some help though . can anyone tell me how i can create a link or thumbnail picture which opens up in facebook pop-up box, so display picture and more informations.

    thanks
  • Thanks a million. I am using it for a blog of mine in Arabic.
    I guess I can embed a Networkedblogs badge to the entrance.
    Thanks a million

    Ahmed
  • Great info, i have been working on my fan page.

    First impressions do last so it's important to offer somthing unique,

    Paul.
  • Omar
    help again please, i cannot mange to get a background picture or colour, i am using HTML coding but its just white.. please help..
  • You have to use the CSS code for background colors and images, not HTML. Ths site has some tutorials:
    http://www.tizag.com/cssT/background.php
  • Omar
    i need help.. when i use HTML in static FBML i just get a blank white screen when i click on the new tab i have assigned to it? the html works fine in explorer.. could u please help..
  • Did you remove any HEAD/BODY tags?
  • Omar
    thank you snipe.. i got it going..
  • whatsflash
    hey snipe,

    do you know if I can target a fan photo album with the API? I can "see" the regular albums with the API (non-fan photos) but is it possible to target the fan photo album?
blog comments powered by Disqus