Snipe.Net - Geeky Stuff
Twitter
Currently: @phuul I lurve it. Completely addicted. I check it at least 10 times a day on top of the RSS feed... (I'm so lame.) in reply to phuul 28 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.
  • 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
  • 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?
  • What do you mean by "target" exactly? Ability to upload an image to that album? And when you say fan photo album, do you mean a fan's photo album, or the fan page's photo album?
  • whatsflash
    I mean I want to display the images using fbml and flash. I can do this with the fan page's regular albums but not a fan page's "fan photo" album.
  • whatsflash
    is this know to be not possible?
  • ryanms
    Hi,

    I know this was asked a while back but never saw an answer. I am trying to make a tab where users can invite fans just like this one http://www.facebook.com/SportsAuthority?v=app_1....

    Could you walk me through what code I should use to recreate the multi friend selector form?

    Thanks,
    Ryan
  • ryanms
    Thank you so much !!
    -Ryan
  • No problem :)
  • Good article, people sometimes need to quit trying to re invent the wheel
  • I just read that FB will be changing tab coding in a few days. I'll check back in then to see how to do this.
  • @Sally, where did you read that?

    @Snipe, have you heard anything about that?
  • Hi there - I posted about their upcoming changes extensively in October:
    http://www.snipe.net/2009/10/upcoming-changes-t...

    Many of these changes will affect page tabs.
  • webwhispers
    Hi Sylvie...it seems that you have used 2 body tags. Also for static FBML....there is not need for the Head and Body tags. Just remove it and it should work.
  • Sylvie Paquette
    Hi there! I'd just like to tell you I think you're fantastic for all the help you're giving. I have been teaching myself to use static fbml from the very beginning - using online html tutorials to get a start on a landing page for the facebook fan page I recently made for my mom's business. It's really basic, and my code works when I open it in my browser (firefox), but when I paste it into the fbml box, it comes up blank. I have tried removing <html> <head> <body> and such as you suggested, to no avail. If you have a chance I'd love your feedback... Thanks and Happy New Year to you! Here's the code if this helps you figure out what I'm doing wrong.

    <HTML>
    <HEAD>
    <BODY BGCOLOR="#FFFFFF" TEXT="#6699FF" LINK="#000099" VLINK="#9933FF" ALINK="#00EE00">

    <IMG SRC="http://www.hypnobirthingcanada.com/images/hypnobirthing-canada.gif" align=middle><font size="+3" face="Impact">Welcome to HypnoBirthing Canada!</font>



    <BODY>

    <font size="+1" face="Impact">Thank you for visiting our fan page. We hope this page becomes your one-stop resource for everything pertaining to birth -
    <font size="+2" face="Impact">the way nature intended!</font>


    Be sure to become a fan by clicking <img src="become-a-fan.png"> right up at the top of the page!

    "To those who say it is just not possible to birth naturally and without pain, I say "But what if we're right? Wouldn't it be wonderful?" "


    — Lorne R. Campbell, M.D.

    For more information, visit the home page of HypnoBirthing Canada anytime you'd like. You can even visit us in French at HypnoNaissance.</font>


    </BODY>
    </HTML>

  • Hi Sylvie - can you point me to the fan page so I can take a look? (Also, you have two BODY tags in your sample code - did you remove both or just the one when you took out those parts)
  • Derek
    Does anyone know how to get a box or tab to be the main page when facebook opens your profile.... for example: http://www.facebook.com/pages/Anamosa-IA/Nation...
    as they successfully made it happen!
  • This is a setting in your page settings area. You should see something like "default tab", and a dropdown list that lets you pick which tab should be the default. Unfortunately, this only works if the visiting user is NOT a fan, if I recall correctly. There is no other way to do this though, so that's your only option.
  • I have restricted access to my content to only fans.
    This work well in all browsers except IE. Any solutions.

    http://www.facebook.com/webwhispers?v=app_10442...
  • What version of IE? This sounds more like a Facebook issue than anything else. If it's IE6, Facebook has already stated tat they do not officially support IE6, so that may be why.
  • webwhispers
    Thanks Snipe....My browser ver is 6. Does it work ok in ur IE browser?
  • Brigitte
    I have add this to my fan page but it does not give me the option to add it as a box on my profile page. It only places it as a box within the box tab at the top. Do you know how I can get this to display as a box on the left side of my profile?
  • You have to add it to the boxes tab via your settings, and then click on the pencil icon in the boxes tab box for it and select 'move to profile'
  • Jon
    Sorry if this has already been covered here but the post is getting very long!!!!
    I have added one FBML page to a fan site and was wondering if you are able to add a second FBML page or if 1 is the limit. Are there any other (low cost ways) to add extra pages to a fan page.

    Cheers
  • Hi Jon - sorry for the delay. You can add multiple Static FBML tabs to your fanpage without a problem.
  • Lee
    The Info was very help! but I have a background image and everytime I embed a video via:

    <fb:swf
    swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
    swfsrc='http://www.youtube.com/v/Z3NNqh8K9hM'
    imgsrc='http://i989.photobucket.com/albums/af13/roanokeregion/Alsharpten.jpg' width='340' height='270' />

    It messes the background image up. Is there anyway to fix this? or should I just use images and link to the youtube videos?

    Thanks so much
  • Awesome brother! thanks for your post! look forward to following you on Twitter!
  • can you please tell me how to set-up the fbml page as the default welcome page?
  • May be you are right but the thing is that application makes your page attractive. Which is make your brand promoted.
  • If you actually bothered to read the post instead of just the title (so you could take the opportunity to spam by blog with a comment linking back to your own FB app company's website) you would realize that your comment doesn't make any sense.
blog comments powered by Disqus