Looking for a way to differentiate yourself from among the sea of blue shaded Facebook business pages? Looking for a way to make your brand identity prominent on your Facebook page? Tired of looking like every other page on Facebook? Making a page tab is an easy way to add some visual interest and make a statement on Facebook.
Let’s look at a couple of examples. Here’s a recipe tab from Whole Foods Market. Notice how they use their own color palette but retain Facebook’s font families so that the tab has it’s own personality yet doesn’t look completely separate from the surrounding Facebook layout. Here’s another example from Coca Cola. They use the canvas page as their landing page for their Facebook page to put their brand identity on full display as soon as people arrive at their page.
Let’s get started.
Step 1: Layout
Sky Candy Layout
For my example, I’m going to be making a tab for an aerial arts collective in Austin named Sky Candy.
Follow your favorite layout process, pencil & paper, Photoshop, Fireworks, some esoteric open source solution I haven’t heard of, and design for a maximum of 520 pixels. There’s not a maximum height, but keep in mind what you want people to see at first glance. Don’t bury the lead down the page where people on a laptop would have to scroll. I’m assuming that my readers know the basics of HTML/CSS and will know the steps involved in translating their design to markup.
Step 2: Code
For the initial coding of the page, I recommend initially working on it as you would any web page. Open your favorite text editor (I’m liking Textwrangler nowadays) and begin your layout. Only, with this layout skip the doctype, <head>, <html>, and <body> tags. They’re not needed as the html you’re writing will be inserted inside of Facebook’s page. Start with a wrapping div.
I recommend two styles, the rest is entirely determined by how best to code your layout.
[css]div#wrap {
width:520px;
position:relative;
}[/css]
Tips
- 520 pixels is the maximum width of the tab, so it’ll be helpful when you’re initially coding the layout to have that defined.
- The position:relative is so that you can absolutely position elements inside of the container, if you need to.
- You don’t necessarily need to define the type styles in the stylesheet if you’re fine with using the Facebook font stacks. I’ll usually leave Facebook’s text styling intact so that the tab blends well with the rest of the page.
When you’re done coding your layout FTP your CSS file and all of your images to a web server. Change all of your image src and CSS href attributes so that they are pointing to the files on the server. In the next step we’re going to copy and paste the HTML from the layout file into Facebook.
Step 3: Facebook
For this step you need to be an admin of the page you’re going to add the tab to. First, I recommend setting up a test page on which to load the tab. This way you can work out any problems that you might have with the tab before placing it on the page where people might see it. You can do it here: http://www.facebook.com/pages/. There’s a “Create Page” link at the top right of the page.
Create Page
Name it whatever you want. Creatively, I named mine, “Tom’s Test Page.” Your new page will look like this:
Tom's Test Page
From here, find the Edit Page link underneath the profile picture of the page.
Edit Page
You’ll bring up the Basic Information edit screen. Click the Apps link in the navigation on the left side of the page.
Edit Basic Info Screen
This will bring up the Apps screen. This shows a selection of apps that can be added to your page. At the very bottom is the Static FBML app. Click the Go To App link.
Go To App
This brings up the FBML Edit Box. This is where you can paste in the HTML layout you made earlier.
FBML Edit Box
Name it whatever you like, copy and paste the content of your HTML file and click Save Changes.
Copy, Paste, Save Changes
You’ll get a Changes Saved message at the top of the screen. From here click the link at the top left of the page to view your page and see what the new tab looks like.
Changes Saved
The new tab will be in the navigation of the page. Click it and let’s find out if everything worked.
New Tab
And… Success!
Success!
Hopefully everything look correct. As with any web project I find there’s usually a couple of things to correct.
Tip
Facebook imports and caches your CSS file. To get it to update, give it a query string in the link href and increment it to force Facebook to update the CSS. This was the source of much frustration the first time I made a Static FBML page tab.
CSS Query String
Wrapping Up
When everything looks good on your test page follow the same process above and copy the code from your test page into the Static FBML editor of the page you were looking to update. And that’s all there is to creating a very basic FBML tab.
What Next?
There’s a lot of FBML options to explore. From basic sharing buttons to more complex if/else interactions. Check out the FBML documentation in Facebook’s developer reference site. You can see the tab I made in the tutorial in action on the Sky Candy Facebook fan page. If you’re more into aerial arts than web tutorials, you can check out their Kickstarter.
You can view the files I used to make the tab. Here’s the HTML file. View the source to see the markup. Here’s the CSS. You can also download the psd layout. The photo is by Ryan Hayes at Aerial Arts Photography.
May the force be with you in all your FBML adventures!