How To Customize Facebook Fan Page With Facebook Static FBML Application

January 12, 2010 by Jay Feitlinger

Facebook Pages nor Profiles allow any type of HTML in the main content section, but you can add FBML and HTML applications to add more custom elements to a Page, like clickable images and interactive content.

The Static FBML app allows you to add advanced functionality to a page by placing a customizable box in which you can render HTML or FBML (Facebook Markup Language), giving you free reign over the space to add images, video, stylized text and almost whatever else you want.

If you are interested in customizing your Facebook page like ShopTab this blog post will share with you how to use  the Facebook application Static FBML to add new tabs and sidebar boxes to your Facebook Fan Business page.  On ShopTab we added some custom items such as Custom Twitter and Sign up Banner on sidebar.

With the Facebook Static FBML app you can use HTML and Facebook JavaScript (FBJS) to create a custom look and feel on your Facebook page that companies such as VW (shown below), Pizza Hut, and Harley-Davidson have taken advantage of.

VW Facebook Fan Page Static FBML

Below are the 4 steps you go through to customize your Facebook Fan Page and the sky is the limit on what you can do:

Step 1 – Add Static FBML to your Facebook Fan Page

  1. Visit Facebook Static FBML App page at http://www.facebook.com/apps/application.php?id=4949752878
  2. Click “Add to my Page” in the left column
  3. You have successfully added Static FBML to your Page.

Step 2 – Add Your FBML Box or Tab to Your Facebook Fan Page

  1. Click on “Edit Page” in the left column right under the logo/ profile image
  2. Find the “Static FBML” link, click the edit/pencil icon and select “edit”
  3. Enter the name you want to appear in the box heading in the “Box Title” field such as Video, etc.
  4. Enter the HTML content in the “FBML” field.  A great HTML Tutorial site is W3 Schools.
  5. When you’ve added in your HTML click “Save Changes”

Step 3 – Place Your Static FBML Appear Either in the Tabs or Left Column

  1. On your Page’s main page, click “Edit Page” under the logo/profile image
  2. Locate the FBML application (it will be called whatever you entered into the Box Title field, plus “FBML”), and click the edit/pencil icon
  3. Select “Application Settings”
  4. Make sure “Box” is “added” and “Tab” is “added” and click “okay”
  5. Click on the “Boxes” tab on your Wall (at the top of the center column)
  6. To have the FBML box appear in the left (narrow) sidebar column of your Wall, locate the FBML box on the Boxes page, click on the edit/pencil and select “Move to Wall Tab”
  7. To have it appear in the Boxes tab at the top, go to the FBML box you created in your left column, click the edit/pencil and select “Move to Boxes tab”

Step 4 – Creating Additional Static FBML Boxes

  1. Click “Edit Page” under the logo/avatar of your Fan Page
  2. Locate the FBML box you have created
  3. Click the edit/pencil and select “Edit”
  4. Below the fields for the box you created, locate and click “Add another FBML box”

After you have added Static FBML to your Facebook Fan page please share in the comments area below what creative ideas you came up with on customizing your Facebook fan page. We are always on the lookout for additional custom Facebook fan pages so please share your favorite custom Facebook Fan pages below.

If you enjoyed this post, make sure you subscribe to my RSS feed!
  • Pingback: Tweets that mention How To Customize Facebook Fan Page With Facebook Static FBML Application | ShopTab Facebook App Blog -- Topsy.com

  • Pingback: How To Customize Facebook Fan Page With Facebook Static FBML … at Blogging

  • ChocolateGrail

    Hi, this is an excellent step by step guide but I can't get anything to show up. I added the Static FBML. I added it to my page. I can access it and make a box show up on my site. But in the box it only puts the header of the HTML box I created. Then when I click Move to Wall Tab (which I am assuming is the LH column) poof! it vanished. Not only does that vanish but the Static FBML vanishes too and I have to re-install it. My facebook page is ChocolateGrail

  • http://tesarn.blogspot.com/ tesarn

    Nice tips, I made it through your post, thanks :)

  • http://tesarn.blogspot.com/ tesarn

    Nice tips, I made it through your post, thanks :)

  • http://tesarn.blogspot.com/ tesarn

    Nice tips, I made it through your post, thanks :)

  • http://rss.x-pd.net Mohamed Samir

    great

  • Mlecarter

    Please help! There is no option to add this to my page I have tried searching the internet for answers. When I click on the static FBML page on facebook it just has the option to like or add to fan page. When I do this nothing is in my edit screen option. Any help would be appreciated.
    Thanks,
    Michelle Carter
    mlecarter@yahoo.com

  • Mlecarter

    Please help! There is no option to add this to my page I have tried searching the internet for answers. When I click on the static FBML page on facebook it just has the option to like or add to fan page. When I do this nothing is in my edit screen option. Any help would be appreciated.
    Thanks,
    Michelle Carter
    mlecarter@yahoo.com

  • http://www.facebook.com/ShopTabApp ShopTab on Facebook

    Hi Michelle, When you click the “add to page” link on the left sidebar on the static FBML tab does OR DID a box pop open and it showed your Facebook fan page? If so, did you click on Add to Page next to your page?

    Once you click the add to page the static FBML app will be added to your page. What you want to do is then visit your page and click “edit page” on left side. If you look at the next page you will see in the list a line that reads Static FBML. Click on Edit Application underneath that and you can then build out your page. Hope that helps.

  • http://www.facebook.com/ShopTabApp ShopTab on Facebook

    Hi Michelle, When you click the “add to page” link on the left sidebar on the static FBML tab does OR DID a box pop open and it showed your Facebook fan page? If so, did you click on Add to Page next to your page?

    Once you click the add to page the static FBML app will be added to your page. What you want to do is then visit your page and click “edit page” on left side. If you look at the next page you will see in the list a line that reads Static FBML. Click on Edit Application underneath that and you can then build out your page. Hope that helps.

  • Mtryling

    not working. FBML settings do not have add box or add to wall options. html added to FBML application renders a blank FBML page…

  • http://twitter.com/mlmchef Dominick Zirilli

    Great info, it works fine for me i just need some code to add in there

  • http://www.laurielphotography.com LaurieL

    Nothing’s working. I can see the Welcome page I created…but when clicked on…there’s nothing there. What the heck am I doing wrong?? http://www.facebook.com/laurielphotography

  • LaurieL

    Here’s the code I have in the FBML box. But, like I state below…nothing’s showing up

  • Lauriel

    Yikes! Did I not copy the code?? Here it is…one more try!

  • http://mashlab.com Julian

    Hey,

    this is a great article about customizing Facebook Fan pages by using FBML.

    I think FBML is indeed very useful, but it´s very complicated as well.

    Therefore I want to share with you our free tool on http://mashlab.com – mashlab makes it possible for you to draw new elements simply on the work surface using drag & drop. You need no knowledge of complex programming languages such as FBML or HTML.

    Hope this post helped you! Best,
    Julian

  • http://www.af-design.com Erik Giberti

    Facebook will no longer allow the installation of the static FBML application effective 3/11/11. Facebook is also recommending developers transition their services away from FBML. Creating applications is generally more than most people need. I’ve built this application allows users to replace their Static FBML application with little or no modifications http://www.facebook.com/revealtab

  • Ahutson

    So, how are people supposed to customize their page without the static FBML application? I’ve been struggling with this for a couple of weeks now, as that simple “Add to my page” is not there. I dont knnow if that’s because I haven’t “published” my page yet, or if it’s just not available any longer. Does anyone know?

  • Bha Dra

    Blokir..!

  • http://twitter.com/eric_geier Eric Geier

    Old article…here’s an update article on using the iFrame method and more to customize your business/fan page:
    http://www.tomsguide.com/us/Facebook-Page-Customization,review-1672.html

  • http://twitter.com/eric_geier Eric Geier

    Old article…here’s an update article on using the iFrame method and more to customize your business/fan page:
    http://www.tomsguide.com/us/Facebook-Page-Customization,review-1672.html

  • http://www.carrotmedia.com/services/facebook-app-development facebook application

    what is the meaning of FBML ?
    and for what purpus we use that ?

  • http://www.socialcubix.com/ Facebook Development

    Cool answer, really impressive to me.

  • http://www.socialcubix.com/ Facebook Apps Development

    Pretty awesome answer to me, i am impressed with this.