Enhance your Facebook Fan Page with FBML
In this post, I’m going to discuss how you can use Static FBML to add functionality to your Facebook Fan Page. To successfully do this, it’s important that you have a firm understanding of CSS (Cascading Style Sheets) and HTML. If not, you can find information about CSS/HTML here:
To begin, Facebook has its own mark-up language, FBML, which is based on XML. Most don’t know the intricacies of FBML, so there’s an application called Static FBML that will allow you to create custom tabs/pages on a Facebook Fan Page. Static FBML will not work on personal profiles but only on Fan Pages.
Once Static FBML is loaded, go to your Fan Page, click "Edit" located underneath your profile picture, then scroll down to the application and click "Edit."
To get started, from your Fan Page search for “Static FBML.” Once located, visit the Static FBML page and click “Add to My Page” from the menu. After the Static FBML application is added to your profile, go to your Fan Page’s homepage and click “Edit Page,” located just below the profile picture. This will take you to a separate page with a list of settings and applications. Scroll down until you find Static FBML (the applications are listed in alphabetical order). Click on “Edit.” This will take you to the Static FBML’s settings.
As you can see, we chose to call our custom tab, "Why ZCorum?" However, you can name it anything you desire.
Start by typing in a title for your box in the “Box Title” field. As you can see, we chose to call ours “Why ZCorum?” Next, click “Save Changes” to save the box. Now comes the fun part. Again, if you do not have any knowledge of CSS or HMTL, please refer to the links above. For those of you who have knowledge of these languages, you should begin your HTML code as if you are already coding between the <body> and </body> tags. Do not worry about the <heading>, <html>, or <body> sections – they are already included in the structure of the Facebook page. Your CSS can be inline or an external link. If you choose to do the latter, you will need to store the CSS file on a web server where it can be accessed. Furthermore, if you would like to include images, video, or other files, you will need to also store them on a web server where they cab be accessed.
When I started ZCorum’s custom page I made sure that included a little planning. Trust me when I say that if you plan your custom page, then the coding will go much smoother. I have included a Photoshop file of the custom Facebook page layout, which is what I used to layout ZCorum’s custom page. Please keep in mind that the maximum width of the box is 520 pixels, so plan your CSS styles accordingly.
After planning the page, I began writing the CSS styles in Dreamweaver. However, you can use any simple text editing program, such as “Notepad” for Windows or “TextEdit” for Mac OSX. Also, putting the CSS style code in one place is a great habit to get into. Modern web practices dictate that it’s a better idea to separate the style from the code so it is easier to change one or the other later. Moreover, many web developers and designers say that it is a best practice to write your HTML code first and then write the CSS code, but I preferred in this instance to do it the other way around. You can do it however you like.
The Static FBML edit page, where you will need to put your HTML code.
I don’t want to go into the specifics of how I laid out ZCorum’s custom page, but you can find out more information about the Static FBML application and how to use it on Hyperarts.com.
Author: Ben Parlier (11 Articles)
Ben previously served as a graphic designer at ZCorum.