Home » Featured » Taking Your Static FBML Microsite to the Next Level
Taking Your Static FBML Microsite to the Next Level

Taking Your Static FBML Microsite to the Next Level

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.

Advertisement

Net Tuts

Advertisement

Themeforest

flattr this!

About Alison Gianotto (snipe)

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist, and the CTO at Mass Mosaic in New York City. Tweet at me @snipeyhead or read more...
  • Anonymous

    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 :(

    you can see the result here

    http://www.facebook.com/pages/Hammam-Sousse-Tunisia/Darwin-Prod/110833722296785?v=app_6009294086&ref=ts

    and “bravo” again for the script :)

  • Jasonkaline

    great script – though stylesheet doesn’t work in IE8

  • http://www.electricfirefly.com.au josh909

    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.

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

    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?

    Thanks!

    • http://www.snipe.net snipe

      Double check that your non-home divs have the style=”display: none;” attribute.

      • Thebartman575

        They all have the style=”display: non,” attribute, but it’s still not working for some reason.

      • Thebartman575

        *i meant style=”display: none;”

      • Thebartman575

        This is what it looks like. I don’t know why it keeps on displaying other subtabs.
        http://pastebin.com/Dch1xx0V

  • Nina

    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

  • cwy98345

    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!

  • annu

    Maybe u’d be interested on what I’ve done on my company’s page..check it out http://www.facebook.com/JJStreet

  • http://www.tiles.co.nz Antonia

    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.

  • Percy_2020
    • http://www.snipe.net snipe

      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.

        This site http://www.facebook.com/3pundits#!/3pundits?sk=app_4949752878 added search query page can we do something like this.

        Help will be appreciated.

        Thanks

      • http://www.snipe.net snipe

        Yes, you would iframe it in.

  • http://www.facebook.com/profile.php?id=1410054233 Vincent van Dijk

    Hi there,

    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?

    Keep up the good work!

    V.

    • http://www.snipe.net snipe

      You need to use an external style sheet for the CSS to show in IE.

  • http://www.facebook.com/profile.php?id=100000058706576 Sherfich Ninguen

    How did you do the mouse over?

  • Xuber

    it is not working when i click any other tab other than Home. It just dont show me any thing it look like as if it is stuck on home tab. Kindly suggest me a solution. thnx

    • Ayessa Mae Sevilla

       We’re the same Xuber , how does it work?

      • http://www.snipe.net snipe

        Check your HTML – when this happens, it’s always because your divs are not properly nested, not closed, closed too early, etc. Try using the WC3 validator if you can’t find the bug in your HTML.

  • http://www.snipe.net snipe

    Check your HTML – when this happens, it’s always because your divs are not properly nested, not closed, closed too early, etc. Try using the WC3 validator if you can’t find the bug in your HTML.