How to Add Static FBML to your Page - Tutorial
One of the ways to customize your Facebook Page is through the use of Static FBML. Another way is to create a Facebook Application that can be added to Pages. This post will examine the former method which is simpler (albeit less powerful) than the latter.
The first step is to add the ‘Static FBML Application’ to your Page. You can do this by Googling ‘Static FBML Application’ or searching via Facebook Search. Here is a link to the Application.
Underneath the profile photo, click ‘Add to my Page’. A dropdown with a list of your Pages will appear. Add FBML to all relevant Pages. You must be logged into Facebook and have the Facebook Page already created to see this link.
Facebook Static FBML Add to my Page
Navigate to the Facebook Page to which you added Static FBML. Underneath the profile photo of your Page you will see a link to ‘Edit Page’. Again you must be logged into Facebook to see this and have editing permissions on the Facebook Page.
Among the options for your Page there will be an FBML section. Click ‘Edit’.
How to edit FBML
An FBML dialog box will pop up where you can enter HTML code (and some FBML commands) to your Facebook Page. Note that very few FBML commands work on the canvas sections of Pages, you will want to try them out individually to see which work.
Where to Add FBML
Once you are happy with the HTML/FBML that you’ve added to your Page, click ‘Save Changes’ and check out what your Page looks like. Modify until finished.
You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
Great post here.
When developing a Static FBML application tab, everyone should be aware that Facebook is going to reduce the available screen real estate from 760px to 520px in “early 2010.” So I think it’d be good practice to design new application tabs at the 520px width rather than at the 760px width, because all those 760px application tabs are going to break (although how — horizontal scrollbars? horrible wrapping? we don’t know - Facebook says they’re going to give 2 weeks notice.
A nice technique to ensure that Facebook refreshes its cache when you make changes to your style sheet and want to see them immediately. Just add: ?v=10.1
after the .css in the stylesheet call. Each time you make a change to the stylesheet, regenerate your FBML tab, incrementing the number by 1 (or whatever, as long as it’s a different number). So the URL of the stylesheet is: “http: / / domain.com / mystylesheet.css?v=11.0″
I have posted a detailed tutorial on Static FBML on our blog which your readers might find helpful. There are lots of questions and answers in the comments.
Onward!