Facebook Application Header. Basic tips

Think of a website — any website. Just pick one at random. More than likely, you are able to picture the basic look of whatever website popped into your head. More importantly, you probably have a pretty good idea about how the logo and top-level navigational links are laid out. That’s because most websites today follow the general principle of including a standard header throughout their websites, ensuring that theirs users are aware of what site they are visiting and what the site has to offer.

Webmasters this feat by including the website name, logo, and tagline, typically located above the contents of any page in the website. Oftentimes, links to various sections of a website are integrated into this header as well, providing the user with a general idea of what kind of content and information can be found there. As an Facebook application developer, it is certainly important that you leave your users with the same kind of impression, whether it’s their first or fiftieth visit.

Creating a Basic Application Header

Fortunately, creating a simple text header in your social media application application can be painlessly accomplished with the assistance of the fb:header FBML tag. The fb:header tag is perhaps one of the easiest tags to implement: insert the empty, attribute-less tag anywhere within your top-level application FBML, as per the following example.

Assuming your application already has an icon uploaded, this simple piece of code will render the following atop your application.

If your application does not have an icon, the above code will render a dashed outline of a 16×16 pixel box instead. Because this offers no value to your application and may result in some confusion for your users, it is probably better to omit the icon from your header. By setting the optional “icon” attribute of the fb:header tag to “false” as in the following example, this can easily be achieved.

Header Decoration Options

The fb:header tag also includes an optional “decoration” attribute that can be used to specify one of three pre-defined layouts.

Setting the decoration attribute to “add_border” adds a 1px solid gray (#ccc) border to the bottom of the header. Setting this attribute to “no_padding” removes the standard 20px padding from all edges of the header, while “shorten” removes the standard 20px padding from just the bottom of the header. A basic implementation of the “add_border” option can be seen below.

Remember that both the “icon” and “decoration” attributes can be used in conjunction if desired. In order to remove all header padding while disabling the application icon within the header, the following code could be used.

3 Responses to “How to Create a Simple Application Header”

Would you mind writing a few tutorials on how to build interactive Javascript pages that work together with FBML?
For instance, the application “Extended Info” has a terrific “Invite Friends” page that uses several Facebook visual effects, but it’s very difficult to understand how it works.
Additionally, the Facebook Wiki often lacks practical examples, but your tutorials are easy to understand and are very well written.

Thank you for writing, Stanley. I certainly can write some tutorials along the lines of what you are seeking. My goal here is to cover techniques on Facebook application development ranging from basic to advanced. Until then, I certainly suggest checking this wiki page, which provides a skeleton example of how to create an invite page like Extended Info and many others have implemented.