This tutorial walks you through how to use DynamicFBML to do simple content replacement that will allow you to fit more content into your tabs. You can create image or video galleries, or even an entire micro-site inside your Static FBML tab without a lot of complicated scripting.

[box type=”error”]FBML and FBJS were deprecated by Facebook in 2012 in place of iframe applications, so the code in this article will not work anymore. This article is being kept here for historical purposes only.[/box]
If you’re not sure what Static FBML is, check out my previous tutorial that shows you how powerful the Static FBML application can be, and how you can create very compelling, highly branded Facebook Fan page tabs without the hassle of building a custom Facebook application.

At its most basic, the functionality we’re discussing is simply one or more text or image links that, when clicked, cause content in a set space to change. Some potential uses:

  • Dynamic image gallery where the user clicks on a thumbnail to see a larger version of the image
  • Video gallery that allows you to include thumbnails on the video that loads the selected video into a single player space. This can be particularly helpful in tightly designed Static FBML pages where you have limited space to display a lot of content.
  • Or even using your Static FBML tab as a mini-site, replacing the entire tab’s content with new content to simulate multiple pages

We’re going to explore a few examples in this article, but it’s basically the same code regardless of how you apply it. First, let’s look at creating a micro-site within a Facebook Static FBML tab – see a live demo of the tab we’re going to create here.

Notice the navigation within the tab itself (Home, Specials, Locations, About). Clicking on them displays new content in the entire tab without actually reloading the page. This is an example of Facebook’s DynamicFBML, and you won’t believe how easy it is to implement. Seriously, you won’t.

snipe_tab

So, okay… maybe that tab isn’t the fanciest thing you’ve ever seen, but it gives you a clear idea of how this works. How plain or sophisticated the design is depends entirely on you and how comfy you are in a graphics program.

If you dig the cool-looking button CSS in the test page, you can learn how to get that effect by visiting ZurbBlog’s post on Super Awesome Buttons with CSS3 and RGBA.

But here’s the great part: the code needed to create that tab is basically this:

<!-- navigation elements -->
<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3,nav4">Home</a> 
<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4">Specials</a> 
<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4">Locations</a>
<a href="#" clicktoshow="nav4" clicktohide="nav1,nav2,nav3">About</a>

<!-- Content to display when user clicks on the Home tab -->
<div id="nav1">
	Homepage text
</div>

<!-- Content to display when user clicks on the Specials tab -->
<div id="nav2" style="display: none;">
	Specials text
</div>

<!-- Content to display when user clicks on the Locations tab -->
<div id="nav3" style="display: none;">
	Locations text
</div>

<!-- Content to display when user clicks on the About tab -->
<div id="nav4" style="display: none;">
	About text
</div>

Seriously. That’s it. That’s ALL there is to it. Naturally, I stripped out the extraneous text, images and styles from my demo for simplicity’s sake, but that’s honestly it.

This is arguably the one thing that is exactly as easy as it appears to be with regard to developing anything for Facebook.

This code is fairly straightforward, but let’s take a look at what’s happening here.

In the first part, we’re setting our links. For the micro-site, these are our navigation links. Everything here looks like pretty standard HTML except for the extra “clicktoshow” and “clicktohide” elements. (Note: The links do not have to be set before the content divs – you’ll set them wherever they make sense in your design. You’ll see an example of this further down the article in the image gallery sample.)

<!-- navigation elements -->
<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3,nav4">Home</a> 
<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4">Specials</a> 
<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4">Locations</a>
<a href="#" clicktoshow="nav4" clicktohide="nav1,nav2,nav3">About</a>

The clicktoshow element allows you to specify the id’s of the elements you wish to show when the link is clicked. Conversely, the clicktohide element allows you to specify the ids of the elements you wish to hide when the link is clicked.

In our navigation elements, since the div that contains the homepage text is set as nav1 in our HTML, we want the clicktoshow for the Home link to be nav1 (since we want that div to show when we click on it.) Likewise, since we’re completely replacing whatever div is currently visible with the nav1 div contents, we want to specify everything that isn’t nav1 in the clicktohide.

Combining divs in hide/show

What’s particularly fun about the clicktoshow and clicktohide (other than their sheer ease of use) is the fact that unlike a more complicated true JavaScript version, showing and hiding two or more divs at the same time on the same click is simply a matter of specifying them in the clicktohide or clicktoshow parameters.

<!-- set up our text links -->
<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3">Oh</a>
<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3">Hai</a>
<a href="#" clicktoshow="nav1,nav2" clicktohide="nav3">Oh Hai</a>
<a href="#" clicktoshow="nav1,nav2,nav3">Oh Hai SRSLY!</a>

<!-- Content to display when user clicks on the Home tab -->
<div id="nav1">
	Oh
</div>

<!-- Content to display when user clicks on the Specials tab -->
<div id="nav2" style="display: none;">
	Hai
</div>

<!-- Content to display when user clicks on the Locations tab -->
<div id="nav3" style="display: none;">
	SRSYLY!
</div>

In the snippet above, we’re using only three divs with four nav elements. By specifying multiple ids in the clicktoshow parameter, we can show multiple divs at once, so when you click on “Oh Hai SRSLY!”, you’re looking at nav1, nav2 and nav3 all being shown at once. Piece of pie.

snipe_tab_funky

Example Image Gallery

One more example that will hopefully get your creative juices going – let’s look at how to do an image gallery using only clicktoshow and clicktohide.

In this gallery, we have a set of thumbnails with one large space set aside in our design where the fullsize image will display. You can see a simple demo of this gallery here.

gallery

Now take a look at the sourcecode below. Notice that we’re using the exact same code as we used in the other examples – we’ve just changed the names of the divs so they make more sense semantically in a gallery.

<!-- set the divs for the fullsize images -->
<div id="image1">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/full-1.jpg" />
</div>

<div id="image2" style="display: none;">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/full-2.jpg" />
</div>

<div id="image3" style="display: none;">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/full-3.jpg" />
</div>

<div id="image4" style="display: none;">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/full-4.jpg" /><br />
</div>

<!-- set up our thumbnails -->
<a href="#" clicktoshow="image1" clicktohide="image2,image3,image4">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" />
</a>

<a href="#" clicktoshow="image2" clicktohide="image1,image3,image4">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-2.jpg" />
</a>

<a href="#" clicktoshow="image3" clicktohide="image1,image2,image4">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg" />
</a>

<a href="#" clicktoshow="image4" clicktohide="image1,image2,image3">
	<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-4.jpg" />
</a>

By the way – if you dig the images used in that sample gallery, be sure to check out the Great Pumpkin Roundup post that shows examples of some of the most amazing pumpkin carving you’ve ever seen in your whole life.

In a project for vitamin water, I needed to create what appeared to be a dynamic video player, using only the default Facebook media player, which doesn’t support options like having a playlist where people can click on a gallery of thumbnails and load the video into a single player. See below:

new_moon_tab

The code used to pull this off is almost identical to the image gallery example above. No foolin’.

But wait – there’s more!

An additional DynamicFBML function that you may find useful is Clicktotoggle, which is very similar to Clicktoshow and Clicktohide, except instead of turning visibility on and off by clicking on on different links, you toggle visibility on and off by clicking the same link.

Your takeaway

While I certainly hope that the code presented here will be useful to you, the concept of what you can do using clicktoshow and clicktohide is more important. You’re not limited to creating a micro-site or an image gallery. Get creative and have some fun with this. Not many people are being adventurous in their Static FBML tabs yet, so you have an opportunity to really wow your users with your newfound skills.

Additional Resources

Advertisement

468x60_makemoney

Advertisement

Themeforest
Previous post

The Geek Pumpkin Roundup

Next post

Twitter launches groups in BETA for some users

snipe

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I'm the CTO at Mass Mosaic and the CEO of Grokability, Inc. in San Diego, CA. Tweet at me @snipeyhead or read more...

  • Alex

    Hi Snipe,

    I’ve managed to implement this nicely with embedded YouTube videos, switching between them in exactly the same way as your image gallery and having them autoplay. When you switch between videos the current one playing stops. When you click back to it, it restarts…… in Firefox!!

    In IE8 it’s another story – the videos just keep playing, audio and all! Unlike in Firefox, the display:none function doesn’t seem to affect video playback. Switching between videos is impossible because the audio from the previous one is still playing over the top of the newly selected video! Argh!!!

    Do you have any suggestions for how to correct this?

    Alex

  • Morian77

    Hey Snipe I have a question. I want to be able to have navigation tabs inside the tab, plus I’d like to have an image gallery and video gallery as part of the site, but when I try to implement the image gallery as part of the mini site the next div gets put to the bottom of the image gallery page. Here is the page http://www.facebook.com/pages/Steven/109707892416732?v=app_4949752878&ref=ts#

    • Morian77

      I found the problem I was having. Your code is missing a ” after the 4.jpg section

  • Hi, I’ve been working on my company’s FB page for a while now, I think it’s pretty good, but your tutorials would make it even more awesome. I got everything right, except the buttons! I can’t figure out nor find information on how to get a real button that people could press, because right now it’s just text you can click on.. I really need an example or a real easy explanation on how to do it and what to put where and where to put what.. I know I might seem stupid 😛
    Please help me 🙂
    P.S. your site is awesome and I’m sorry if I write weird, English is not actually my speaking language

    • annu

      It’s me replying to myself, I broke my brain and figured it out and I also found the next tutorial that gave me a push. Thank you and bless this page!

      • Gulshi

        hey i am suffering wid the same problem..could u please tell me the same u asked earlier…

  • Gulshi

    hey i am not able to make those css buttons…dont know why but i am not at all getting where to add the css button code…plz help me as i seriously want to add this to my page…
    my page is…
    http://www.facebook.com/gulshisingh?v=app_4949752878

  • Amar1026

    Hi,
    I’m new at this and it might be a dumb question so please bear with me…

    i understand the code but how do i implement it on facebook…do i write the code directly on the fbml app….? Seems like i can’t do anything unless it’s somewhere on my server so do i upload the code on to my server and link it as a src document on fbml? Please help!

    • I think you started with the wrong tutorial. Second paragraph of this page says “If you’re not sure what Static FBML is, check out my previous tutorial that shows you how powerful the Static FBML application can be, and how you can create very compelling, highly branded Facebook Fan page tabs without the hassle of building a custom Facebook application.”

      http://www.snipe.net/2009/06/fb-fanpages-fbml-box/

  • Carly Walter

    I have a question about the multiple buttons within a Facebook Tab. I understand how to create the buttons, but how can I make them look like actual buttons (as in your examples with the colored buttons). Do I have to use CSS to make the buttons appear like that, instead of them looking like worded links? Where could I host a CSS file for free, and where in the FBML code would I plug in the link for the CSS code? By the way, this is an awesome tutorial, thanks for sharing! Where did you learn all of this from?

  • Pingback: Facebook FBJS Examples | FBMHell.Com()

  • Alan

    Snipe, first I wanted to say thank you so much for this excellent information.

    With your tutorial on clictoshow and clicktohide, I was able to build an entire mini site contained within one tab. Works perfectly, except I have one question for you: I have a navigation bar at the top and bottom of all the content. The top nav bar works fine, but when you use the bottom one (below the fold and all the content), it doesn’t bump you up to the top of the desired div. I understand why this would be, as the code is only showing and hiding the divs, not directing the user to the top of the page. Is there some way around this? Is there some way to show the div but also force it to start displaying at the top? Thanks in advance!

    • Hi Alan – I can’t think of any way to do that in a tab. Normally I’d use jquery or something like that to handle that situation, so maybe you could try FBJS. Some variation of the code shown here might help: http://techblog.careesma.com/development/fbjs-tabs

      • Alan

        Thanks for your help!

  • Dannygirl44

    Everything works fine in Firefox but not in IE. Why? None of my tabs are working in IE.

    • Alan

      Is your stylesheet an external file? IE won’t display properly unless the styles are external.

  • Mercury

    Great nuggets of infromation! How do you set default tab content to display when the page is opened

    • That’s done in your page preferences. It only works on users who have not already “liked” your page.

  • Richard

    how do you get this to wok in internet explorer?

    • Just use an external style sheet

  • 7thguy

    great post!
    How do you determine the size of the photos and the size of the thumbnails?

  • Mbmanning401

    wow

  • you just improved my life!
    thanks alot
    Hilla
    The Good Witch from Israel
    http://www.TheGoodWitchWay.co.il

  • Ryan

    Can you nest this method? I’m trying and it doesn’t seem to work. I really love your work.

  • Danijel-b

    Can anyone please help me to make landing FBML page like this one http://www.facebook.com/?ref=home#!/pages/Da-li-vas-zanima-kako-izgleda-baba-iz-crtica-Tom-Jerry-pogledajte/154844974561136 I managed to make one where you must like a page before get some other content, but this one also make you share a page with all friends before getting a link. Thanks in advance!

  • Chicalicious Toronto

    THANK YOU THANK YOU THANK YOU!!! Exactly what I’ve been looking for!! 🙂 Thank you soo much!!!

  • Thank you Jesus for showing some source code to at least see a little bit of what goes on behind the scenes. Very Helpful

  • excellent man-i was finding jus that

  • Kastlebrick

    So I’ve come across a problem. I think?

    my nav bar works, but it seems there is an issue with how much text I put in for the correlating nav1, nav2 ect…

    is there a limit to the amount of text? here’s the link, the tab name is “lyrics”

    http://www.facebook.com/pages/Jeffrey-Kastner/165272350158100?v=app_4949752878

    is I remove the text/contents of the Sunshine tab, the Life Skills tab then shows

    Thoughts? ..workarounds?

  • Hi Snipe,
    I really love what you do.
    I was wondering if i could have the code for the slideshow that you pointed out in that ‘new moon’ pic.
    This is my progress so far with fbml.
    Please like my page
    http://www.facebook.com/reflectelectriccigarettes?v=app_4949752878&ref=ts

  • Kastlebrick

    figured it out… I didn’t realize the text that I copy/pasted has <div.. tags up the butt in it, which I left alone for formatting for linebreaks and such. ~then I had an epiphany, removed the div's an wallah.

  • This is a really useful resource. Thanks so much for the help. Used it here – http://www.facebook.com/jacobscreek.ireland?v=app_10531514314&ref=sgm

  • Kastlebrick

    K, so my tab an the nav’s are working…

    How do you/can you add a wrapper?

    • Kastlebrick

      the reason I asked was it didn’t work, using my external stylesheet.

      When I added..

      div.wrapper {
      position: relative;
      left: 0px;
      top: 0px;
      bottom: 0px;
      margin-left: auto;
      margin-right: auto;
      width: 513px;
      height: 100%;
      border-style:solid;
      border-color:#C2D4D2;
      background: url();
      background-color:#E6EEED;
      background-position:top;center;
      background-repeat: no-repeat;
      padding-top:0px;
      padding-bottom:50px;
      }

      ..it worked (obviously not in IE)

      so now I have

      div.wrapper {
      position: relative;
      left: 0px;
      top: 0px;
      bottom: 0px;
      margin-left: auto;
      margin-right: auto;
      width: 513px;
      height: 100%;
      border-style:solid;
      border-color:#C2D4D2;
      background: url();
      background-color:#E6EEED;
      background-position:top;center;
      background-repeat: no-repeat;
      padding-top:0px;
      padding-bottom:50px;
      }

      is there something I am missing as to why the wrapper wouldn’t work in my external stylesheet?

  • First of all, that was awesome. I think this tutorial may change my life so, for that, I thank you. Second, there is one small problem when I implement it all into my own fan page (http://www.facebook.com/OnlineEd?v=app_10442206389). It appears that, by default, every div is shown until you actually use one of my “click-to-hide” links at the top. Is there a way to sort of “auto-hide” all but 1 div when clicking on the main FBML tab?

    • The divs should all be hidden (except the default one) until their triggers are clicked on. My guess is that you’ve got an unclosed div tag somewhere, or you forgot to add the display: none; style attribute to the ones that need to be hidden by default.

      • That fixed it! I forgot style=”display:none”. Thanks again for the great tutorial and speedy help!

  • I hope this is not a silly question, but I got the tabs working correctly. They hide all the div2,3,4,5, but when I arrive at the page all the divs are visible.. How do I hide the when I arrive at the page directly? Thanks for any help?!

    http://www.facebook.com/pages/Hour-Sales/257410883123?v=app_4949752878

    • Make sure you’ve got the display:none CSS attribute set for the divs you want hidden by default.

      • MaRo

        I fixed ,but still the same problem as Stephen, it’s about css? My problem, I see First Tab (at botton part of Fisrt Tab is a Last Tab), when I click on Last Tab that is ok.
        Thank you

  • Maurizio

    Hi gorgeous…:)
    Do you happen to know how this guy manages to welcome someone by his name? http://www.facebook.com/MichaelJacksonTheKing0fPop
    Thanks!
    Maurizio

    • Sure, looks like they’re using Static FBML, and just using the fb:name FBML tags.

  • gianna

    .,hi but where will i paste the code??pls tell me step by step..

  • Angelica

    how can i put background image?

  • Cool…

  • Aielzer

    Hi, Do you know how to add custom font inside FBML page?

    Thanks,
    Ailene

    • Fonts work the same in FBML as they do in HTML, except you can’t use the more advanced Javascript libraries for font replacement. If it’s a web-safe font, you would use CSS to style. If it’s not a web-safe font, you would make it into an image.

  • Vignesh C

    Thanks for the excellent article. By any way can i set a style to show which tab is the current ‘active’ one …i use list based tabs and want to show which tab is currently active once its clicked to differentiate from other tabs

  • bookmarked this post on Facebook.com/Webatonic

  • jscrills

    can anyone sho wme how to display all my buttons in one single row from left to right? right now they’re stacking on eachother from top to bottom ;(

    • Pacmizzle

      You need to style it using CSS. Look up styling list with CSS.

  • Piano_reeves

    Hey,

    great gallery…but is there a way to fix the thumbnails?

    thanks

    • Fix the thumbnails?

  • Ryan

    I really like this but im having issues when trying to make images in the Catagoreys. :/
    IMG SRC will NOT work! Look here:
    http://dl.dropbox.com/u/8710634/FBML/DPADGENERATION/Welcome%20Tab/What%27sWrong.dib

  • robin

    you can use iframe and other html tags with “html tab”
    http://www.facebook.com/apps/application.php?id=196025883761078

  • Thank you so much! I have been working on this code for about a week! I haven’t been able to get the clicktohide to work and thanks to this article I was able to figure out what I was doing wrong! Thanks again!

  • Rahul

    Madam i need your help. I was making this in my facebook page, but the 3rd and 4th nav does not seem to work. I have looked at the codes so many times, but still i am not understanding where i did mistake. Can you help me out out madam. Where should i paste the codes …

  • Using the clicktotoggle code to show and reveal a , is there a way to make the hidden for the default state? Normally, the content is shown by default, but the clicktotoggle code would be a great addition if I could change that.

    • I’m not sure I understand the question. You use the CSS display attribute to hide the bits you dont want displayed by default. Only the default div should be visible on page load

  • good evening, can you help me how to but style in buttoms? ASAP

  • fredlacroix

    Hi, does the “clicktoshow/clicktohide” code work only with the app you linked at the top of your article? Because it interests me a lot but I can’t get to “install” this app on my page. When I click on “Go to app” button on the page, it brings me back to my facebook home page. I found some other FBML Static but I can’t make your code work. You have any ideas?

    Thx in advance!

  • fredlacroix

    Hi, does the “clicktoshow/clicktohide” code work only with the app you linked at the top of your article? Because it interests me a lot but I can’t get to “install” this app on my page. When I click on “Go to app” button on the page, it brings me back to my facebook home page. I found some other FBML Static but I can’t make your code work. You have any ideas?

    Thx in advance!

    • Hi there – yeah, Facebook is deprecating FBML so they don’t allow new tabs to be created with the Static FBML tab anymore. They’ve switched to an IFRAME model where pages are hosted on your own server and included via an IFRAME through Facebook. In order to create this kind of effect in the IFRAME tab, you’ll need to do it using regular javascript.

      • fredlacroix

        Thx for your reply, I appreciate!

      • This kind of answers my question, doesn’t it ;o). I was in the assumption that if I could upload it, it would work. My first attempt gave an upload error when entered directly on FB. Using iFramesWrapper gave zero error, and the screen was correctly build. But the links under the tab are not working… Now I come to think of it, no link (like read more…) is working. Therefor my doubts.

        Glad to hear from you anyway :o)

  • EdanGwapo

    the navigation that will appear in your given codes are only words.. how about the navigation buttons?

  • Jmarneusa

    Can anyone point me to where I can convert this so that it will work in the HTML iFrame tabs?  i took the time to design mine and it works great in FBML but then when I paste the code into an iFrame tab I lose the “clicktohide” and “clicktoshow” functionality. 

  • Shielamariename

    is there any ONLINE PHOTOSHOP CS3 or ANY VERSION?????..

    • 1) How does that have anything to do with anything covered in this article?
      2) Try googling for “online graphics editors”
      3) No, there isn’t. There is Photoshop Express which you can use online, but it’s only for photo editing really.

  • Hi,

    I know FBML is not in use anymore, but I just wanted to ask. The thing is that I found some great templates for Facebook, but they come with FBML pagecode, that needs to be uploaded. Images for the temp you install on your own webserver. I have also found that iFrameWrapper still supports both html AND FBML. So I tested this template. This template is also using multiple tabs, just like in your example. The main page is loaded ok, but strange things happen when I click one of the tabs.

    To make sure that it was not the template that was bugging me, I copied your example over into the iFrameWrapper app. Here the same happens. When I use your code:

    Home

    the href points to facebook.com/iFrameWrapper. Changing the href to:

    http://www.facebook.com/pages/Care4U-hypnoterapi-EFT-r%C3%B8ykfri-r%C3%B8ykeslutt-vektredusksjon-fobi/166688593390368?sk=app_197936773558886

    results in that I get an image (go to Facebook).

    Do you have any idea what is causing this?

    Many thanks in advance :o)

  • BigJayhawk

    First off, in scanning the internet for learning knowledge when I’m working on a project, I often end up on one of your pages when I continuously learn a lot.

    I do have a QUESTION though. I still use a very sophisticated “clicktoshow” / “clicktohide” page with tabs that resemble the old Facebook Tabs (all within one ACTUAL Facebook Tab). I was wondering if there is a way to have a link on an image within one tab refer to (and reveal) another tab (or subtab of another tab) — OR — does this only work by clicking on the tabs themselves?

    It looks like your projects above (with the photos, etc.) may be doing something along those lines.

    Again, thanks again for the inspiration. I would not be surprised if I have a big enough project one day to hire you for a project. (I ALMOST did once.)

  • Flan Lover

    Thanks for the code. 🙂

  • Cathy

    This is exactly waht I was looking for! Thanks