In part 1 of our series, we covered adding the FBML (Facebook Markup Language) application to our Fan Page.  It shows up as a tab and accepts some basic HTML.  One great example of this from Part 1 is here.  Now we will move on to a more advanced technique that allows us to hide and reveal different sections of our page to mimic a micro site – a webpage within a webpage.

THE MENU

We are using a series of images as our menu buttons.  To keep it simple, we will not use hover and click states – just a simple image as a link.  If you want to use the image I created, feel free.  I have made four different buttons for this example that will correspond with each “page”: Home, About, Map, & Contact.

BLOCKS AS PAGES

The basic concept at work here is that each “page” is actually a block of HTML code that contains the content for each of our pages.  Only one block will show at a time, forcing the other blocks to be hidden.  This hide/reveal technique is a bit of slide-of-hand to make the user imagine there are independent pages , when, actually, all the content is being served up from one page without the need to load a new page.  Since we are operating within the confines of Facebook tabs, this is a perfect solution for our micro site.

THE CODE

When looking for tutorials like this, I found a lot of them were incomplete.  Many sites assumed that the reader knew  HTML, javascript and beyond… I wanted to be sure you had the EXACT code that I used so you will have someplace to start.  Instead of give examples in the blog post, just download the whole document and have fun.  Feel free to ask questions in the comments, too.

Facebook-Microsite-Example

Post to Twitter Post to Delicious Post to Facebook Post to Google Buzz Send Gmail