If you are a Webmaster or HTML developer, whether in a big company or a small business you should probably know by now that creating a Facebook page can be a very important social marketing tool these days. Hopefully, you already have a Facebook page created for your business; if not, you should definitely look into setting one up and reading up on some Facebook Marketing Tactics.
One important thing about these Facebook pages is that besides standard Facebook wall interaction, they allow you to create custom tabs where you can use HTML to design and build creative small boxes that can be mini-websites on their own.
Here are some examples of the Facebook tabs from Best Buy and Gap:
As you can see, one can get very creative with these – just like for your website design.
Why would you want to create these tabs? Well, it’s a good way to update your Facebook content and promote anything new. If you’re a store that sells products, you may want to create a new tab every time you have a big sale or to outline a new line of products. If you benefit from seasons/holidays, you can update the tabs according to seasonal sales and specials. There are tons of reasons, but the bottom line is that you want to create and constantly update interactive content and stay in touch with your Facebook audience.
So, how exactly do you do add these tabs and work with HTML?
You should add a Static FBML application to your Facebook page, which will allow you to create new tabs/boxes and render HTML code. If you’re having any problem adding the application, check out a detailed explanation from Greg Finn on Customizing the Facebook Page.
Once the FBML Application is added, you can use it to create new tabs and boxes. Just click on Edit next the FBML box and now you can name your tab/box at the top and insert your HTML code at the bottom.
Here you can design and build your layout using regular HTML. It can be as simple as inserting one big image, or building a mini-website.
A few things to keep in mind when working with this application:
1. The max width should be around 750px.
2. Some people find it easier to use table layouts here as they are nice and compact. However, if you’re a CSS stickler who absolutely hates tables, you can use a CSS-based layout.
3. CSS code is allowed. There are a few ways to get it in there. You can either:
- Use CSS at the top of the HTML by including it inside the <style></style> tags
- Use inline CSS within each element by using style attribute, like: <div style=”CSS here”>
- There is a way to reference external stylesheet by following Facebook rules on including files. You would need to specify a version number, which is a bit unusual.
Facebook will rewrite some CSS while rendering so that only elements within your box are affected and not the entire Facebook template.
4. You can include flash files as well. If you’re into flash design, you may just be looking for a way to embed a flash file using this application. You can do so by using the following FBML Code template:
<fb:swf swfsrc=’http://www.yoursite.com/flash/flash-file.swf’ imgsrc=’http://www.yoursite.com/images/flash-image.jpg’ width=’650′ height=’408′ />
The way FBML includes flash files is that you first need to display an image. Once the user clicks on the image, the flash file then starts to play. In the code above, you need to specify the location of the flash file and the image (as well as width and height). The image can be a screenshot of the flash or a separate intro image; it’s up to you.
5. Image and File Hosting: It’s probably best if all images and other files are hosted externally. If you have a company website already, just host your images on that server. If not, you can look into getting some free file hosting.
6. Image bug fix in Firefox: One small, but annoying thing that I noticed is that some images can have unwanted space in between them in Firefox, which happened to me only when rendered through Facebook (and looked fine on a regular website). This can be especially annoying if your layout consists of images that need to be blended together.
I used the following CSS trick to fix the problem (inside <style> tag):
img {
display:block;
}
Just make sure that rule does not interfere with any other CSS you may have or cause any problems.
7. No javascript or other scripting languages are allowed – so just use HTML/CSS and, of course, FBML.
Finally, once you save the page, it will create the new tab and a box under the Boxes tab. This seems a bit redundant to me, so you can then delete the box itself or the Boxes tab altogether and just leave the Tab. Then you can also drag your new Tab to position it; whenever makes sense.
You can also add additional Tabs/Boxes by clicking on ‘Add another FBML Box’ at the bottom of the FBML Edit page.
Bookmark this post:
30 Responses to “How to Create Rich HTML Tabs on Your Facebook Page”
Feel free to leave a comment...
and oh, if you want a pic to show with your comment, go get a gravatar!
Thanks for this, I have been trying to tweak out some custom tags using html but it isn't "taking" and it's frustrating. Do you know of any other "rules" I may be breaking such as length of lines of code or…? Every time I paste code in, it truncates it and doesn't take. So I shorten it, delete some stuff, and still it shortens it for me. LOL Using plain html, with tables, removed java and any other funkiness, not sure what's up. Thanks for posting though, it's gotten me to move on something I've been meaning to do. Just wish it were simpler!
Karen
Awesome… learned something else new today!
didn't realize you can use HTML to this extent on Facebook. thanks for the heads up!
I came across a client that needed a custom facebook page I found on twitter, and as a designer I thought sure how hard could it be.
This FBML extension really saved the day!
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
Hi Karen,
I'm not really sure what you mean by 'tweak out some custom tags'.
I'm not aware of any limit on the length of code. Did you try to test it with some very small HTML code first to see if that works?
I suspect that there is some problem with the code you're trying to paste.
In any case, you can try to ask some detailed questions on the 'Static FBML' Discussion page: http://www.facebook.com/apps/application.php?v=ap...
Hope that helps
Hi Karen,
I'm not really sure what you mean by 'tweak out some custom tags'.
I'm not aware of any limit on the length of code. Did you try to test it with some very small HTML code first to see if that works?
I suspect that there is some problem with the code you're trying to paste.
In any case, you can try to ask some detailed questions on the 'Static FBML' Discussion page: http://www.facebook.com/apps/application.php?v=ap...
Hope that helps
Many Thanks for very nice blog..
Awesome tutorial. My FB page is something I really want to work on in the upcoming weeks and this is something I will come back as a reference to later!
Thanks for the killer tutorial
Sarge | BeginnerBlogger.com
Fantastic post, thanks for the eye opener. Something I can really do with in offering Social Media to clients in the overall online marketing strategy. This is a new opportunity to really be creative and bring out and really customise fan pages, and build a brand.
Any creative marketing, branding, promotion ideas of how to take advantage of these HTML tabs anyone?
Very Good Article
Thank God I twitter as I saw this link there. Just setting up a company and had hoped to use Facebook as a marketing tool – this is a great help
Thanks
Nick
Seagrass Baskets
[...] 10e20: How to Create Rich HTML Tabs on Your Facebook Page [...]
This little style hack saved my life. I could not figure out what the heck was going on with firefox. I owe you a drink if we ever meet.
"img {
display:block;
}"
[...] How To Create Rich HTML Tabs on Facebook [...]
What about embedding RSS into a FBML tab? What's the easiest way to go about doing that?
Thank you! I got it to work, I had some extra heading tags that were inserted by Dreamweaver. Once I deleted everything except what was from in the actual body tags it worked!!! Thanks!
I'm not a professional programmer and that's why your article was interesting for me. It looks like a detailed guide for those who are to some extend new to html – like me. Thanks a lot:)
Check out some interesting stuff you can do on your Facebook Fan page.
Steps & code provided.
Click on "Fan Page Utilities" tab and become a fan to check out the contents of the page.
If you have seen some interesting features been implemented please do share it with us.
http://www.facebook.com/webwhispers?v=app_6009294...
[...] How to Create Rich HTML Tabs on Your Facebook Page (10e20): I know Jesse just contributed an awesome article on this blog but Victor’s guide here is also pretty good. [...]
[...] How to Create Rich HTML Tabs on Your Facebook Page (10e20): I know Jesse just contributed an awesome article on this blog but Victor’s guide here is also pretty good. [...]
[...] ich das alles weis? Nun, 10e20.com beschreibt das auf Englisch und etwas detaillierter searchengineland.com … und auch bei [...]
[...] How to Create Rich HTML Tabs on Your Facebook Page (10e20): I know Jesse just contributed an awesome article on this blog but Victor’s guide here is also pretty good. [...]
This is fantastic. Thanks for taking the time to share it
Great! Thanks!
Hi Peeps
here i am someone with no clue what I'm doing lol
i know what i want is possible
just no clue how any help would be greatly appreciated
MySpace- too easy. MyYearbook- piece of cake! Ning- not a problem…
But I have been wondering what I can do about my Facebook page for the longest time- Thank You.
Until now, I was oblivious to this app. I gotta go do this.
I have added the custom tabs – which is GREAT. But I am totally new to html code. I just want to add images in the new tabs that link to an external url. Can you help me??
Thanks!
Just wanna say thank you for the super-helpful tutorial =)
i've been wondering the same…i feel like such a blonde. I pasted the html for my website and nada
i'm not sure what i'm doing wrong
thanks sir ..
it is superb..
keep it up …