7 FBML examples to rock your Facebook fan page.

March 22, 2010
Facebook Twitter Pinterest Plusone

Facebook markup language or FBML for short is used in a variety of places within the social network. Anyone who has written any Facebook applications will already be pretty familiar with its tags, and will probably have used it to write data to walls, or share postings with others programmatically. If however you haven’t yet dipped your toe in the water of the Facebook API, or indeed haven’t actually needed to – there are some snippets of FBML which prove to be mighty useful when creating custom Facebook Fan Pages, and can easily and quickly out of the box be used with the FBML widget, which adds an extra much needed layer of customisation to an existing Facebook fan page. The static FBML widget can be added multiple times, and in multiple places (sidebar and tabs) to facilitate this. Once you’ve added it to your page, simply go to “edit page”, then under Applications click “edit” under Static FBML. This will give you the options you need to paste in your code.

Adding your newsletter

If your blog or website offers subscription via email, an additional place to find subscribers is within the Facebook network. Fans that stumble upon your page, or are invited by others may want to add themselves to your subscriber list directly from you page, without visiting your site. Using the code that your newsletter provider gave you, you can easily create a newsletter tab with a subscribe box. Whilst this isn’t strictly FBML (its just HTML) – its an easy way to increase your reach and exposure on the cheap. FBML needed. Something similar to below. This is what I’m using folks.

	<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WebDesignInIrelandBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
	<p>Enter your email address:</p>
	<p><input type="text" style="width:140px" name="email"/></p>
	<input type="hidden" value="WebDesignInIrelandBlog" name="uri"/>
	<input type="hidden" name="loc" value="en_US"/>
	<input type="submit" value="Subscribe" /> </form>

Include Sharing With Friends

One of the main benefits of being on the Facebook platform is the ability for viral sharing to take place amongst participants in the network. To encourage your business page to be shared with others you can implement a Facebook “multi-select” box, all within the static FBML box. This will loop through the current users friend list, allowing them to select who they want to share the fan-page with when they click send. You might want to put this under a “Spread the word” type tab to increase your reach.

Update. Some people have reported problems with this code. From what I can remember, it worked previously – so unless FB have changed things. Anyway – I’m using the below successfully now. Don’t for god’s sake copy and paste, examine the code, and type it exactly. WordPress makes a mess of single quotes which won’t work inside Facebook. I will get around at some stage to ammending this, but for now take care and try and understand what you are using. If all else fails, consult the Facebook documentation, or leave a comment here, which I’m more likely to respond to. I’ll not be replying to personal emails asking for help.

<fb:request-form method="POST" type="Webdistortion" invite="true" action="http://www.facebook.com/multi_friend_selector.php" content="Become a fan of Webdistortion!<fb:req-choice url='http://www.facebook.com/webdistortion' ' label='GO' /> ">
<div style="padding-bottom: 10px;">
<fb:multi-friend-selector condensed="true" style="width:80%;" /&gt
</div>
<fb:request-form-submit />
</fb:request-form>

FBML needed

	<fb:request-form method="post"
	type="Your Fan Page Name Here."
	invite="true"
	content="Check out Your Fan Page Name Here on Facebook!<fb:req-choice url='YOUR FAN PAGE URL here' ' label='GO' /> "&gt
	<fb:multi-friend-selector actiontext="Tell your friends about us rows="3" showborder="true" /> </fb:request-form>

Include Multimedia

Multimedia objects such as flash, video and images can also be easily added to Fan Pages. If for example you wanted some flash video, or embedding of a flash game, the FB:swf, and FB:flv are perfect candidates. More details on the format of the API request available here for FLV and here for SWF. FBML needed (Flash object).

	 <fb:swf swfbgcolor="ffffff"  swfsrc='http://www.yoursite.com/flash.swf' width='380' height='250' />

(FLV video)

	 <fb:flv src='http://www.yoursite.com/video-gallery/video.flv' />

(Image)

	 <fb:photo pid="12345" />
	<img src="http://www.yoursite.com/image.jpg" />

Monitor your pages with Google Analytics

A great social media campaign should focus on measurement over reach. One of the easiest ways to take a look at the data provided via a Facebook page is via Google Analytics. Thankfully, inclusion on an existing static FBML page is particularly easy. Here’s the code you need. Obviously, just replace the uacct with your own account ID to start collecting data about your page. FBML needed

	<fb:google-analytics uacct="UA-9999999-99" />

Randomise your messages

You can easily add random messages to your Facebook page. You may for example, want to experiment with multiple calls to action – or offer multiple promotions to your audience. The Facebook Random tag lets you achieve that, without any programming. Here’s how: FBML needed

	<fb:random>
	<fb:random-option weight="2">A: This will be shown 2 times as often as B.</fb:random-option>
	<fb:random-option weight="1">B: This will be show half as often as A</fb:random-option>
	</fb:random>

Add profile image

Your profile image is the thumbnail found at the top left of your page. To include it again anywhere on your Facebook Static FBML page, try using this example. A number of size parameters can be set with the tag, so if this size isn’t your thing, you can easily adjust it. Replace the UID parameter with your own userId.

	<fb:profile-pic uid="12345" size="normal" width="400" />

Add wall sharing capabilities

Sharing of individual bits of data or URL’s on Facebook is pretty integral to success. One easy way to do this on a Static FBML app is via the share-button. This allows you to share both data and links into a users wall / stream. FBML needed

	<fb:share-button class="url" href="http://www.yoursite.com" >

Or to include more specific meta data. FBML needed

	<fb:share_button>
	<meta name="medium" content="news"/>
	<meta name="title" content="Announcing the xxx Application"/>
	<meta name="description" content=""/>
	<link rel="target_url" href="http://apps.facebook.com/xxx"/>
	</fb:share_button>

Overview

Hopefully some of these  FBML examples should help get your Facebook page off the ground, with some additional functionality  for minimal effort. Combining some of the tags that Facebook provide out of the box, with a little creativity can really boost your social media marketing efforts without the need for calling on a programmer.

If you have an out of the box requirement for a Facebook landing page, I’ve also started to create Facebook templates. – if there’s nothing there to suit you, feel free to drop a comment and I may put something together to suit.

A follow up post of mine discusses how you can take this concept further, and fully integrate WordPress with Facebook

Filed in: Social Media
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (68)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Common strategies and features of successful blogs | April 11, 2010
  2. Facebook Tips and Tricks « Sue Anne Reed's Blog | April 26, 2010
  3. Optimize Your Facebook Page with FBML | Interactive branding, marketing and advertising blog | April 26, 2010
  4. Optimize Your Facebook Page with FBML « The Beat-Play Experiment | April 26, 2010
  5. Adding Static FBML to a Facebook Page | Facebook News, Tips, and Tricks - FacebookFlow | May 10, 2010
  6. Dan Griffin’s Blog » FBML for biz pages | May 21, 2010
  7. Customize Your Facebook Fan Page: Tips, Tricks, Applications | June 28, 2010
  8. Customize Your Facebook Fan Page: Tips, Tricks, Applications » abdie.web.id | June 28, 2010
  9. Customize Your Facebook Fan Page: Tips, Tricks, Applications – Design Today | June 29, 2010
  10. Gunner Technology | June 29, 2010
  11. HollyPlays.com: When she isn't working | June 30, 2010
  12. Customize Your Facebook Fan Page: Tips, Tricks, Applications | My Free Design Area - A Webpage for Joomla Free & Commercial Templates, Wordpress Free & Commerciak Themes, and Drupla Free and Commercial templates, Flash Templates and animation, Htm | June 30, 2010
  13. How do they do that? « No Time To Market | July 8, 2010
  14. Social Marketing « steve is my hero | July 17, 2010
  15. links for 2010-07-23 | teulliac | July 24, 2010
  16. How to Pimp Your Facebook Fan Page (Using FBML) « ANTOINE REID – OFFICIAL BLOG | August 22, 2010
  17. 10 éléments à intégrer dans des onglets FBML de votre Fan-Page Facebook | | September 6, 2010
  18. benjamin junior » Blog Archive » Bookmarks em September 7th | September 7, 2010
  19. This is why social media rocks. – DigiPixlet | October 14, 2010
  20. 7 FBML Examples that Rock! | October 27, 2010
  21. Kontest – Création de Jeux Concours sur Facebook, Web et Mobile | Comment augmenter ses fans sur Facebook ? | October 27, 2010
  22. Learn FBML and how to create a Facebook fan page | Shocking Real-Life Continuing Ed with Hollis Gillespie | November 8, 2010
  23. Facebook FBML – Day 54 | November 14, 2010
  24. 7 FBML examples to rock your Facebook fan page. « Josephbryanmedia's Blog | November 26, 2010
  25. Facebook Fan Page Customization: Tips, Tricks, Applications - tripwire magazine | December 19, 2010
  26. 7 FBML examples to rock your Facebook fan page. « Redaction Web | January 12, 2011
  27. Social Media Marketing para hoteles Argentina | Hotel Marketing Argentina | February 3, 2011
  28. Facebook Fan Page Customization: Tips, Tricks, Applications | April 12, 2011
  1. Dave says:

    Thanks, great article. And great site.

  2. Thanks,
    This is great information. I have noticed a lot of fan pages that are not utilizing the FBML app. Another tip is to set your FBML page as the default for non fans.

  3. Gen says:

    Thanks for the great info.

    I tried your “Include sharing with friends” FBML code and it doesn’t work. Does anything else have to be added to the code?

    I found code on another site that I cut and paste, but when I send invite, it says” xyz sent an invitation using Static FBML 4″. Is there a way to change the last part?

    Appreciate your help.

  4. wmgeek says:

    Great! Benefit a lot from these tutorial. Thanks for sharing :)

  5. great…thanks a lot….i need invitation code to my fans pages..here my fans pages:
    FaceeeeeeeeeeBoooook Blog>>>>http://www.facebook.com/pages/Jakarta-Indonesia/FaceeeeeeeeeeBoooook-Blog/380660545049?v=app_10339498918

  6. DI says:

    This is really useful, thanks.

    @Gen — Make sure you change the smart quotes to straight quotes. I got it to work here: http://www.facebook.com/CommonCause?v=app_7146470109. Good luck!

  7. Quentin says:

    Thanks but how can we install a widget to the sidebar ?

  8. Paul Anthony says:

    @Quentin – what widget?

  9. Emma says:

    I looked at the FB Wiki for more details on “Sharing with Friends” markup as I thought this was a great idea. However, FB look to be deprecating this whole method as they insist on everything happening by e-mail instead of notifications. Are there any viable coding alternatives? Or should I just skip this for now?

  10. Vickie says:

    Thank you very much! You’re a life saver!!! :)

  11. Dave says:

    Thanks for the help, but your examples are littered with errors (see sharing with friends), you use the wrong single and double quotes, and your copying your code blocks leaves me with a bunch of line numbers. Double check everything and update them, you’ve obviously got good search engine results, and it’ll make the job easier for the next guy who comes along.

  12. Paul Anthony says:

    Hi Dave,

    Thanks for the feedback – I’ll modify the post to make copy pasting a bit easier – WordPress has as you’ve pointed out messed with the underlying code.

    Paul.

  13. iceman says:

    Hi,

    Do you have any idea on how to add twitter feeds in fbml?

  14. iceman says:

    Please…..

  15. Nikunj says:

    This article was very helpful learn more about FBML. It was simple to understand as well.

    Thanks for Sharing

  16. brian says:

    I am looking for a way to build a Twitter Feed into static FBML tabs – is this possible?

  17. It sends the invitation allright, but the user who receives the invitation gets only the option to Ignore the request. :(

    Plz plz plz help :(

  18. Thanks a lot for the tips!

  19. enricksspaikers says:

    FBML is just the best way to adapt the Facebook pages are much more flexible than the third-party applications and third. it is free. remember to assume that the maximum width must be FBML, who said about social media Success Summit, the evolution of 760-540 soon.
    micro sd card

  20. Baran says:

    Thanks good work ;)

  21. Sylvio says:

    If that works it’ll be great.

    No help with this blog….

  22. Thanks a ton! Brilliant post..

  23. Rob says:

    Some nice tips, and I’m considering the newsletter feature as part of my webcomic.

  24. Morley says:

    Just so you know, fb:google-analytics doesn’t work on Facebook tabs. Tabs explicitly can’t collect user view information, and the tag doesn’t cause any GA code to be rendered.

  25. Tekno says:

    Thanks for article. I’ll try it explained.

  26. It is really nice help.ill try asap.

    Thanks
    Divyesh

  27. Paul J says:

    Great, always love a site that posts examples :)

  28. Lisa says:

    Can’t for my life get that “invite friends” code to work – will somebody please help me out a bit?
    I’ve tried everything about that code I think, but still doesn’t work.

    Frustrating to read others get it work.

  29. Question: I have my blog on wordpress and have my facebook fan page,how do i get my wordpress codes for this aplication or were do i find them on my wordpress?

  30. Paul Anthony says:

    ‘WordPress codes?’ Sorry – could you just explain what it is you are trying to achieve? FBML and WordPress are two different technologies. If you are trying to link the two together, then that’s just a link. If you are trying to show your page users, that’s a widget. Try Googling ‘Facebook widgets’ and paste some of those into your sidebar. If I’ve misunderstood your query, let me know here.

    Paul.

  31. cherrys says:

    I have successfully made a fan page however it when i send the invitation, facebook redirects me to a page where this show up :
    Sorry, your request could not be processed.
    Please try again.

    Please help:(

    Thanks

  32. Eric says:

    Thanks for you helpful hints!

    Regarding your “Sharing with Friends FBML” if the friends frame will automatically readjust itself down to the new 520px size that Facebook is requiring?

    Thanks in advance
    Eric

  33. Tam Phan says:

    Dear all,

    This is a helpful article but i still have a issue with FBML below,
    I have this code for FBMLto subscribe an email:

    Subscriber your email here:

    but I want to postback and show new layout like “Successful” instead of redirect page to http://www.testdomain.com/MailingList_Subscribe.asp
    Do you have any FBML code for reference?

    Thanks in advance!

    Tam Phan
    vantamvtf@yahoo.com

  34. Tam Phan says:

    Dear all,

    This is a helpful article but i still have a issue with FBML below,
    I have this code for FBMLto subscribe an email:
    [p]
    Subscriber your email here:
    [/p]
    [form action="http://www.testdomain.com/MailingList_Subscribe.asp" target="_blank"]
    [input type="text" name="txtName"]
    [br/]
    [input type="text" name="txtEmail"]
    [br/]
    [input type="submit" name="btnSubmit" value="Submit"]
    [/form]

    but I want to postback and show new layout like “Successful” instead of redirect page to http://www.testdomain.com/MailingList_Subscribe.asp
    Do you have any FBML code for reference?

    Thanks in advance!

    Tam Phan
    vantamvtf@yahoo.com

    P/S: text comment not allow some HTML character

  35. Zak says:

    There’s something to be said for perseverance. You definitely pointed me in the right direction on this, but after much searching, I finally found code that would allow me to share my fan page with their friends. Here it is for anyone that needs it.

    “>

    Hope this helps. I found it on this thread: http://www.facebook.com/topic.php?uid=4949752878&topic=7166

  36. A very useful resource, thanks. However I could do with either some working examples or some screen grabs.

    Keep up the good work.

  37. Talha says:

    hi i want to put random profile names who visited the page it shud show his/her profile name can u please tell me hw to do this?

  38. Thanks for the tips … I’ve updated my facebook fan page :)

Back to Top