Friending Facebook

Emil Protalinski

Fbootstrapp: Bootstrap for Facebook apps

By Emil Protalinski | January 9, 2012, 6:57am PST

Summary: Have you ever built a Facebook app, or wanted to, but wished you had a better starting point than the samples and documentation provided by Menlo Park? You should take a look at Fbootstrapp.

German developer Clemens Krack has built Fbootstrapp, a toolkit designed to help developers kickstart development of Facebook iframe apps in both sizes: 520px (fan-page) and 760px (standalone app). It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in Facebook’s typical look and feel. The code is available on GitHub.

Here are five features of Fbootstrapp you should know about:

Based on Bootstrap: Fbootstrap is based on Twitter’s excellent Bootstrap, as the name might indicate.
Built with less: Fbootstrapp comes with the same less goodness as Bootstrap.
Styled for Facebook: As some researchers found out, it is more intuitive for users to style elements within apps and fanpages in the same look as the parenting facebook site.
Build fanpage tabs: Fbootstrapp includes a 520px grid perfectly suited to create fanpage tabs.
Build canvas apps: Additionally to the 520px grid, a 760px grid suitable to the bigger standalone app canvas is included.

Most companies offer UI guidelines with libraries and frameworks to allow others to build products that look native to their platform. This kit was created out of necessity: Facebook doesn’t provide any such recommendations. This means Facebook app developers who want to build something in line with what a user expects on the social network, they have to spend many hours playing around with the design.

Some developers have already complained that this project is just a blue version of Twitter’s Bootstrap project, but I disagree. That may be how it began, but overall I see the potential to seriously improve how apps are designed for the world’s biggest social network. If you find an inconsistency with how Fbootstrapp does something, just contribute your thoughts and improvements on GitHub.

See also: