An Introduction to Facebook Page Development and FBML(Facebook Markup Language)
One of the great things about my job is that I get paid to spend time on Facebook. Not only am I head of Web Design/Development, which is easy considering I’m the only guy in the department, recently I have also taking on the role of being the Social Media Manager. One of the tasks I have currently taking on is building our corporate Facebook page. I’ve managed and developed a few pages and groups before for clients when I was freelance and I have attempted to build a few apps for fun, but I’m not an expert in this area. However, I have learned a few things and I would like to share them with you.
What this post covers
- FBML – The Basics
- Adding Applications (For first time admins)
- Static FBML Widget
- Adding Your FBML Box or Tab to Your Page
- FBML Examples
- FBML Test Console
- Creating Custom Tabs
- Removing Tabs
- Facebook Page Examples
FBML – The Basics
A bit of history - First came FQL (Facebook Query Language) which evolved into the Facebook API. Then in 2007 Facebook launched their Platform in order to complement their API, which uses FBML(Facebook Markup Language), similar to HTML, it allows you to write browser interrupted code to render elements on a Facebook page or application. For example, we can embed FLV’s or SWF’s, insert images, retrieve or send data, etc., essentially creating widgets.
The only downside is that these widgets can only be used on Facebook!
Before we get into some basic code snippets, I should mention Jesse Farmer’s post An Introduction to FBML, he does a really good job of breaking down the theory, plus he has included some really good code examples to help you get started. You should also check out the Facebook Developers Wiki.
Adding Applications
The following is mostly for new admins. If you know this stuff you can skip to the juicy content below.
By default when you create a Facebook page there is a set of standard applications that come with it; Discussion Boards, Events, Links, Notes, Photos, and Video. However, we can add to this set by browsing some of the other applications that exist. These applications are similarity, but not exactly the same as the ones you would add on your personal profile. Typically we are looking at business applications like RSS Grafitti, Slideshare, flickr, YouTube Box, FlashEmbed, and most importantly Static FBML.
To add an application to your page click on “edit page” (link is under your profile pic when logged in) and at the very bottom there is a “More Applications” option. Click on the pencil icon and choose “Browse More”. This will take you the central Facebook apps page.
I recommend using the search, for example enter “Static FBML” (no quotes). Once you have found an application you want/need got to the application page and click on “add application to my page” and follow the on screen steps. Go back to you Facebook page and under “edit page” you will find your new application ready to go.
Static FBML Box (Basically a widget)
For starters you will need to install the Static FBML application mentioned above. The nice thing about this widget is you can write HTML in it. So, for example if you want to load some graphics like banners, logos, etc., you can use <img src”">. You can also link these images with <a href=”"> and so on. You cannot run JavaScript ONLY basic CSS/HTML!
Adding Your FBML Box or Tab to Your Page
- In “edit page” find the “Static FBML” link, click on the pencil icon and select “edit”
- Enter the name you want to appear in the box heading in the “Box Title” field
- Enter the HTML content in the “FBML” field
- When you’ve added in your HTML — click “Save Changes” and view your page to see the results.
Unfortunately there is no preview option.
*A few tips on dimensions – If you want your FBML box to appear in the left column of your Wall, set the width to 180px and/or if you want it to appear in the tabs in the main Wall column, set the width to 600px width or less.
FBML Examples
Here is an example of a page I am working on (not published yet).This FBML box is on the left column. All I have done is called an image and linked it to a Twitter profile using standard HTML.
Let’s take a look at some FBML. Here is some simple code to embed a swf in the Static FBML box (this is if you wanted to do something like the Apple Students page “On Campus” tab). To do this I used the fb:swf tag which allows me to render a SWF object. Notice I also load an image file, this is because an image will appear first, when the user clicks on the image, it turns into the SWF object. We can do the same thing with an FLV.
<fb:swf
swfbgcolor="ffffff"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.yourdomain.com/mymovie.swf'
imgsrc='http://www.yourdomain.com/myimage.jpg'
width=600' height='450' />
and to load an flv…
<fb:flv
src='http://www.mediacollege.com/video-gallery/testclips/barsandtone.flv'
width='400' height='300' title='my movie' color='#FFBB00' salign='r'
img='http://www.example.com/test.jpg' scale='showall'/>
and just for fun, here is how you load an mp3
<fb:mp3 src="http://host.com/file.mp3" title="Song Name" artist="Song Artist" album="Album Name"/>
The FBML Test Console
Now that we have covered some of the basics let’s take a look at the Facebook Developer Tools. You may not be aware that Facebook offers a bunch of free online developer tools to help you learn, test, and eventually deploy your apps. For this example I will go through some basic FBML embedded in HTML.
Using the FBML Test Console we can input our code and get a Facebook Box preview. The FBML Test Console will also output the HTML source if you need to embed it elsewhere.
How it all works
- Log into to Facebook
- Got to Facebook Developer Tools
- Click on the FBML Test Console Tab
- You will notice that the tool will automatically retrieve your user ID and API Key
- Input code in the left box
- Click on “Preview”
*Notice the Position dropdown menu, here you can choose from standard Facebook layouts like feed body, request form, etc.
In this example I am using some test code I found online(can’t remember where), to retrieve user profile pic and name. I create a basic HTML table and embed the fb:profile-pic and fb:name tag in adjacent cells. For the fb:name tag I use 3 attributes, useyou=false, uid=(whatever user ID you want to retrieve), and firstnameonly=true(in the last cell I change it to false). For the fb:profile-pic I use 1 attribute uid=(whatever user ID you want to retrieve).
Here is the code I inputted (remember to change the uid=xxxxxx to an actual user Id)
<table cellpadding=0 cellspacing=0><tr><td>
<table cellpadding=0 cellspacing=0>
<tr><td>
<fb:profile-pic uid=xxxxxx></fb:profile-pic> </td></tr>
<tr><td>
<fb:name useyou=false uid=xxxxxx firstnameonly=true></fb:name>
</td></tr></table>
</td><td>
<table cellpadding=0 cellspacing=0><tr><td>
<fb:profile-pic uid=xxxxxx></fb:profile-pic> </td></tr>
<tr><td>
<fb:name useyou=false uid=xxxxxx firstnameonly=true></fb:name>
</td></tr></table>
</td><td>
<table cellpadding=0 cellspacing=0><tr><td>
<fb:profile-pic uid=xxxxxx></fb:profile-pic> </td></tr>
<tr><td>
<fb:name useyou=false uid=xxxxxx firstnameonly=true></fb:name>
</td></tr></table>
</td></tr></table>
This is what it outputs
Once you have a basic understanding of FBML you will find this tool very useful for testing code and playing around. You may also want to check out this great post at devtacular on How to Style an Application Like Facebook this post includes a complete Facebook Component Stylesheet!
Creating Custom Tabs
It is important to create custom tabs that represent your page/brand beyond the basic Wall, Info, Photos, Events, etc. Most successful pages use custom tabs to sell their products or services, watch demos and presentations, enter contests and so on. A good example is the Apple Students Page, they have a tab called On Campus which launches a really slick Flash app with videos, a google map mashup, and some ads.
The other bonus of custom tabs is the ability to set it as the default landing page. In your page settings you can choose which tab is set as the default, most people just use the Wall. A good example is the Nokia Page, which defaults to Nokia Twist-USA.
How do I create a custom tab? Easy! First you need to make sure you have added the FBML Application to your page. Without it you can’t create any custom widgets to display as tabs(you can also use these steps to add any of the default applications as a tab).
Click on “edit page” (link is under your profile pic when logged in) and under Applications click on the pencil icon on the top right corner of the application you want to add as a tab.
Click on “Applications Settings”.
You will be giving 2 options, add/remove from Boxes and add/remove from Tab. Click “add”. Now go back to your page and refresh and you new tab should be there.
Removing Tabs
Removing tabs take only a few seconds.
Click on any of your tabs. When that page loads you will notice the tab is white and a pencil icon appears next to the tab name. Click on the pencil icon.
Click on “Delete Tab”. Told you it was easy!
The only tabs you cannot delete are Wall and Info.
*A quick tip about the Boxes tab – You can remove the boxes but not in the same way as others. To remove the boxes tab first you need to click on Boxes. When the page loads remove each box that is under this tab (the same steps as above). Once there are no boxes left under the Boxes tab go back to your wall. The Boxes tab should be gone, if not refresh a few times. Essentially this tab only exists if there is something in it!
Here’s a list of some really nice examples
http://www.facebook.com/officelive
http://www.facebook.com/applestudents
http://www.facebook.com/livescribe
http://www.facebook.com/nokia
http://www.facebook.com/Starbucks
http://www.facebook.com/adidasoriginals
http://www.facebook.com/Paramount
Pingback: Brendan Sera-Shriar – A Lifestream» Daily Digest for October 27th
Pingback: An Introduction to Facebook Page Development and FBML(Facebook … « Blogging
Great tutorial. But no matter what settings I try, I cannot get my new FBML tab (or any other tab BTW) to be the landing page
Suggestions ?
Kevin,
I stumbled across this today and wondered if you had figured it out yet.
If not, go to Wall Settings, Edit, here you can set the Wall to be the default for all folks that are already fans, and you can also set whichever tab you want to be the landing page for all non-fans.
Hope that helps! Let me know if it works for you.
Jackie
Hi Jackie,
My options when I go into Edit>Wall are “Default Landing Tab for Everyone Else” — Are you suggesting that this be changed to “Wall?”
What I’m trying to do is something similar to http://www.facebook.com/walgreens
The non-fans go to a custom-tab. Once they become fans, the default page becomes the Wall. Afterward, each login to the page, whether it be a search or typing in the URL it will direct the fans to the default page (Wall). Non-fans will always go to that custom-tab.
I can’t figure out how to change these settings:
Non-fans >> Custom Tab (default)
Fans >> Wall (default)
Any insight? Anyone?
Thanks,
Jason
Your article is very informative for a beginner like me. Our organization just started Facebook last month. We find it good for our members. Would there be a chance you can help us develop our Facebook Page? We are non profit and supported by members. At the moment we cannot afford to hire Facebook developers, and I am the only one incharge of the communications. You can visit our website to know us. If it is possible to help us pro bono, you can contact me by email. Looking forward to your reply.
For the poor artisans,
Michael Sarcauga
Pingback: Weekly links (weekly) | Frontiering Talk
Great Article…
I am having a weird issue. I have done all the things that you have mentioned but when i load the new tab I do not see my application but I do see it in the boxes tab…I have tried everything…has to be something simple…
Any Insight would be appreciated:
here is the page: http://www.facebook.com/pages/Visual-Jelly/127619247743?v=box_3
Thanks
,matt
I’ve added a video tutorial for people who are having trouble installing FBML. You may want to check out the video here: http://www.learntowebdesign.com/2009/11/install-fbml-on-a-facebook-page/
Rebekah Owens
Rebekah, Your info is VERY helpful. Something that has helped me sometimes is the ability to see the source code of a web page. Is there a way to see the source code of some of the FB Fan pages I’ve seen?
I have added a box to my fb page woth FBML and it does not have a pencil option for me to move it to my wall. Any suggestions?
@Brigitte That’s strange! Go to edit page, and there should be an Application Settings option under your FBML box. For box option choose remove. It should then appear on your sidebar.
Where exactly do you want the FBML to be?
I have the same problem! I was able to add the code, but I can’t move it to the Wall. It says as a box under the Boxes tab.
Hi all-
I’m doing some basic HTML/CSS work with Static fbml and running into an issue with IE8. Other browsers seem to recognize and just fine, but for some reason IE is only allowing me to use inline css. This removes the ability for me to add hover states to any buttons, among other things…
Any thoughts on why IE doesn’t like the ? Also I read that Static fbml should be able to take tags but whenever I use it my page disappears.
Thanks guys…
Was wondering how one could fetch the visitors name. What I need to do is to welcome a user when he/she visits my page
http://www.facebook.com/webwhispers?v=app_6009294086
Check out some interesting stuff done here
Pingback: Bookmarks for January 19th through January 23rd | Buddy's Blog
Hi there
Fab tutorial. Do you know of any fbml editors out there? I want to make a welcome landing page but can’t find one though I can find plenty of html editors.
Many thanks
Fran
Well, if you just want to make a landing page I would recommend installing the static FBML Editor app to your page. You can then put HTML in window and load whatever you want! However, if you want to take advantage of the API then you need to code in FBML.
In terms of an external FBML editor, as far as I know none exist, developers use there own editors…
Hope that helps…
Thank you for this great intro – I’ve already put the info to use.
One question, is there any way to add the Static FBML app to my Facebook Profile (not a Fan Page)?
I’m putting together tools to build an affiliate network and would like to give my affiliates code to place a banner add/link on their Facebook Profiles.
Much appreciated!
Lisa
unfortunately no! But you can provide a Facebook Page Badge http://www.facebook.com/apps/application.php?id=12767171645
Bummer…
Hi Brendan,
I’m hoping you can give me a clue here. At the http://www.facebook.com/EagleProject page, you can view photos that have been uploaded, even if you are not logged on to FaceBook (or even if you do not have an account with Facebook). But on the tabs (e.g. Operation Rose Arbor), there are supposed to be pictures displayed. They have been brought in with the tag. Example:
But these pictures will only show up on the FBML application tabs if you are logged on to a FB account. I don’t think you have to be a fan of the page to see them, you just have to be logged on.
This is counter intuitive in that if you are a business trying to attract attention, you want all the hard work in these fan pages to display whether the viewer is logged in to FB or not.
Am I doing something wrong, or is this a bug, or is this the way it is supposed to work. I would understand if I had set some privacy settings somewhere to lock it down, but I can’t find anything else to open it up.
Please help if you can. Sincerely,
Gary P. Smith
Hi All,
I am unable to embed a swf file which is embedded in http://www.jaypeehotels.com/junenewsletter.html into my Jaypee Hotels FB page…
I did try adding FBML, but in vain.
Pls Help!
Thanks in Advance
Mona
Hey Mona, you need add the FBL Static app. Then use this code:
*note you need the src links to where the swf is upload, and you need to make a place image to be displayed before the swf plays.
Hi Brendan,
I tried adding the fb:flv to my FBML Welcome tab, but the video isn’t loading. What’s up with the code?
<fb:flv src="/>
Hey Nina, well, i know there are some issues playing flv’s on certain version of ie, also Facebook only supports Flash 9 (specifically 9.0.159.0 ) due to security, and Flash 10 is not always supported.
I have heard others recently having similar issues. Maybe someone else has some insight I am unaware of?
Love this page. I discovered it accidently. I work for a non-profit so I am doing the designing. Had no problems creating the tabs. Now how do I create a 3 column layout? Please refer to LifeChurch’s “Helpful Link”. I am trying to to do the same but with local links that parents and clients use most often. Any help would be appreciated.
I really want to try and recreate this layout for welcome pages via FBML.
Specifically the form to invite friends. Can you give me some pointers?
Thanks,
Jenn