Fbootstrapp: Bootstrap for Facebook apps

Fbootstrapp: Bootstrap for Facebook apps

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.

SHARE:

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:

Topics: Software Development, Social Enterprise

Emil Protalinski

About Emil Protalinski

Emil is a freelance journalist writing for CNET and ZDNet. Over the years,
he has covered the tech industry for multiple publications, including Ars
Technica, Neowin, and TechSpot.

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Talkback

1 comment
Log in or register to join the discussion
  • fbootstrap question

    how do I integrate fbootstrap and datatables in my fb canvas application?

    this is the app

    please help me :(
    Vincenzo Piromalli