This is a how-to article on expanding your Facebook Fan Page (aka Business Page) by using the application Static FBML which allows you to add new “application tabs” to your tabs or box which can incorporate CSS, HTML, Facebook’s flavor of JavaScript, FBJS, and Facebook’s mark-up language FBML. FBML has greatly expanded what is possible on Facebook Pages and, if you’re sufficiently skilled with CSS/HTML and, optionally, FBML, you can make some really fine looking Pages.
You can check out our Fan Page Portfolio to see some of the pages we’ve developed.
Static FBML Fan Page Templates – Clean, Professional, Ready to Use
Also, we offer a number of ready-to-go Static FBML Fan Page templates for sale. The code is clean and Standards-compliant and displays well in all modern browsers (even Internet Explorer 6!).
I would also recommend Jesse Stay’s excellent book, FBML Essentials: Facebook Markup Language Fundamentals, published by O’Reilly.
Problems? Look here first!
If you have problems, you should definitely check out these two pages:
- The 16 Most Common Static FBML Problems and Their Solutions
- Static FBML FAQ — all you need to know about Facebook’s Static FBML application + Links to all our Static FBML Tutorials!
What You Should Know Before You Get Started….
- Static FBML can only be added to Facebook Fan Pages (aka Public Profiles, aka Business Pages);
- You CANNOT auto-run JavaScript in an FBML page – it must require a user action; you can also use FBJS (Facebook JavaScript);
- You SHOULD NOT use a <style type=”text/css”> tag — it works in most browsers, but NOT in Internet Explorer; you can, however, call an external style sheet via <link href=”http://yoursite.com/styles/layout.css” rel=”stylesheet” type=”text/css” /> (Read this post about the difference between Internet Explorer and other browsers regarding Static FBML and CSS…);
- Maximum width of FBML page is 760px (However, Facebook has announced this will be reduced to 520px in the Summer of 2010.);
- Include ONLY the HTML/CSS that’s between the <body> and </body> tags; NO <html>, <body>, <head> or meta tags;
- In order to add applications to your Fan Page, you MUST have a personal profile associated with the Page as an Administrator; the Admin can add apps when logged in.
Adding Static FBML to your Facebook Fan Page
- Click “Edit Page” under the Page’s large avatar image
- If you don’t see “Static FBML” then scroll down to “More Applications” and you’ll probably see Static FBML listed:
If not, click “Browse more”; - Click on “Static FBML” to go to the Static FBML application;
- On the Static FBML application page, click “Add to my Page” in the left column
- If you are the administrator of more than one page, you’ll get a pop-up list
Click “Add to Page” next to the page to which you want to add the Static FBML application, then click “Close”; - You have successfully added Static FBML to your Page.
Adding Your FBML Box or Tab to Your Public Profile Page
- click on “Edit Page” in the left column right under the logo/avatar
; - Under “Applications” scroll until you see the “FBML – FBML”
Click “Edit”; - Enter in the “Box Title” field the name you want your tab to have
- Enter the CSS, HTML or FBML content in the “FBML” field;
- As of late summer 2010, you’ll no longer be able to add this to your Wall box in the left column, as Facebook is removing the boxes altogether. In your code, do not set the width any wider than 520 pixels, as this is the maximum width for “application tabs” (which Static FBML allows you to create). (View the HyperArts Fan Page example — the “HyperArts” tab);
- After you’ve added in your HTML/FBML — Click “Save Changes”
- To add addition FBML boxes, just click “Add another FBML box” link at the bottom of any of your Static FBML instances, below the “Save / Cancel” buttons. You can create a number of FBML boxes with the Static FBML application, although there seems to be a limit which you’ll know when you don’t see the “Add…” link anymore!);
Having Your FBML Appear Either in the Tabs or Left Column
Although this will be a moot point after Facebook eliminates boxes altogether, at this point you still need to edit each Static FBML instance’s “Application Settings” to add it to your top tabs.
- On your Page’s main page, click “Edit Page” under the logo/avatar
- Locate the FBML application (it will be called whatever you entered into the Box Title field, plus “FBML”), and click “Application settings”
- Next to “Tab:” it will probably have “Available (Add)”
If it says “Added (remove)” then it’s fine and it’ll be added to your top tabs.
Creating Additional FBML Boxes
- Click “Edit Page” under the logo/avatar of your Fan Page
- Locate the FBML box you have created
- Click “Edit”;
- Below the fields for the box you created, after the “Save / Cancel” buttons, locate and click “Add another FBML box”
Static FBML Code Templates for Sale!
#1 by alexander - March 22nd, 2010 at 03:05
still no answer to my request
#2 by admin - March 22nd, 2010 at 06:00
You asked me to send you the “3 step code with iframe facebook fbml” … I not sure exactly what that means, but Facebook doesn’t support iFrames on Application tabs, just canvas pages. I have some information on making an iFrame canvas page. That’s the best I can do for you, Alexander. I can’t privately send you code. I do the blogging to help folks out, but it’s not “on demand”
#3 by alexander - March 22nd, 2010 at 07:37
I mean this:
1st step visitor must become a fan of the page, then 2nd step unlocks
2nd step visitor must recommend the page to his friends(8 friends is the facebook limit) and 3rd step unlocks
3rd step is up to you, whatever you want your visitor to see. (like a webpage)
this is an example: http://www.facebook.com/home.php?#!/pages/-FARMVILLE-UNLIMITED-GAS-FOR-ALL-VEHICLES-100-WORKING-FREE/298853607974
thanks
#4 by admin - March 22nd, 2010 at 07:43
Andrew: Here’s a how-to for showing content to fans. Best of luck.
#5 by Taylor - March 25th, 2010 at 09:05
I cannot get the static FBML to be edited in my org’s fan page edit section. I can see it under more applications but it will not let me edit it and when i click on the Static FBML app it just takes me to their app page. Please help!
#6 by timware - March 25th, 2010 at 09:10
You have to add it to your Fan Page first. If it’s added you’ll see it in the list when you click on “Edit page”, under “Applications.” If you’ve added it, but can’t edit it, make sure you’re logged in under your personal profile that is associated with the Fan Page.
#7 by will cowdry - March 26th, 2010 at 12:52
I’m having trouble using the external CSS to style my fan page. I’ve made sure I’m only using code from WITHIN the body tags of my .html and I’ve made sure that I can can find my external CSS via the server address. You said that it may take some time for FB to cache the CSS. Could that be my problem, and if so how long should I wait to see results? And should I load the images that I’m looking to use as “background:URL…” to my server or insert them elsewhere?
Otherwise, here is what I have posted in the Static FBML box (so far):
<link href:"http://www.buzzlmedia.com/css/fanpages/cm/casmanifest.css" rel="stylesheet" type="text/css" />
[ Rest of code deleted ]
Thank you so much!!!
#8 by timware - March 26th, 2010 at 13:05
Your stylesheet link:
<link href:”http://www.buzzlmedia.com/css/fanpages/cm/casmanifest.css” rel=”stylesheet” type=”text/css” />
There should be an equal sign after the “href”, NOT a colon. If you coded it with the colon, it won’t work.
#9 by will cowdry - March 26th, 2010 at 13:08
ahhh….thank you!!
#10 by will cowdry - March 26th, 2010 at 13:08
…still no images…
#11 by timware - March 26th, 2010 at 13:30
Will: Your stylesheet’s calls to images are NOT full URLs. Remember, Facebook caches your CSS file on *its* servers, so you have to make your image URLs full, eg: src=”http://www.buzzlmedia.com/css/fanpages/cm/assets/CMfanpage2_02.jpg”. Then your images will show up.
#12 by Alin - March 27th, 2010 at 15:03
I`ve created a facebook landing page using dreamweaver CS4. The problem is that the page it is look ok in IE8 but not ok in firefox. I must mention that the looks ok in both browser before it was transfered in fbml. Please give me any sugestion how can i handle this.
#13 by timware - March 27th, 2010 at 17:15
Alin, I don’t really have the bandwidth to troubleshoot CSS issues, which is what you seem to be having. I assume you’re calling the stylesheet with the <link> tag? Different browsers and platforms handle styles differently on Static FBML pages, and, if you already haven’t, you should read my post on stylesheets, CSS and browsers.
#14 by Adam - March 30th, 2010 at 08:38
The thorn in the side of designers is that IE6 and IE7 are quite different in how they present CSS. IE8 is pretty similar in functionality to Firefox.
I recommend laying-out/designing with Dreamweaver as you set width of the FBML page (760px) for example. Then testing and tweaking on all the prominent web browsers (mostly Firefox, IE7 and IE8) will cover 80%+ of people.
You can tweak and work at developing a clean site via best practices or write IE6 hacks instead, to make it cooperate. I would suggest always using absolute URLs and cross browser testing as habit =) Good Luck!
#15 by martha - March 28th, 2010 at 18:34
Hello! I figured it out….thanks.
#16 by Marc - March 29th, 2010 at 12:36
When I click the “Add to My Page” link, a box opens that says “Add Static FBML to Page”, also “Select which Page you wish to add Static FBML to.” The problem is that it then says:
“No Results.”
Why would this be? I have added 3 other static boxes, but can’t see to add any more.
Thanks for the help.
Marc
#17 by admin - March 29th, 2010 at 12:43
You can *add* the Static FBML application ONLY once to a specific fan page. From then on you just create new Static FBML boxes from the same app. How to do this is in this tutorial.
#18 by Emmanuel - March 30th, 2010 at 04:08
Hallo,
I have succeeded in creating the tab but my problem now is to keep the tab at the top permanently. i have followed the process indicated but after i refresh my page the tab disapears aganin. please help
#19 by Emmanuel - March 30th, 2010 at 04:39
thanks, i have got it. had too many tabs but i have deleted some. thanx
#20 by Jeannie - March 30th, 2010 at 22:21
I would like to add my website to my Fan Page. I have already created a Tab.. but not sure how to code it so that it appears.
http://www.facebook.com/pages/Jeannie-Capellan-Photography/110613878646
My website hosting company does not give us access to to the HTML codes.
It is a Flash Website with a Splash Page. The Splash page has 3 links WEBSITE / BLOG / client proofing.
How do I add this. I have tried several ways. I even tried my my Blogspot Blog codes… just copy pasting everything in there but doesn’t work.
HELLLLLPPPPP !!