Tutorial: Edit facebook pages with static fbml application

This is a how-to article on expanding your Facebook Fan Page by using the application Static FBML which allows you to add new “application tabs” to your tabs or box which can incorporate CSS, HTML, Facebook’s flavor of JavaScript, FBJS, and Facebook’s mark-up language FBML. FBML has greatly expanded what is possible on Facebook pages and, if you’re sufficiently skilled with CSS/HTML and, optionally, FBML, you can make some really fine looking fan pages.

Two examples of what we’ve done at HyperArts: Our Facebook Page and Skis on the Run, one of our clients.

What follows is a detailed guide to installing and working with Static FBML. I would also recommend Jesse Stay’s excellent book, FBML Essentials: Facebook Markup Language Fundamentals, published by O’Reilly. You’ll find it indispensable.

So let’s get started!

PLEASE NOTE:

* Static FBML can only be added to Facebook Fan Pages (aka Public Profiles, aka Business Pages);
* You CANNOT auto-run JavaScript in an FBML page – it must require a user action; you can also use FBJS (Facebook JavaScript);

* You SHOULD NOT use a tag — it works in most browsers, but NOT in Internet Explorer (of course); you can, however call an external style sheet via

(Read this post about the difference between Internet Explorer and other browsers regarding Static FBML and CSS…);

* Maximum width of FBML page is 760px (However, Facebook has announced this will be reduced to 520px in later 2009/early 2010.);

* Include ONLY the HTML/CSS that’s between the and tags; NO , , or meta tags;

* In order to add applications to your Fan Page, you MUST have a personal profile associated with the Page as an Administrator; the Admin can add apps when logged in.

Adding Static FBML to your Public Profile (Fan Page)

1. Click “Edit Page” under the Page’s large avatar image;

2. Under “Applications,” under “More Applications” click the pencil/edit icon and select “Browse more”;

3. Under “All Applications” in the left column, enter “static fbml” (without quotes) into the search field and hit your enter/return key;

4. Go to the Static FBML application from the search results page (it should be the only result);

5. Click “Add to my Page” in the left column;

6. You have successfully added Static FBML to your Page.

Adding Your FBML Box or Tab to Your Public Profile Page

* click on “Edit Page” in the left column right under the logo/avatar;
* Find the “Static FBML” link, click “Edit”;
* enter the name you want to appear in the box heading in the “Box Title” field;
* enter the HTML or FBML content in the “FBML” field;
* if you want your FBML box to appear in the left column of your Wall, set the width to 180px (View the example on our Facebook Fan Page — “HyperArts Websites & Projects“);
* if you want it to appear in the tabs in the main Wall column, 520px is the width that Facebook will allow beginning in “early 2010″ according to their Developer Roadmap. (View the HyperArts Fan Page example — the “HyperArts” tab);
* when you’ve added in your HTML/FBML — there doesn’t appear to be a “preview” function — click “Save Changes”;

Having Your FBML Appear Either in the Tabs or Left Column

* On your Page’s main page, click “Edit Page” under the logo/avatar;
* Locate the FBML application (it will be called whatever you entered into the Box Title field, plus “FBML”), and click “Application settings”;
* Make sure “Box” is “added” and “Tab” is “added” and click “okay”;
* Click on the “Boxes” tab on your Wall (at the top of the center column);
* to have the FBML box appear in the left (narrow) column of your Wall, locate the FBML box on the Boxes page, click on the edit/pencil and select “Move to Wall Tab”;

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”;

Creating Additional FBML Boxes

* Click “Edit Page” under the logo/avatar of your Fan Page;
* Locate the FBML box you have created;
* Click “Edit”;
* Below the fields for the box you created, locate and click “Add another FBML box”;

I added a Box to our HyperArts Page, called “Websites” (down the left column) and included some URLs relevant to the HyperArts brand. I did some quick customization utilizing HTML markup (haven’t yet checked out FBML – that’s next). I also added a second FBML page added as a Tab at the top called “Portfolio.”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: