Custom Facebook Fan Pages with FBML
Wandering around Facebook you’ve probably bumped into some fan pages that blow your mind. Want to make your Facebook fan page stand out? Here’s how you can do it. They use what’s called Facebook Markup Language (FBML), which is very easy for anyone with basic HTML and CSS knowledge to use.
Things you need to know
Before we get started with FBML, there are some basic things you really, really, really need to know.
- An FBML application is only for Facebook fan pages, sorry no profile pages.
- While it accepts HTML, be careful that your tags match up in the FBML application (its quite unforgiving).
- FBML uses special JavaScript tags called FBJS that requires user action to be activated (more below).
- Stick to loading an external style sheet (CSS) at the top of your FBML code to avoid Internet Explorer ruining your life. This means you should host your CSS, images, fonts, ect. on a server somewhere that isn’t Facebook.
- Facebook inserts its own code to all of your JavaScript, CSS, and HTML, but this should not affect you.
- Page size is limited to 760px.
- Facebook was serving up static pages off of dynamic pages when I wrote this guide. Meaning that it will take five plus minutes to see your CSS changes. Use Firebug or the Web Developer toolbar and update your CSS sheet as your work progresses to prevent this from slowing down your production times. If you’re like me this will frustrate you into a coma.
Setting up FBML
FBML is extremely easy to set up. First you’ll have to create and/or access your Facebook fan page as an admin. Then click Edit Page (under your picture in the top left) > under More Applications click Static FBML (you may have to click Browse More and search for Static FBML) > in the top left click Add to my Page > select the pages you want to add the application to > click Close. You’ve added FBML which can now be accessed by clicking Edit Page on your fan page.
Creating a basic page
By default FBML is set to be a box on your wall tab, since we’re creating a custom tab for our content we’ll have to change this. Find FBML under your Applications and click Application Settings. Click Remove by Box and click Add by Tab. You will now have a new tab on your Facebook fan page. Click Edit to start customizing your page with content.
Start out by giving your Facebook tab a good and interesting Title. You can just shove basic HTML and CSS into your pages, but we’re building a knockout FBML page thats going to impress everyone! I suggest starting out your code by importing your CSS sheet hosted from a server, setting up your navigation, and body. We’re going to build this page with standard divisions just like you would build any other website page’s foundation.
<!-- Load external style sheet --> <link rel="stylesheet" type="text/css" media="screen" href="http://www.yourwebsitehere.com/facebook/style.css?v=1.0" /> <!-- Basic container --> <div id="fbmlContainer"> <!-- Logo --> <h2><a id="logo" href="#">Ash Blue Web Design</a></h2> <!-- navigation --> <ul id="nav"> <li><a id="home" href="#">Home</a></li> <li><a id="portfolio" href="#">Portfolio</a></li> <li><a id="services" href="#">Services</a></li> <li><a id="about" href="#">About</a></li> </ul> <!-- Content --> Content goes here <!-- End container --> </div>
Advanced Customization
Depending upon what kind of Facebook page you’re trying to build, we’ll need to customize our page and content with the following information from various sources. There is no easy way to do this, hopefully FBML will have better tutorials and examples that will let us cut and paste code for our projects in the future.
Page tabbing
We now have our very own FBML tab, but it looks terrible and what about fancy tab navigation? You could use AJAX or JavaScript to hide and show your divs, but that would be quite time consuming. In snipe’s article Extending Facebook Static FBML Tabs with Dynamic Content on snipe.net, she points out that using clicktoshow and clicktohide with divisions allows for easy tab navigation. Read the article and it should take 10 minutes to modify your page for seamless page navigation.
Page Selection
Its great that we can navigate around pages now if you followed the tutorial in the above link. But its terrible usability because you can’t see what page you’re on (creating a terribly confusing user experience). Page selection needs to be done with FBJS and no other solution is present at the moment. Hopefully Facebook will release a simplified way to select pages. For now you can use the tutorial they have on the wiki that uses JavaScript to select pages (on a second thought it seems to be broken at the time of writing this article). This gets messy fast and I haven’t been able to find a simple solution yet.
CSS Override
Good news here is that facebook has minimal CSS that shouldn’t interfere with your styles. If you can’t get a style property to override Facebook’s style sheets, use !important, but use it sparingly because it will override other styles by accident. In worst situations this can lead to angry fits of rage and spilled coffee.
p { color:#00aaff !important }
Effects Library
Facebook has its own custom effects library that you can call. If you’re used to working with a JavaScript library like jQuery, then this will feel weak and watered down. Still, it has easing and some decent effects, not anything the developers should brag about though.
Suggested Reading
- FBML CSS and IE
- Facebook Developer Wiki
- FBML Tab Navigation
- FBML Ajax Contact Form
- Custom Facebook Fan Page Tips
Subscribe to Ash Blue Web Design
I regularly post information about web design, web development, WordPress, and the freelance lifestyle. Don't miss another post by subscribing via RSS or email.
Author: Ash Blue
Ashton Blue is the main writer and founder of Ash Blue Web Design. As a web designer in Chicago Illinois he engages in helping its citizens, design meetings, fighting the occasional nemesis, and public speaking. He also has a noteworthy obsession with coffee...
You might also be interseted in:
24 Responses to “Custom Facebook Fan Pages with FBML”
Leave a Reply
Suggested Reading
Hello been inspired with this out and had came up with this:http://www.facebook.com/pages/Rgs-Sandbox/1185937... thank you!
Just took a look around, not bad. You have a nice sandbox filled with some good examples of what you can do with FBJS. API just changed and you can do some different cool new things now. Might have a post on it soon.
when any multiple tab navigation selected then how to give color to it,
You have to use FBJS. For my Facebook fan pages I add a class with JavaScript and remove it when something else is clicked. Currently thats the simplest way to make the tabbed navigation work.
I found:http://forum.developers.facebook.com/viewtopic.ph... Slight doubling of nav items but no fbjs needed and it works really nicely. I've used it on my test page:http://www.facebook.com/pages/JPC-DESIGN/12182883... (on dummy page)
Looks like that might be a better method, I'll have to try it soon since FBJS might be completely decommissioned by Facebook in the future. Especially since it looks like the newest version of FBML is merging with FBJS from their new documentation.
Looks like that might be a better method, I'll have to try it soon since FBJS might be completely decommissioned by Facebook in the future. Especially since it looks like the newest version of FBML is merging with FBJS from their new documentation.
Looks like that might be a better method, I'll have to try it soon since FBJS might be completely decommissioned by Facebook in the future. Especially since it looks like the newest version of FBML is merging with FBJS from their new documentation.
Hi @ Ash
can you show me any example.
Thanks
Truth is there really isn't an easy example for this. You'll have to look into the old FBJS documentation on Facebook's developer wiki. Can be done through creating an array and changing classes based upon the clicked element. Not easy to build and not very duplicatable across projects. Might be better to use the CSS method listed below in the comments for highlighting navigation. FBJS might be depreciated or permanently removed very soon, so be careful.
Thanks. ill try & let you know about it.
Divyesh
Good news, Facebook has announced a simpler and easier to use javascript api in development. Rumored to have tab functions too!
I put in the with the URL to my style sheet, but it is not working. What could cause this to not function properly?
Looks like it didn’t allow you to post it, I’ll email you to try and help.
I have a custom tab Static FBML page. On that page I have events that will be held at some of our stores. In the html there are url’s to link to that particular stores’s page on http://www.golfsmith.com. The links aren’t working though. Do you know how I can add a URL in FBML that will link outside of Facebook?
Thanks
Wes
Any idea how to add a Twitter feed to static fbml similar to how Involver does it?
My guess is you need PHP 5s Simple XML to parse the Twitter XML feed (has some limitations). But Facebook may not allow the usage of simple XML to grab external data (some websites shut it off) I haven’t tried, but if you do let me know how it goes. You can learn XML in about 30 minutes with this tutorial http://www.devshed.com/c/a/PHP/Introducing-SimpleXML-in-PHP-5/
Hi,
I posted below 2 links that lead to two facebook pages that contain a “Send VIP Invite” (the I Fan Page) and “Tell Your Friends” (the discovery channel page) box on the left side of the wall tab. These two boxes act like the “Suggest To Friends” link bellow the profile page image. Basically, they turned the “Suggest to friends” link into a TAB/BOX.
This is very efficient comparing to the normal “Invite Friends” tabs and boxes (which i already use – http://wiki.developers.facebook.com/ind … quest-form) because you can suggest your page to all your friends and they can become fans quicker…
So, do you know how they did such thing?
http://www.facebook.com/ifan.page.design?v=info&ref=search
http://www.facebook.com/DiscoveryChannel?v=wall&ref=search
Thank you!
You need a Facebook API key to generate a custom API key from my understanding. This article has some in depth information: http://forum.developers.facebook.com/viewtopic.php?id=27462
Ash,
How can I recreate a fb fan page with the following default tab:
http://www.facebook.com/pages/iPad-Giveaway/301268527846?v=info&ref=search
I have been trying to find a tutorial for hours now, but there is literally nothing on it. I understand how to install FBML and add the extra tabs, but am lost when it comes to creating something like the above. I am looking to place such a script on the following fan page:
http://www.facebook.com/pages/Dear-Santa-I-Know-Its-Late-But-Can-I-Have-An-Ipad/277159637510?ref=ts
If you can help me in anyway, I would greatly appreciate it,
Owain
This is the page I am looking to recreate:
http://www.facebook.com/pages/iPad-Giveaway/301268527846?v=info&ref=search#!/pages/iPad-Giveaway/301268527846?v=app_4949752878&ref=search
The page you want to create is actually a CSS based layout on Facebook. Pretty much they created a Photoshop document, sliced up the images, and coded them into CSS.
Sadly though, there is no simple way you can learn CSS. Try out http://www.w3schools.com/ to learn CSS (but it will probably take a while since its a large and complex language). I can help with this though, I’ll email you with more info.
He there – thanks for the link. Just a heads up – fan page tab sizes will be shinking to 520 pixels wide in late Feb – early March. They haven’t announced the exact date yet, but they say they’ll know more in a week or so. More info here: http://www.snipe.net/2009/10/upcoming-changes-to-the-facebook-application-platform/
PS – if you could take out my real name and just use ‘snipe’, that would be great. I like to keep a line between personal and public lives ;)
No problem, I’ll adjust the name. I heard about that with Facebook on another website, but I originally heard the size change was supposed to happen in December from another source.
Btw, I’ve really been enjoying the blog, great quality content.