How to customize your Facebook page to get more “Likes”

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.
  • Comments
    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:

  • box_count
  • button_count
  • button
  • icon

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!

FBML: Comments

Adding a Comments section to your page is pretty tough, too! The code looks something like this:

<fb:comments xid=”XXXXXXXXXXXXX”></fb:comments>

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.

 

Need more actionable advice?
Get your FREE weekly marketing “to-do” list
straight to your inbox every Wednesday:
Anne Dorko helps people (whose primary job isn't to run a website) learn how to strategize and manage an effective website. You should subscribe to her Web Tips videos to stay up to date.

Comments

  1. Maybe add a link to an example result, perhaps?

  2. Rachel Williams says:

    Thanks for the post Anne! And now for the tough part, trying it out myself! :P

  3. After reading your post, I think I like the new fbml! Thanks for providing the tips.

  4. I did follow the steps but I do not see the new addition to my Facebook page. Also, should I add the “www.” before the name of my website? Thanks

    • If you’re trying to add the Share button, try this code:

      < fb:share-button class="url" href=”http://example.com” />
      (remove the space after the “<" before "fb") That should clear any issues up. When I was writing the post, I was trying to make it as simple as possible but realized that missing the “class=url” can create issues when Facebook tries to render the code. Also …make sure that you are using a full URL to the link you are trying to share! www is not required, but the http:// is!

  5. Hi Anne,

    Thank you so much have been having a lot of trouble getting ANY examples I could find about FBML to work. This article couldnt have been more timely. I am in the process of setting up a site a charity my in-laws run (petalsupport.com). And I set them up on Facebook earlier this week and have just started looking at FBML to create a fanpage to help them raise funds and communicate better with people who use them or who need their help.

    The FBML I have been really struggling with is how to get

    <fb:request-form method='post' type=”Petal Support” invite='true' content='Check out our Fan Page Petal Support on Facebook! ‘ >

    this to work it is displaying the form ok. I can select a friend and then on the last step it says sorry your request could not be processed. Please help.
    Thanks again
    Brian

    • Hey Brian –

      There’s actually an internal Facebook bug with the friend selector request form.

      I’m pretty sure that the requesting part of that code works, but it will still land you on the “Unable to process” error page.

      So, the good news is that you’re probably doing it right! The bad news is that there’s not really anything to fix until Facebook gets around to fix the bug.

      Good luck with your FBML ventures, and with the charity! Feel free to leave more comments here if you have more questions, email me ([email protected]) or via Twitter @annedorko

  6. Not sure what happened but all of the code isnt being displayed above. Any working example of the request form in FBML would do. If you dont have one handy dont worry and thanks again for the article.
    Brian

  7. Thanks Anne. I have got it all working now. The only limitation I found was that I couldnt get it to redirect me to the facebook fanpage. Instead I am going to point it to a thank you page on http://www.petalsupport.com which will have a link back to the facebook page.

    Is currently working but just pointing at the home page for the charity. I need to go to bed soon so calling it a night. Thanks for your help, it is really appreciated.

    And I will follow you on twitter.
    Brian

  8. Hey Laura,

    This is quite a unique post.. Thanks for enlightening me. I think I’d like to stick with more basic methods myself and then refer someone to this to do it for me… hehehe.. i know it’s easy and all.. I just like to focus more on personal development instead of marketing, but obviously both are quite intertwined..

    http://SteveBeisheim.com

  9. Jenn Morgan says:

    Hi Anne,

    I was able to get the button under my FBML tab, but I don’t see/understand how I can use it anywhere on the page. I’m a little confused how to use it.

    Thanks so much,

    Jenn

    • Jenn,

      These are the building blocks to building a full fledged, interactive FBML page. You can use basic HTML code to build a page around these interactive elements.

      A simple usage of something like the “Share” button would be to create a graphic (no wider than 520px) that welcomes visitors, invites them to “Like” your page and points to the “Share” button to share it with their friends.

      You can place the graphic on your page with an HTML image tag, and provide the “Share” button underneath – or if you’re feeling particularly daring, you can experiment with CSS to place your “Share” button on top of a background image.

      For example – check out the top section of this fan page: http://www.facebook.com/datadoctors

      Alternatively, you can hire someone to build an interactive page for you (for instance, my company offers such services).

      If you have more questions or want pointers or links to some HTML tutorials to get you started feel free to email me – I will try to help you find the resources you need.

      Thanks for reading my post! I hope you found my reply helpful!

      Anne

  10. Hi Anne,
    Nice post. I recently started my blog. Tried the code you put up in the post for the FBML APP and it doesn’t seem to work even after using the one pasted above in the comments section….any help?

  11. Someone told me FBML is going to be discontinued by Facebook by the end of 2010, and that iFrames is the way to go. You seem to have a great command of FBML; do you have a tutorial on iFrames?

  12. Hi Anne, nice post. I have finished static FBML page for one of the brands. Everything look and work super, except one thing. I can’t comment in fb:comments section from brand name (as admin of the fan page), just from my private account (like user).

    Maybe you have some suggestions for this issue?

    Thanks for sharing!

  13. Is there a way for a button to be added to my page and customized so that it will send a direct email to our company? I would like to have an “Ask” button for our company’s page so that users can ask us a question directly from facebook. Simply click the button and it will bring up whatever their default mail client is with our email address automatically placed in the “To” line. What’s the best way to go about creating (or finding) something like this?