Taking Your Static FBML Microsite to the Next Level

This post was published 1 year 11 months 30 days ago. There is a chance that some APIs or software versions discussed have changed since this article was written.

In a previous tutorial, you learned how to Extend Facebook Static FBML Tabs with Dynamic Content, and now we’re back to show you how to take it even further by creating sub-nav tab navigation within your Static FBML microsite using only DynamicFBML.

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.

<!-- Now set the main tab navigation -->
<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3">Home</a>
<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3">Demo Tab</a>
<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2">Locations</a>
<br />
<br />

<!-- start the div for the first main nav tab - nav1 -->
<div id="nav1">
	<p>Home content</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 />
	<a href="#" clicktoshow="tab2subnav1" clicktohide="tab2subnav2,tab2subnav3">Subnav One</a>
	<a href="#" clicktoshow="tab2subnav2" clicktohide="tab2subnav1,tab2subnav3">Subnav Two</a>
	<a href="#" clicktoshow="tab2subnav3" clicktohide="tab2subnav1,tab2subnav2">Subnav Three</a>
	<hr />
	<br />

	<!-- start the div for the first subnav tab - tab2subnav1 -->
	<div id="tab2subnav1">
		<p>Subnav one content</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>Subnav two content</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>Subnav three content</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;">
	<h1>Locations</h1>
	<p>Locations content</p>
</div>
<!-- end the div for the third main nav tab - nav3 -->

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.

Also check out:

If you think this article kicked ass, subscribe to the RSS feed or follow me on Twitter! Share with your friends, or leave a comment below (or better still, do both!) My entire concept of self-worth is in your hands, so that makes you kind of a big deal. Srsly.