You can check out our Fan Page Portfolio to see some of the pages we’ve developed.
Static FBML Fan Page Templates – Clean, Professional, Ready to Use
Also, we offer a number of ready-to-go Static FBML Fan Page templates for sale. The code is clean and Standards-compliant and displays well in all modern browsers (even Internet Explorer 6!).
I would also recommend Jesse Stay’s excellent book, FBML Essentials: Facebook Markup Language Fundamentals, published by O’Reilly.
Problems? Look here first!
If you have problems, you should definitely check out these articles:
- HyperArts Comprehensive Static FBML Guide — Adding, Testing & Troubleshooting
- The 16 Most Common Static FBML Problems and Their Solutions
- Static FBML FAQ — all you need to know about Facebook’s Static FBML application + Links to all our Static FBML Tutorials!
What You Should Know Before You Get Started….
- Static FBML can only be added to Facebook Fan Pages (aka Public Profiles, aka Business Pages);
- You SHOULD NOT use a <style type=”text/css”> tag — it works in most browsers, but NOT in Internet Explorer; you can, however, call an external style sheet via <link href=”http://yoursite.com/styles/layout.css” rel=”stylesheet” type=”text/css” /> (Read this post about the difference between Internet Explorer and other browsers regarding Static FBML and CSS…);
- Maximum width of a custom tab page is 520px;
- Include ONLY the HTML/CSS that’s between the <body> and </body> tags; NO <html>, <body>, <head> 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 Facebook Fan Page
- Click “Edit Page” under the Page’s large avatar image
- If you don’t see “Static FBML” then scroll down to “More Applications” and you’ll probably see Static FBML listed:
If not, click “Browse more”;
- Click on “Static FBML” to go to the Static FBML application;
- On the Static FBML application page, click “Add to my Page” in the left column
- If you are the administrator of more than one page, you’ll get a pop-up list
Click “Add to Page” next to the page to which you want to add the Static FBML application, then click “Close”;
- 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
- Under “Applications” scroll until you see the “FBML – FBML”
- Enter in the “Box Title” field the name you want your tab to have
- Enter the CSS, HTML or FBML content in the “FBML” field;
- As of late summer 2010, you’ll no longer be able to add this to your Wall box in the left column, as Facebook is removing the boxes altogether. In your code, do not set the width any wider than 520 pixels, as this is the maximum width for “application tabs” (which Static FBML allows you to create). (View the HyperArts Fan Page example — the “HyperArts” tab);
- After you’ve added in your HTML/FBML — Click “Save Changes”
- To add addition FBML boxes, just click “Add another FBML box” link at the bottom of any of your Static FBML instances, below the “Save / Cancel” buttons. You can create a number of FBML boxes with the Static FBML application, although there seems to be a limit which you’ll know when you don’t see the “Add…” link anymore!);
Having Your FBML Appear Either in the Tabs or Left Column
Although this will be a moot point after Facebook eliminates boxes altogether, at this point you still need to edit each Static FBML instance’s “Application Settings” to add it to your top tabs.
- 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”
- Next to “Tab:” it will probably have “Available (Add)”
If it says “Added (remove)” then it’s fine and it’ll be added to your top tabs.
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, after the “Save / Cancel” buttons, locate and click “Add another FBML box”