There’s a big new way to make your brand more effective online, and everybody is talking about it: Facebook Pages. That’s great! Now what? Well, that’s the problem – you’ve been told to get one and what your strategies should be, but no one told you how to go about actually making your page all that it can be.
That’s all about to change. Here we will go over the “What” of adding interactivity to your Facebook Page, and give 2 detailed examples of the “How” that you can use right now.
Facebook + HTML = FBML
The Facebook Markup Language (abbreviated as FBML) is the language that Facebook created to allow users to add custom tabs with functionality onto their Facebook Pages. FBML allows you to include HTML and CSS, so you can essentially create mini-websites – also known as “microsites” – right on your Facebook Page!
Why is this important? FBML gives you the opportunity to use a bunch of great interactive features, customized to match your branding!
The Power of FBML
FBML allows you to do add a lot of native Facebook functionality such as:
- Share button
You can add the “Share” button anywhere on your Facebook page, which allows users to post anything you designate on their wall.
You can add as many comment boxes as you want, it can be one generic comment box for the page, or create comment boxes for multiple items that you have on your page (example: an e-commerce page might have a list of items, each of which could have their own commenting section).
(you can see an example of this on our facebook page under “FBML Examples” tab. Click here)
A few other powerful tools it provides is the ability to:
- Embed video
You can embed generic video sources such as YouTube or Vimeo, or you can directly include a video that you have uploaded to Facebook!
- Embed Flash widgets
This is an amazing ability, as there are so many useful flash widgets that you can take advantage of – a Flickr slideshow, for instance!
- MP3 Players
This allows you to let your visitors play MP3s right on your Facebook page! This functionality is great for anyone with sound clips to share.
Enabling FBML For Your Page
The following will assume that you have already created a Facebook Page, or have been made administrator of the Facebook Page you are working on.
Facebook has provided an app called Static FBML, which is the portal through which you use FBML for your page. You can add the app by clicking on the “Add to my Page” link underneath the picture on the Static FBML Facebook page.
A pop-up box will appear, asking you to designate which Facebook Page you are an administrator of that you would like to add the app to. Click the “Add to Page” button next to the correct Facebook Page.
Now, visit your Page Manager. Under the page title, click the “Edit Page” link. You will see the basic administrative options at the top of your editing page – scroll down to the Applications section until you see the FBML 1 box, and click “Edit”.
Take a deep breath, and make yourself a drink (you earned it). This is where the magic happens.
Adding FBML To Your Page
I’m going to walk through 2 examples of how to use FBML here: the Share button, and the Comments section.
FBML: Share Button
This is going to be complicated, so hold on tight. Ready?
<fb:share-button href=”http://example.com” />
That’s it! If you copy and paste that code into the text box of the FBML app, all you have to do is modify where it says “http://example.com” to your domain, Facebook page, or whatever URL you would like to share. You can change the way it’s displayed by using the following:
<fb:share-button href=”http://example.com” type=”icon_link” />
By adding the “type” section to our code, we can define what the Share button will look like when it shows up on the page. You can change icon_link to any of the following:
If you hit save, open your Facebook page up and click on the FBML tab, you can see the new Share button you just created!
Adding a Comments section to your page is pretty tough, too! The code looks something like this:
You will need to replace the X’s with a unique string of characters so that Facebook knows that it’s just for you and won’t show comments from other people using the same FBML tag.
Here are a few customized versions of the comments you can play around with.
Immediately shows the commenting box, instead of the “Click to comment” link:
<fb:comments xid=”XXXXXXXXXXXXX” showform=”true”></fb:comments>
Immediately shows the commenting box, and removes the outer white box from the commenting section to enable better custom styles:
<fb:comments xid=”XXXXXXXXXXXXX” simple=”true” showform=”true”></fb:comments>
Again, by copying and pasting that code to your FBML text editor (don’t forget to use a unique ID instead of the X’s!) you can click “Save” to see your beautiful new commenting section.
Pat yourself on the back
Congratulations! You just started building your very own Facebook page. You can learn more on the Facebook Developer site if you’re interested in finding out the nitty-gritty details of customizing your Facebook page.