Late last year we developed a mini site for the Ireckon Facebook fan page (go on become a fan, you know you want to), this is the first time I have worked with FBML, and while at first to looks quite daunting, it really wasn't, it basically accepts a lot of normal HTML and CSS, but also has cool FBML snippets and widgets that you can use (for example the comment form on the profile pages, uses the Facebook integrated comment functions).
So after I did a bit of testing with a test app that I had setup, I went to work on the Ireckon APP. First of all you need to setup the app on Facebook (check out http://www.facebook.com/developers/ for more info on how to do that). Once setup you will find a lot of options in the Settings section, there are a few here that everyone should note down and there are also some I changed.
First make sure you note down your Application ID, you will need this later.
I then updated the settings by:
- Adding a Logo and Icon,
- Updating the Email Addresses
- Changing the Authentication settings to 'Facebook Pages' as that is what we were using the APP for.
Then there were the main settings that needed to be changed for our APP to work like we wanted it to (note: all these setting depend on the app, so these may differ).
On the Canvas Tab I:
- Added in the APP URL that I was after
- Added in the callback URL, which is where the app is hosted
- Change the Render Method to FBML and the Canvas Width to Full width
The only other thing was on the Advanced Tab, I changed it to 'Sandbox Mode' while it was in development, which only enables admins to view the page (probably a good thing to do, while you are testing).
So I had the APP setup, I then needed to start on the mini site. There are many ways to do this, but as we develop in PHP I started the normal way and setup a series of includes, etc. One thing I did do different was set the CSS file as a PHP file instead of .css (this was so we could write PHP directly to this file as there are a few things that change when it goes live). The other major thing was to setup a variables file with the Facebook and Site URLs in them, as links and images need to be referenced absolutely (well they could be relative, but as I was using includes, it was easier to do it absolutely), and I didn't want a bunch of absolute URLs through my code. I used a variables file then referenced the value each time I wanted to call the URL.
Example:
src="< ? = SITE_URL ? >/images/global/title-contact.gif"
This means that when the site URL or Facebook URL changed when it went live, all I had to do is change one reference.
Now this is getting too much into general development, I guess we should talk more about what we did to get it to work with Facebook.
That being said there isn't a whole lot more.
To make it standard FBML code we had to call the version around all of our code so we added in the following tag at the top of our document.
< fb:fbml version="1.1">
and then close that at the end:
< /fb:fbml>
Note: you don't need to use html, head, body tags at all, as these pages are included into Facebook's framework already, so the use of any of these is going to render invalid HTML.
Now the final trick is to realise that Facebook adds your application ID in front of all your ID's so for example,
This:
#header { position:relative; height:150px; }
Would turn into this:
#132452154_header { position:relative; height:150px; }
Note: Replace 132452154 with your app ID, this is just a number I made up 
Well that's about it for setting up the framework, while you will still probably do a lot of other changes, these are just the major points I followed when setting this Facebook APP up.
Check out these docs for more information on getting started:
- http://www.facebook.com/developers/
- http://developers.facebook.com/get_started.php
- http://developers.facebook.com/tools.php
- http://wiki.developers.facebook.com/index.php/Main_Page
So once you have your framework built and the general site made and the markup done (I won't go into any of the markup, as it's pretty much just a HTML / CSS with a touch of PHP, but you can do it in whatever you want…)
The next step is to add some Facebook functionality where applicable. I found this WIKI page quite helpful! http://wiki.developers.facebook.com/index.php/FBML
I used:
- The Share button: http://wiki.developers.facebook.com/index.php/Fb:share-button
- And the Comments Function: http://wiki.developers.facebook.com/index.php/Fb:comments_(FBML)
However there is a lot more you can use, try them out and see if they are useful to you!
That's about it, all you need is an idea, someone that can do the work (yes, don't worry we can) and a need to do it. Here are some ideas for Facebook FBML custom Facebook pages.
- Profile a New Product or Offering,
- A Competition (however, note Facebook are bringing in some regulations regarding competitions),
- Product Catalogue or even an Online Shopping App,
- A Game (of course we have all seen these) and,
- A Mini Site (as we have done).
Basically what you can do is only limited by what you want to do… But don't forget some of the most important steps you can take in creating a successful Facebook Fan page is to post regular updates, interact with users, and create a unique experience.
About Erin
