How to Use Static FBML to Customize Your Facebook Page

by William Smith on December 16, 2009

smiththumbThe vast majority of Facebook fan pages carry the same, standard “vanilla” look. You’ve got a wall, info tab, pictures, video and events. Every once in a while you will come across a page that stands out from the others. Perhaps they have a custom landing page, or some type of graphical box which has an offer. Facebook doesn’t make it very easy to learn how to add that functionality, and it took me quite some time to learn the technique.

What is FBML?

FBML is Facebook’s version of HTML, the language that web pages are written in. For the most part, a knowledge of HTML is all that is needed to utilize the functionality of the Static FBML application. This particular application, which was created by Facebook and can be added to your pages, allows you to create a “web page” within a tab or box that you can attach to your page. Sound complicated? It really isn’t, once you dig in and get started.

How do find the Static FBML application and install it

Like any other application, Static FBML can be found by using the search box anywhere on Facebook. Simply type in: Static FBML and you should see results similar to these (see image below)

Facebook search results for Static FBMLFacebook search results for Static FBML

In the results list you will find listings for both Applications and Pages. You are looking for the Application so click on that.

static-fbml-add-to-pageOnce your on the page for the Static FBML application, you will look for the link to “add application to my page” which should be at the top left of the screen, under the logo for the application. Clicking the link brings up a popup window which allows you to select the page you’d like to add it to. Keep in mind, you can only add application to pages which you are an administrator for.

After you have added the app, pull up your Facebook fan page and click on the + sign in the nav bar above where you can enter wall messages. There should now be an option to add a new FBML tab.

add-fbml-tab

Here is where things get a little tricky. Now you have a new tab called “FBML” on your page but it is blank, and there doesn’t appear to be a way to add content to it. Generally clicking on the pencil icon on any tab allows you to edit options for it, however with this particular app that only gives you the ability to delete the tab, which isn’t what we are looking for.

Editing your new FBML tab

Instead, head to your page’s administrator section (e.g. return to the wall page, click “Edit this page” from the list of options under your logo).

fbml-admin-page

Click the edit button and you will be brought into “edit mode” for the Static FBML application itself. Here you can adjust the title that will show up on the tab, as well as drop in the text and/or HTML/FBML code you’d like displayed when someone clicks on the tab.

From here you can be creative. I like to generate some HTML code using an editor and copy/paste the code into this box. Some elements like video embeds you may have issues with. There are workarounds using Facebook’s own FBML specific embed tabs which will be covered in another article on the site. But basic formatting, tables, images and links will all work in the Static FBML tab you have just added to your page.

fbml-edit

Click save changes and go back to your Facebook page wall. You should have a new tab called “Sample FBML Tab” that when you click on it displays “Hello, World” in a H1 heading.

In addition to the tab, you now have a copy of this FBML output inside your “Boxes” tab. This is another one of those hidden “features” that Facebook has added, and it is important to note because the only way to move this FBML content to your page’s wall is by first going to the Boxes tab, and clicking the pencil next to the box and selecting “Move to Wall.” No, it doesn’t make a lot of sense, but thats how it works for now.

fbml-on-wall

This is obviously a simple customization, but you can create complex tables and add imagery that will stand out for your visitors. Here are just a few examples of the customizations I’ve seen done with the Static FBML application.

Click to expandClick to visit
Click to ExpandClick to visit
Click to expandClick to visit

Link to Original Post

Reblog this post [with Zemanta]

{ 2 comments… read them below or add one }

1 Davina K. Brewer December 18, 2009 at 1:21 pm

Nice tutorial. I’ve used this FB plugin for fan pages, great way to add additional information with tabbed boxes for easier navigation.

Reply

2 Jamie Jo Vittetoe December 18, 2009 at 2:05 pm

These directions are for brand pages, correct? Is it possible to add FBML to personal profiles? I’ve looked around but can’t find a workaround for this…

Reply

Leave a Comment

Previous post: 13 Google Personalized and Real Time Search Resources for SEO and Pay-Per-Click

Next post: Social Media Outsourcing: Good Business or Fake Dialogue?