The previous tutorial, I walked you through how to use clicktohide and clicktoshow to enhance your Facebook Fan Page tab. By utilizing these built-in Facebook functions, we can get creative and make image galleries, slide shows, or micro-sites within a single Facebook Fan Page tab. This is especially handy if you’re trying to fit a lot of content into a single tab, but don’t want to have one long scrolling mess of a tab. While hand-written FBJS is always an option, Facebook makes it really easy to accomplish this with only the most basic coding skills.

(That said, if you haven’t read the first tutorial, it will probably be helpful for you to read that one first before continuing with this one – I assume you understand the concept of clicktohide and clicktoshow here.)

So what you’ll end up with is a single Facebook Fan Page tab that has a “main” navigation that switches content within that single tab, and an additional subnavigation menu that switches content within that one section of the tabbed content. It sounds more confusing than it actually is – click here for a demo.

This is what we created in the previous tutorial:

And this is what we’re going to create in this one:

Similar to the example in the first tutorial, we’re going to do all of this magic simply by using CSS, HTML and the clicktohide and clicktoshow functions. In fact, what we’re doing here isn’t that different at all from what we did the first time, but I get a metric-assload of emails asking me how to to it, so here it is.

And that’s it. That’s the whole code snippet. For clarity, I have stripped out all of the extra styling, text and fancy button treatments. If you want the exact code used for the demo, scroll down further in the page – I’ve included that as well.

I’ve commented the code pretty liberally, but just to recap what we’ve done, we created the normal main microsite divs, nav1, nav2, and nav3. These are the “buckets” that contain the top-level “tabs”, same as we did in the first tutorial. What we’ve added is a second, smaller set of buckets and corresponding nav. We use the exact same method of clicktohide and clicktoshow – the only different is what we’ve name the smaller bucket divs, and where they live. The div structure works out to be something like this:

[nav1 div]
— nav 1 content
[/nav1 div]

[nav 2 div]
— [subnav 1 div]
— subnav 1 content
— [/subnav 1 div]

— [subnav 2 div]
— subnav 2 content
— [/subnav 2 div]

— [subnav 3 div]
— subnav 3 content
— [/subnav 3 div]

[nav3 div]
— nav 3 content
[/nav3 div]

As promised, here’s the exact code snippet, line by line, that was used to create the demo page.

<!-- let's set the style for those fancy buttons -->
<style type="text/css">
.awesome, .awesome:visited {
background: #222 url(http://www.snipe.net/wp-content/uploads/2009/10/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.awesome:hover {
background-color: #111; color: #fff;
}
.awesome:active {
top: 1px;
}
.awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
background-color: #630030;
}
.large.awesome, .large.awesome:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
h1 {
color: #a9014b; font-size: 26px;
}
p {
font-size: 15px;
}
</style>
<!-- Now set the main tab navigation -->
<strong><a href="#" clicktoshow="nav1" clicktohide="nav2,nav3" class="large awesome">Home</a></strong>
<strong><a href="#" clicktoshow="nav2" clicktohide="nav1,nav3" class="large awesome">Demo Tab</a></strong>
<strong><a href="#" clicktoshow="nav3" clicktohide="nav1,nav2" class="large awesome">Locations</a></strong>
<br />
<br />
<!-- start the div for the first main nav tab - nav1 -->
<div id="nav1">
<img src="http://www.snipe.net/wp-content/uploads/2009/10/alison-fixed1.jpg" align="right"/>
<h1>Default Content </h1>
<p>Click on the "Demo Tab" above to see an example of
multi-level tabbing in a purely FBML microsite.
With a little practice and patience, you could
recreate a fairly large website using this method.
(The content of these subnavs are quotes from
Monty Python and the Holy Grail, for your entertainment.)</p>
</div>
<!-- end the div for the first main nav tab - nav1 -->
<!-- start the div for the second main nav tab - nav2 -->
<div id="nav2" style="display: none;">
<h1>Example Tabbed Subnav in Microsite</h1>
<hr />
<strong><a href="#" clicktoshow="tab2subnav1" clicktohide="tab2subnav2,tab2subnav3" class="medium awesome">Subnav One</a></strong>
<strong><a href="#" clicktoshow="tab2subnav2" clicktohide="tab2subnav1,tab2subnav3" class="medium awesome">Subnav Two</a></strong>
<strong><a href="#" clicktoshow="tab2subnav3" clicktohide="tab2subnav1,tab2subnav2" class="medium awesome">Subnav Three</a></strong>
<hr />
<br />
<!-- start the div for the first subnav tab - tab2subnav1 -->
<div id="tab2subnav1">
<p style="color: red; text-weight: bold;">Hey, this
is the content for <strong>Subnav One</strong>!
You can put photos, text, even videos in here.</p>
<p>Bravely bold Sir Robin rode forth from Camelot.
He was not afraid to die, oh brave Sir Robin.
He was not at all afraid to be killed in nasty ways,
brave, brave, brave, brave Sir Robin.
He was not in the least bit scared to be mashed
into a pulp, or to have his eyes gouged out,
and his elbows broken. To have his kneecaps
split, and his body burned away, and his limbs
all hacked and mangled, brave Sir Robin.
His head smashed in and heart cut out, and his
liver removed, and his bowels unplugged, and
his nostrils raped and his bottom burned off and his penis... </p>
</div>
<!-- end the div for the first subnav tab - tab2subnav1 -->
<!-- start the div for the second subnav tab - tab2subnav2 -->
<div id="tab2subnav2" style="display: none;">
<p style="color: blue; text-weight: bold;">Hey,
this is the content for <strong>Subnav Two</strong>!
You can put photos, text, even videos in here.</p>
<p>When I first came here, this was all swamp. Everyone
said I was daft to build a castle on a swamp,
but I built in all the same, just to show them. It sank
into the swamp. So I built a second one.
That sank into the swamp. So I built a third.
That burned down, fell over, then sank into
the swamp. But the fourth one stayed up. And that's
what you're going to get, Lad, the strongest castle in
all of England. </p>
</div>
<!-- end the div for the second subnav tab - tab2subnav2 -->
<!-- start the div for the third subnav tab - tab2subnav3 -->
<div id="tab2subnav3" style="display: none;">
<p style="color: green; text-weight: bold;">Hey,
this is the content for <strong>Subnav Three</strong>!
You can put photos, text, even videos in here.</p>
<p>Follow. But. Follow only if ye be men of valour,
for the entrance to this cave is guarded by a
creature so foul, so cruel that no man yet has fought
with it and lived. Bones of full fifty men
lie strewn about its lair. So, brave knights, if you
do doubt your courage or your strength,
come no further, for death awaits you all with
nasty, big, pointy teeth. </p>
</div>
<!-- end the div for the third subnav tab - tab2subnav3 -->
</div>
<!-- end the div for the second main nav tab - nav2 -->
<!-- start the div for the third main nav tab - nav3 -->
<div id="nav3" style="display: none;">
<img src="http://www.snipe.net/wp-content/uploads/2009/10/alison-grr.jpg" align="right"/>
<h1>Locations</h1>
<p>This is the locations "page". You can put text, images, even video here.</p>
</div>
<!-- end the div for the third main nav tab - nav3 -->

The above is the exact code snippet I used to create that demo page, specifically. (In other words, please don’t email or comment asking me for the source. This is ALL there is, including the yummy button styling.)

As long as you properly nest your divs (and use valid HTML with no wonky or open tags), this will work every single time. The names of the divs don’t matter, as long as they match the clicktohide/clicktoshow div names you’re specifying in the nav.

If it doesn’t work when you try it, and you’re 100% sure you copy+pasted exactly from this tutorial, try again later. Sometimes Facebook has issues, and the only way to work around it is to wait until they’re not having issues.

I’d like to once again remind you that you’re not at all restricted to using the clicktohide and clicktoshow functions in the way I’ve outlined them here. My goal isn’t to show you the only things that are possible , but rather to get you familiar with the concepts so that you can use your own imagination and apply them in unique and exciting ways.

If you’ve done something cool with clcicktohide/clicktoshow (and let’s not forget clicktotoggle from the last tutorial), make sure you drop a link in the comments. I love to see what other people are working on. It makes my own raging Facebook development Hell a little easier to bear.

obviously by copying line for line it works great but how do i get rid of the sidebar? (profile pic, friends, etc)

http://www.snipe.net snipe

You cannot.

Anonymous

is that option gone now? it seems like everyone has just their content without the sidebar?

http://www.snipe.net snipe

That option never existed for tabs. Tabs will always have the profile/friends/etc. The interfaces you see without those boxes are application canvas pages. You’d need to register and build an application to have that.

Anonymous

Okay, thanks for the quick response. I was confused as i thought the article and demo was for using with the static fbml tab and it didn’t have the sidebar.

http://www.snipe.net snipe

This article is for Static FBML tabs. What’s you’re looking for is not a Static FBML tab. it’s an actual application. The Static FBML app from Facebook only supports tabs, not canvas pages. All tabs have the profile/friends/etc

Joshua

thanks for the great help! the colors and styles don’t show up in internet explorer tho. Can you help me solve this problem??

http://twitter.com/aurelien_pigot aurel

wonderfull

i have juste a littel probleme , i use in the div the fb:swf tag , its work great , but juste a probleme for loading image and i dont know why

Great post – I’ve used this technique for clients a few times now and have consistently received positive feedback.

Quick question – you make reference to the ‘issues’ that Facebook falls victim to from time to time however I’m finding that their cache is the source of frustration. Do you know if there is anyway to force the Facebook cache to update or is it a case of simply sitting around and waiting?

Thanks!

http://www.creativedesigndevelopment.com Bethsarim

Word on the street is the FBML boxes will be done away with and replaced by iFrames, since I am incorporating these methods into the Landing Pages (now to be named Faceboon Fan Micro-site’s) I want to know how does this fit into an iFrame. So I can prepare, I hear this will take effect in 2011…

Thomas kragh

Tabs don’t work in Internet explore any more…

http://www.snipe.net snipe

That is the word on the street, however no one knows whether the version of iframe we’ll get is a true iframe, or some mutant version of an iframe. So no way to know yet.

http://www.snipe.net snipe

Pardon me? Tabs work in IE just fine – CSS is wonky, but that can be solved by including an external style sheet.

I know that in IE8 the buttons don’t show up as buttons (at least not with the standard super awesome button code from Zurb). But thanks so much for this add on post – now I can really fancy up my mini sites!

If anyone happens to figure out how to get the buttons to show in IE8, please let me know. They show in Firefox just fine and other browers, but IE just won’t play nice!

http://www.myspace.com/catwardproductions CatWard

Never mind, saw the post below about having to use an external CSS – sorry!

http://profiles.yahoo.com/u/BDSNONXBGRSBTMRLUC53DNNFKM Noogie

How do you track each bit of subcontent with google analytics? on_track_event?

Marius

Hi, i have just finished my static fbml box for fan page with fb:comments inside. Everything looks perfect and working well, except one thing – i can comment just with my personal account and can’t like fan page admin. Searching for the solution all day, but can’t find anything…

Thanks,

http://www.snipe.net snipe

There is no solution. All FB users who have admin rights to a page will post as the page, not as themselves. This is a facebook limitation.

Thebartman575

Hey, this is a great article. I’m new to Facebook tab programming, and I tried making this microsite and I’m running into a problem I don’t know how to fix. I have 4 main navs, and each one has around 5-10 subnavs. Whenever you view one of the subnavs beyond the first three, it continues to be displayed even when you’re on a different main nav. However, when you view one of the first three subnavs, and then switch to another nav, the content from the other nav disappears. Why does it only do this for the subnavs I have beyond the first three, and is there anyway to fix it?

Thanx for sharing this excellent tutorial Snipe!!!
I have one question regarding those static FBML Tabs, could I add like buttons to it? or would I have to make an app for that? What about multiple like buttons?
*love*
//Nina

Dear Snipe, thanks for your kindness for this tutorial, i had practise with your code to create other combinations. however, when i play with this code, i facing problem , the code seems like incompatible with IE8 & IE9, i cannot find the reason, the box missing, and the CSS layout is messy when open by IE. i have not knowledge about css, i study the info from http://www.w3schools.com/css/default.asp , but seems like code had no problem.. make me confusing, can you give me a hand?

Anyway work perfectly in Firefox and Chrome.

annu

Hi, sorry for a probably really stupid question..but how can I make the sub nav background change when I hover over it? Just couldn’t figure it out Please help!

Awesome and clear tutorial. This is exactly what I’ve been looking for to put on my fanpage. Thanks!

TweetMyStyle

I have a question: This rocks like crazy- but I tried to do just a MAIN Nav w/ 5 buttons. No sub nav. Everything goes great till I try to make the 4th & 5th button. They show up on FB but when I load the info in canvas and click save those two buttons are blank when I click on them. They click but none of the info shows. All code is correct. Its a COPY of button 1 and 2 which does work. I used the copy so I could be sure the code is correct but FB is blocking this somehow??? any suggestions I see tons of micros w/ 5 buttons on FB that work.

http://www.snipe.net snipe

I’m just about positive that you’ve biffed something somewhere. Copy+paste is good, except that it leaves you opening to forgetting to rename divs and their corresponding actions. I’d put money on that being what happened here.

coffeey

Thanx alot. It helped me getting started.. finally

Samaf31

just had to say thank you! you have made my day!!

Vishal3184

I tested this, but this does not work in Internet Explorer.

Any Idea?

http://www.snipe.net snipe

Actually it does. If you’d like to be more specific, i might be able to help you.

FBML doesn’t really work that way. If you have a database and you’d like to pull data from it, you’ll need to use a scripting language like PHP or .Net to communicate between the browser and the database. Your output would then be formatted in FBML if you wanted. FBML is being phased out anyway though, so I would avoid using it unless it’s a very short term promo.

Chunnuchaywala

Hello I have developed a website in Joomla and added SOBI search module for searching large amont of data base can we connect this type of search functionality in Facebook.

Thanks for this awesome tutorial! I was able to edit your code into my own micro site for my school. (facebook.com/demusicacademy) but I was wondering if you could tell me why these microsites don’t show the buttons etc. in internet explorer? In chrome and firefox the buttons will show normally with colors and boxes, in IE they’ll show as regular links. Any idea why?