Facebook Fan Pages (Part 2)
Facebook Tabs – How to and Showcase
Following on from my previous post on how to create a Facebook Fan Page, I’m going to show you how to create your very own tab on Facebook using FBML. You may have noticed recently that many companies are creating their own tabs on their Facebook Fan Pages. These are used to promote products, give extra information about the company, but it can be used for literally anything.
In my example I will create a simple ‘About Me’ tab, explaining just how wonderful I am!
First I create a very simple HTML document in Dreamweaver (or any other HTML creator)
Everything you do when you’re designing your Tab has to be sourced externally and you can’t assign title or body tags but apart from that you can do anything you can think of.
Here is the Code I’ll be using:
Now it’s time to create the tab for our group. Search for Static FBML, click on the application and under the logo click Add to my Page…
…choose the button Add to my page next to your page.
You’ll now be taken back to your page, on the left click on Edit Page. Under the heading Application you’ll see FBML, click on the Edit Button.
Give Your Box a Title – this will be the name of your tab. Paste in the code from your HTML document and click Save Changes.
Now click on the link back to your page in the top left of the screen.
Finally on your page click on the Plus icon on the right of your Tabs and select the Tab you have created. You can now drag it along your tabs to make it more visible.
If you want to display your Tab in the left column on your Wall, click on the tab Boxes and click on the Pencil icon on the top right corner of your box and choose Move to Wall tab and you’ll get something like this…
Check out the example here: http://www.facebook.com/pages/Toms-Example-Fan-Page/354685096471
Not only do these tabs look really professional, they are great for promoting your products and services. Why not try using flash, adding interactive features like a contact form, the possibilities are endless. Have a look at some of the examples below for inspiration.
Showcase
Smashing Magazine
Smashing Magazine have gone for a simple clean style to promote their new book (which is excellent by the way).
adidas Originals
.Adidas use flash to create an entire browsing experience within their facebook tab.
Gap
Gap have created a few tabs on their Facebook page to direct users onto the main Gap website.
Starbucks
Starbucks has a nice little map which directs people to their other country specific Facebook page.
Starbucks
Sunkist Soda not only show streaming video on their tab but allow you to submit your own via a form.
Twilight
Movies like The Twilight Saga are also getting in on the act.
Nissan
Why not choose your next car via Facebook?
Mountain Dew
A strong, vibrant design by mountain Dew
Related posts:
Posted By: Tom
Art and design has always been my love and talent. Like a cat I always land on my feet, achieving a BA in Graphic Design from Coventry University. My specialties include design, illustration, flash and animation.
Tim Ware Says:
March 11th, 2010 at 11:45 pm
Nice post, Tom. Clear examples and screenshots.
When folks are building their Static FBML application tabs, they should be aware of Facebook’s stated intention of reducing the available screen real estate from 760px to 520px in “early 2010.” Even though these changes haven’t taken effect yet, I think it’d be good to design new tabs at that width rather than do one width and then have to rethink the design at a much narrower width very soon.
Also, a nifty trick to make sure that Facebook refreshes its cache when you make changes to your style sheet and want to see them immediately. Just add:
?v=10.1 after the .css in the stylesheet call. Each time you make a change to the stylesheet, regenerate your FBML tab, incrementing the number by 1 (or whatever, as long as it’s a different number). So the URL of the stylesheet is: “http: / / domain.com / mystylesheet.css?v=11.0″
I posted a detailed tutorial on Static FBML on our blog which your readers will find useful.
Cheers.
Tom Says:
March 12th, 2010 at 12:48 pm
Thanks for the tips Tim, keeping in mind those dimension is a good idea when your designing your tab. That cache tip is really good too – I wasn’t aware of that.
You’ve put FBML to really good use on your page too, http://www.facebook.com/HYPERARTS
Thanks again
Tom
Tim Ware Says:
March 12th, 2010 at 4:01 pm
Thanks Tom. BTW, I love your website … big and bold, and clear, as well. Cheers…