How to Create a Simple Application Header
November 26, 2007
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 Facebook 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.
<fb:header/>
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.
<fb:header icon="false"/>
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.
<fb:header decoration="add_border"/>
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.
<fb:header icon="false" decoration="no_padding"/>
Comments
5 Responses to “How to Create a Simple Application Header”
Got something to say?
Hi Matt,
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.
Best,
Stanley
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.
Thanks for the link Matt!
Hello,
I am developing a facebook application in Ruby on Rails. My index page only contains the following
the extension of my index page is .rhtml instead of html (this is because it is in ruby). I keep on getting the error
Errors while loading page from application
Received HTTP error code 422 while loading http://203.81.196.6:3000/socialrecipe/
Please guide me on this. Please reply at harisgulzar@gmail.com as soon as possible
Do you have any tutorial for dummies? I need one… my boss wants an application tab that shows a live stream video ( type wms), but I’m totally lost… Am I dummy or it’s really difficult ?
Thank you.