Static FBML is a Facebook Platform application developed by the Facebook engineers to allow Fan Page administrators to add advanced functionality to their Fan Pages using JavaScript, CSS, HTML and FBML (Facebook Markup Language). The application adds a box to your Fan Page in which you can render HTML or FBML for enhanced Page customization.
Facebook's Static FBML application is an "application tab". Application tabs are to be distinguished from "canvas applications" which allow more functionality, a wider palette (760 pixels as opposed to 520 pixels for application tabs), and are hosted on servers external to Facebook. Facebook says:
Application tabs are slightly different than canvas pages. When a user first goes to a tab, it is in passive mode. This means applications cannot autoplay Flash or onload JavaScript. Once user interacts with the tab – like clicking the Flash object, the page becomes active, so it can play Flash, execute JavaScript, and so forth.
NOTE: Make sure you read our "Most Common Problems with Static FBML and Their Solutions". It answers the most common issues people have when installing or working with Static FBML.
I would recommend Jesse Stay's excellent book, FBML Essentials: Facebook Markup Language Fundamentals, published by O'Reilly. You'll find it very helpful in learning FBML.
PLEASE NOTE: Tutorials
We have a number of specific tutorials / how-tos on using Static FBML. If you don't find a solution to your question in this Static FBML FAQ, please also check out the following tutorials. I will not approve comments that ask questions already answered in our posts (and make sure you look at the comments!).
Static FBML — Frequently Asked Questions
Can I add the Static FBML application to my personal profile?
You cannot add Static FBML to a personal profile or Group, only to a Fan Page. However, you can add an app such as
My Info to your personal profile, which allows you to create a single tab (named "My Info" which can't be changed) and use CSS, HTML and FBML in the content. You can see an example here
Arthur Hype.
How do I add Static FBML to my Fan Page?
First, make sure you, as admin of the Fan Page, are logged in to your personal profile on Facebook. In order to add applications to your Facebook Fan Page, an admin of the Page must have a personal profile and be logged in to that profile.
Visit the Static FBML page
and click "Add to my page". If you are the admin for multiple pages, select the Fan Page to which you'd like to add the application. After you've selected the Fan Page, it should disappear from the options. Click "close." The Static FBML application is now added to your Fan Page.
How do I create a Static FBML application box?
- On your Fan Page, click "Edit Page" in the left column right under your logo/avatar;
- Scroll down the "Applications" section (they're ordered alphabetically) the "Static FBML" link, and click "Edit";
- In the "Box Title" field, enter the name you want to appear in the tab;
- In the "FBML" field, enter the HTML content — include only the content that would appear between the <body> </body> tags of an HTML page; do not include the <html>, <head> or <body> tags — Facebook generates these when building the page;
- When you've added in your HTML — there is no "preview" function — click "Save Changes";
Where does my Static FBML display on my Fan Page?
At the writing of this article, you can still have your Static FBML content appear either as a box in the left column of your Wall, in the boxes tab, or as its own tab. However, Facebook
has announced that it will remove profile boxes, application info sections, and the Boxes tab in "early 2010." So I would suggest assuming that you'll have only the tab option going forward.
Having said that, if you still want your Static FBML box to appear in the left column of your Wall, be sure to set the width of your Static FBML content to 180 pixels, so that it will fit into that space.
How do I change where my Static FBML box appears?
As previously noted, Facebook is eliminating the Wall boxes and boxes tab in Summer of 2010. But here's what can be done till then:
If you want to change where you Static FBML tab appears in the top tabs, you can, while logged in as an Admin, click and drag the top tabs to the position you'd like; HOWEVER, you cannot change the position of the Wall or Info tabs.
Where can I find out what FBML tags are available, and how to use them?
How do I set my Static FBML tab as the default landing page?
Click "Edit Page" under your avatar;
Click "Wall settings";
Under "View Settings" you'll see
"Default landing tab for everyone else:"
Set this to your Static FBML tab.
Can I add more than one Static FBML tab?
Yes. To create a new "instance" of your Static FBML:
- Click "Edit Page" under the logo/avatar of your Fan Page;
- Locate an FBML box you have created;
- Click "Edit";
- At the very bottom of the Static FBML page, below the "FBML" text-entry field, you'll see a list of the Static FBML boxes you've created. Click "Add another FBML box" and it will show up at the bottom of the list. Click "edit" to title it and begin adding content;
How wide can my Static FBML boxes be?
At the time of this writing, the maximum width for Static FBML application tabs is 760 pixels. However, Facebook has announced that in "early 2010" they will be reducing this width to 520 pixels, to accommodate a column along the left side, I imagine. The
Facebook Developer site states: "
Important: In late 2009/early 2010, application tabs will be 520 pixels wide. For more information, please read the Developer Roadmap." On the
Developer Roadmap:
Application Tabs will be the only way to integrate applications into profiles and Pages. Application tabs will shrink from 760 pixels wide (today) to 520* pixels wide to accommodate a slightly revised design. Boxes, info sections, and the Boxes tab will be removed in the near future.
Read my previous post on the application tab width reduction.
How do I apply CSS styles to my Static FBML tab?
To ensure that your Static FBML box looks good in the most popular browsers (eg Firefox, Google Chrome, Safari, Internet Explorer), you should call an external stylesheet using this code at the top of the FBML box:
<link href="http://www.your-domain.com/facebook/_css/stylesheet.css?v=10.0" rel="stylesheet" type="text/css" />
Facebook doesn't pull in the stylesheet that you point to with the above link. It puts a copy of your stylesheet on its own server (external.facebook.com). The "?v=10.0" that's appended to the end of the .css URL a method of forcing Facebook to refresh its stored version of your external stylesheet. Whenever you make changes to the CSS and you want to view your tab with the changes, you should increment the number after "v=": 10.0, 10.1 ... 10.9, 11.0, etc.
Read my post on Static FBML and CSS.
How can I force Facebook to update its cache with my latest stylesheet?
Facebook tenaciously holds on to a cached stylesheet for a period time (hours). If you want to force it to replace your cached stylesheet with your updated stylesheet, add this string to the end of your external stylesheet call. Example: <link href="http://yoursite.com/styles/layout.css?v=10.0" rel="stylesheet" type="text/css" /> — Whenever you update your stylesheet, re-save your Static FBML box, incrementing the "v" number (eg ?v=11.0).
Can I have an iFrame in my Static FBML box?
Why does my Static FBML tab look bad in Internet Explorer 6?
How do I add a video or Flash to my Static FBML box?
It is pretty easy to embed a video (if it is a Flash video - .flv) or other Flash element in your Fan Page. The video or Flash won't actually run until the user takes an action (usually a click) to activate the movie or Flash. However, you can set your Vimeo, YouTube or other video to begin playing when the user performs the initial click on the "imgsrc" image, by appending "?autoplay=1" (w/o quotes) to the end of the "swfsrc" URL.
Here is a tutorial on embedding Vimeo videos on your Static FBML page.
You should read my tutorial on embedding video or Flash for more details, but here is the basic code:
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />
Replace "xxxxxxxxxx" with the YouTube video ID, which is the string of characters after the "v=" in the URL in your browser's address bar (up to the "&" or anything following it, if you see that after the string of letters and numbers). For example:
http://www.youtube.com/watch?v=JOt2Qp0H9G8&feature=related
You would replace "xxxxxxxxxx" with "JOt2Qp0H9G8" in both places, resulting in:
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/JOt2Qp0H9G8'
imgsrc='http://img.youtube.com/vi/JOt2Qp0H9G8/2.jpg' width='340' height='270' />
NOTE: Make sure you change the width and height parameters to those of the video, and it's best to link "imgsrc" to an image that matches those dimensions.
Can I add my YouTube Channel to a Static FBML box?
How do I add a Flickr gallery slideshow to my Static FBML box?
I can't get the embedding of video, photos or Flash to work with my Static FBML. What am I doing wrong?
If you can’t get your embedding to work, it's probably due to one of the following. Make sure:
- The URLs to both the activation image (imgsrc) and the slideshow are correct. You can test them by pasting the URL into your browsers address bar and accessing the image or video channel directly. If you can’t access them via this method, your URL is incorrect.
- You have closed the <fb:swf> tag, with </fb:swf>. If the tag isn’t closed, it won’t work.
- All quotes are closed. It doesn’t matter if they’re single (‘) or double (“), but they must match and they must be closed (width=’xxx’ or width=”xxx” – NOT width=’xxx or width=”xxx or width="xxx' ).
How do I embed MP3s into my Static FBML page?
For MP3s, just use this code:
<fb:mp3 src="FULL URL TO MP3 FILE"
title="TITLE"
artist="ARTIST" album="ALBUM TITLE"/>
Facebook then renders its MP3 player which is rather bland, but works great.
I don't have access to a Web server. How do I upload images, video or other files so I can add them to my Static FBML box?
If you don't have the ability to upload images to a Web server, you can use
the Photobucket images & photos hosting service. You can upload images or videos there, then get the URLs to those assets and link to them from your Static FBML box.
What is the HTML to create a "become a fan" or "share with friends" link?
Facebook recently changed how they allowed users to share other pages with their friends. The standard "Share +" button still works: <fb:share-button>, but other methods of sharing with your friends have ceased to work, and currently it appears that only the <fb:share-button> is the only way to get this feature on your Static FBML page.
As for the "Become a fan" link, there was previously some mark-up code that created this functionality, but it has ceased to work. But Facebook's own "Become a Fan" button is prominent, so not having the ability to place it around your own text or image shouldn't be create too many headaches.
Can I have my videos or Flash to begin when the tab loads?
No. Facebook requires a user action to begin running either a JavaScript application or a video. It's related to security concerns.
If you think of a Static FBML question that isn't addressed here, please let me know via the comments. Thanks!
Static FBML Code Templates for Sale!
#1 by nik - May 24th, 2010 at 06:40
HI Tim
Great site and info, I'm trying to use flash in a static FBML box to link to the standard tabs on my fan page but can't find any reference of doing this.
Only works with and _Blank as _self would reload in the static FBML box, any pointers?
#2 by timware - May 24th, 2010 at 07:13
Nope. I don't do much with Flash.
#3 by Metria Jones - May 24th, 2010 at 09:59
Please help, I am logged into facebook, I am an admin of the Fan Page "Gulfport Technology Center". When I select Edit, and go to add an aplication "Static FBML" shows up. But When I click to add the app, it just takes me back to my Personal Facebook page.
#4 by timware - May 24th, 2010 at 17:14
Maybe you already have Static FBML installed on your fan page. Did you click "Edit page" on your Fan Page and check carefully for the Static FBML app?
#5 by kriss - May 24th, 2010 at 18:54
I am trying to add a comments box into my FBML tab. One that is like the wall where people can comment and the admins can reply. Is that possible? I have looked everywhere online but couldn't find anything that makes sense. I am really new to this. Thank you for your help.
#6 by timware - May 24th, 2010 at 19:56
So you only want admins to be able to reply? Not other users? I would start here: http://wiki.developers.facebook.com/index.php/Fb:comments_(XFBML)