We asked our fans to share links to their favorite FBML examples, and here are a few that we liked and wanted to share. I am going to highlight the "best practices" of Fan page development (BP) that are demonstrated by each example, and also my suggestions for improvements (TRY THIS).
See You There Invitations
(shared by Judene McCalla)
- Best Practice: This simple landing page tab welcomes users to the business page and describes the company and its services/products.
- TRY THIS: Your landing page should explain what your purpose is here on Facebook, and encourage people to become a fan by offering some information or community service or even a product of value. Tell us, what is this Facebook Page all about? What value are you offering to your fans?
- BP: A second tab serves as a mailing list sign-up, a great way to add subscribers to your email newsletter list.
- TRY THIS: Keep it simple and combine these two tabs into one. You can add your mailing list email-form to the welcome tab and make it easy for new visitors to get all of the information in one place.
- BP: A share button allows people to spread your content to their friends and network with a simple click.
- TRY THIS: When linking to your website and other social media sites, make sure that these links are prominent. Use social icons and your company logo to catch the user's attention visually (rather than simple text links).

Learn how to add a Share button to your page with FBML here

Crane Coffee
(shared by Jon Arrington)
- Best Practice: Using multi-page navigation within your landing page (application tab set as default tab for new visitors) is a great way to share an entire website of information without forcing the user to leave your Facebook page, or even the first tab.
- TRY THIS: Make sure that your code is loading properly before adding the tab to visible main navigation on your page (notice how in this image above the text doesn't all fit in the box at the bottom?)
- BP: Use all of the space you have to create an eye-catching and visually pleasing design that distinguishes your custom tab from the rest of Facebook.
- TRY THIS: You should be designing and developing your FBML pages for the upcoming Facebook change to a 520 pixel width for all FBML application tabs. To avoid this restriction, you can work with canvas applications.
- BP: Both of these Facebook Pages have set their custom FBML tabs as landing pages for all non-fans who visit their page. Facebook does not let administrators control where fans land on their page (default is the wall) but you can choose which tab is first seen by a new visitor.

To find out about the changes in Facebook Pages, pertinent for developers, read our blog post on the topic: Facebook Changes. You can also find recent updates on the Facebook Developers site.
Learn how to set a landing tab for your page here, in our FAQ tutorial post.
Thank you for sharing all of your FBML examples, we hope that we can continue to be of help in all of your Facebook developing endeavors.






#1 by Daniel J Griffiths - July 13th, 2010 at 09:35
I am the designer/developer of the Crane Coffee FB page, and I'm glad to see that we made your list! Thanks for pointing out the issue with text not fitting on the page, dunno how that happened but it has been fixed. The site will also be adjusted to match the upcoming layout changes shortly.
#2 by Telefonos Satelitales 3bwave - August 12th, 2010 at 10:33
Where in the code example? ..
I'm new on FBML, please help