Categories
Latest
Popular

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.

[sourcecode lang=’html’]
Home
Demo Tab
Locations

[/sourcecode]

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.

[sourcecode lang=’html’]


Home
Demo Tab
Locations

[/sourcecode]

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.

  • Maggie

    great info! I also just found the info with tips for mac users. I really appreciate this – you definitely have a new follower!

  • RevChas

    Didn't read the article. Actually, I couldn't read the article, I was busy trying to laugh yogurt out my nose at your picture. Man am I glad there's a whole continent between here and there.

  • Pfffffffft. πŸ˜›

  • nice one dude! it helped me alot! one follower here too πŸ˜€

  • badass…. I am not a big huge fan of Facebook, but this helped….. besides, after I read the “tea tastes like ass” comment, I now have humor to go with geekness

  • meghan

    Hey, I have a question about the static FBML app that I've not found an answer to yet on the facebook developer forms and I was hoping you could shed some light. I put in a facebook comment box on my page's static fbml tab, which works great but I'm looking for a way to control moderation as an admin of the page. I tried to wrap it in an if statement like so:

    <fb:if-is-user uid=”XXXX”>
    <fb:comments xid=”XXXXf” showform=”true” publish_feed=”true” candelete=”true”/>
    <fb:else> <fb:comments xid=”XXXX”
    showform=”true” publish_feed=”true” candelete=”false”/>
    </fb:else>
    </fb:if-is-user>

    But then the comments don't show up at all, can you tell me where I went wrong or if it's possible to do this in the static FBML?

    Thanks

    • I have the same problem… have you found a solution yet? I can not delete comments!

      • I believe the fb:comments tag is being deprecated very soon.

  • Adam

    This post is awesome and has been a great help. I have a question though. How can I change the font of the text in the buttons? Thanks for the help.

  • Hi Adam, with Facebook, you do all style changing using CSS.

  • Adam

    Thanks for the reply. I am a newbie and unsure of where and how to add the new font. Any more help in the right direction would be much appreciated.

  • This should help: http://tinyurl.com/37fyn9u πŸ˜‰

  • Adam

    Haha…thanks. Sorry for the simple question. Keep up the good work.

  • Hey , i am interested in the mock ajax app… i have the ajax request working, and i downloaded the code that you posted the link for, but it seems to be a different version of the facebook.php. Ive had some problems with the authentication aspect of my app. I like how simply you mock ajax app authenticates and works inside the application tab. I've read as many posts here as i could last night and cant get pash what version of the php class you use in that app. A download link to the actual version of that class would be super awesome! Can you please help me with that. I am going crazy trying to get the simple authentication process happening so i can get the users first name in my application tab smoothly. Any help you can give my is appreciated. Thanks again.

  • I'm not sure what you're referring to here. There is no application php code or class. The code in this tutorial is all there is. This demo doesn't require any authentication, and if what you'e doing requires authentication, you need to be creating an actual app, not using the static FBML applicaiton created by Facebook.

  • i mean the line i your code : require('client/facebook.php); (the facebook.php sdk version). Sorry for my vague reference… i have an app created… on the profile ( http://www.facebook.com/profile.php?id=10000098…) but also cant get it on the page (http://www.facebook.com/profile.php?id=10000098…) the “churches” tab is a static FBML box… i want to add the one from the profile to the page tabs. Thanks for your help!! Steve

  • There is no php include in this tutorial. This tutorial deals only with Static FBML, which does not require any server-side code at all.

    The client/facebook.php include call on whatever tutorial you were looking at refers to the official Facebook client library, which is downloadable from Facebook.

    Please see Facebook's documentation on where to download the nost recent client libraries:
    http://wiki.developers.facebook.com/index.php/U
    http://wiki.developers.facebook.com/index.php/G

    I don't understand your problem with tabs.

  • i guess i am actually referring to the comment thread (http://www.snipe.net/2009/10/upcoming-changes-t…) from the post (http://www.snipe.net/2009/10/upcoming-changes-t…). There you linked to an example zip file of the mock ajax app… in there you use a require for the facebook .php class (using the SDK). the current version of the sdk does not have the functions require_login(); and does not allow for the code return $facebook->api_client->users_getLoggedInUser();” so i assumed it was from an older version of the sdk. I just wondered if you could zip me the facebook.php you used for that app and any required files for it to work. i have the zip that was referenced in the thread i mentioned above. I am really impressed by your facebook abilities. I have only been dealing with this for a few months… and its been a rough few months with all the changes FB has made. I figured out the TAB thing… now im just trying to see if there is also anyway to dynamically change the tab name based on a page id. Thanks for everything. Steve.

  • i guess i am actually referring to the comment thread (http://www.snipe.net/2009/10/upcoming-changes-t…) from the post (http://www.snipe.net/2009/10/upcoming-changes-t…). There you linked to an example zip file of the mock ajax app… in there you use a require for the facebook .php class (using the SDK). the current version of the sdk does not have the functions require_login(); and does not allow for the code return $facebook->api_client->users_getLoggedInUser();” so i assumed it was from an older version of the sdk. I just wondered if you could zip me the facebook.php you used for that app and any required files for it to work. i have the zip that was referenced in the thread i mentioned above. I am really impressed by your facebook abilities. I have only been dealing with this for a few months… and its been a rough few months with all the changes FB has made. I figured out the TAB thing… now im just trying to see if there is also anyway to dynamically change the tab name based on a page id. Thanks for everything. Steve.

  • In the future, please try to comment on the approriate post, otherwise you could end up confusing some new people who think they need an SDK to execute the functionality covered in this tutorial.

    It is generally unwise to use an older version of the PHP SDK, since they chnage the API opften, and lots of things will break.

    You cannot fetch the viewing user's FBID anymore in a tab, if that's what you're trying to do. They took that away a while ago.

    If you're using Static FBML as th app and just want FBML/FBJS with no server side interaction, you would just add the Static FBML app and name each tab as you create the static FBML boxes. A standard application doesn't let you rename the tab based on where it's installed.

  • If you need to get the FBID of the user looking at an application tab, you should be able to use $_REQUEST['fb_sig_profile_id'];

  • ariisom

    this is exactly what i was looking for in a loooong time. You are awesome!
    Thank you very much for this tutorial!

  • Michael

    Hi, very nice tutorial, brings a lot of light to the beginners of Facebook's marketing. I wonder, whether you could answer one question: I am trying to use FBML for hotel page, where I would like to have booking engine.
    It is usually Java Script, and I have read, that it is not going to work with Facebook. Any idea, how I could overcome it?
    Thanks again, and greetings from Poland

    • |6e3kerS|

      Michael,
      If you need a form script and to be integrate in the FBML, i suggest you go to http://www.jotform.com

      Trust me that is the easiest form builder i’ve ever used…customize your own booking template and copy the script then paste it at the FBML edit section. The form even have paypal integration so that you can tell your client to pay in your Facebook Fan Page.

      PS: I do not represent http://www.jotform.com and the link doesn’t have any affiliate code. Just try to help!

  • Hey there,

    Thanks again for all of your help. That said, I've used a lot of your code and ideas from your posts – it has been awesome, and I can't thank you enough. I cannot however find ANYWHERE the solution to my present problem. I'm trying to add a simple twitter feed to my page. I thought this would have been the easiest thing to do, but no.. nope, not at all. Any help would be appreciated.

    Thanks again,

  • I read somewhere that static fbml and <style type=”text/css”> doesn't work in IE. This isn't true?

  • Hope, it works in IE, but as always often requires extra work to get it to look right.

    • Would this require to use an external style sheet? I just ran into this problem..

    • Would this require an external style sheet? I just ran into this problem with the .awesome buttons

      • Depends on the browser, and the day of the week. Facebook’s IE8 support keeps changing – one day they grok external style sheets, the next day they don’t. One day inline style sheets work fine, the next day they don’t. Best bet might be to use both, honestly.

  • If you don't want to (o don't know how to) make a FB application that reads from the twitter API, you can use one of these badges. Normal JS won't work on FBML boxes, but a few image/html/flash based options are listed. http://mashable.com/2009/03/30/twitter-badges/

  • Tyson

    Nice, I always wondered if their was a FBML code for show/hide

  • Tyson

    any ideas on making the nav links show as active when on the correlating tab?

  • I don't think there's a way to natively do that – but you can accomplish the same thing by nesting the nav inside the divs you're hiding and showing.

    So div1:
    ————————
    [nav link 1 selected] [nav link 2] [nav link 3]

    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

    div3:
    ————————
    [nav link 1] [nav link 2 selected] [nav link 3]

    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

    div3:
    ————————
    [nav link 1] [nav link 2] [nav link 3 selected]

    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    ————————

    You can see an example here:

    http://www.facebook.com/GVIfans?v=app_328187193031

  • BusinessContent

    This is the best example on of a micro site in FBML. The only thing I'd add is to possibly wrap the whole thing in a 530px div so it doesn't break layout when and if FB makes that change. It's supposed to be July now from what I've read.

  • Evodrink

    Alright, I owe you a beer!! Nice info and I used it on my fb page. Got most if the hard stuff working but ran into a snag on my 4th nav button. The info shows up on the first screen when you land. If you click on the 4th button – it is there also. Then when you click on the home button again, it goes away. I can't seem to find the little issue that is making it show up on the first page once you land on it.
    http://www.facebook.com/pages/Health-and-Wealth
    Any ideas on what I am missing?

  • No way to tell by looking at the finished page, since FB rewrites it's mock ajax before it gets to the browser. Can you paste your code into pastebin.com, and I'll try to take a look?

  • Evodrink

    http://pastebin.com/pdcRY1HC
    Once I get this tab done I have 1 more then I should be golden!!!

  • Evodrink

    I found IT!!! Sorry, I had to walk away for a little while. When I came back and started reading again it made sense. Hope you didn't spend any time on it. Appears the few words: <style=display: none> is quite an important phrase.
    Thanks again. It has worked wonders for my page

  • Hi Snipe.net, what's up? I'm just wondering. Do you have a tutorial or blog about creating Twitter apps based on oAuth? Just wondering. Anyways, nice post about the WordPress 3.0 you really rock!

  • Is it possible to use image mapping for the buttons with this?

  • never mind…CSS Sprites should do the trick.

  • Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources - Smashing Magazine()

  • Pingback: Designing A Facebook Fan Page: Showcases, Tutorials, Resources « WebbyTuts | Resouces for Designers()

  • Pingback: TG Designer » Designing A Facebook Fan Page: Showcases, Tutorials, Resources()

  • Ddellalibera

    Hi there!
    Is it possible to hide all at once without writting every single nav id? I have like 50 nested navs…
    I have no idea about programing, so it should be done in fbml…
    Thanks in advance!
    DamiΓ‘n, from BA, Argentina πŸ™‚

  • I'm not sure I understand. Why not just put all 50 inside one bigger one and just hide the bigger one?

  • Pingback: Smashing Magazine: Tim’s shared items in Google Reader: Designing A Facebook Fan Page: Showcases, Tutorials, Resources | XtremelySocial.com()

  • Tom

    Hey,

    See this page –> http://www.facebook.com/PagesDesign

    Really want to know how this geezer put the “like” button on this page, and also allowed people to comment on it in that box.

    Any ideas? Cheers.

  • I believe that's the version of the like button that just likes “a piece of content”, not an app or a fan page. You can generate that code here:
    http://developers.facebook.com/docs/reference/p

    So if you were using the XFBML version, it would look like:

    <fb:like href=”http://www.facebook.com/yourpage” show_faces=”false”></fb:like>

  • I believe that's the version of the like button that just likes “a piece of content”, not an app or a fan page. You can generate that code here:
    http://developers.facebook.com/docs/reference/p

    So if you were using the XFBML version, it would look like:

    <fb:like href=”http://www.facebook.com/yourpage” show_faces=”false”></fb:like>

  • lsa

    Can you explain please how create 'Latest works' gallery like on http://www.facebook.com/PagesDesign page? Also is it possible after click to image see big image on the top of thumbs? If yes, how i can do it?

    Thank you!

  • The carousel is done in javascript. It's possible to open the image in a modal box when clicked, but it requires some prety complex javascript to make it work. I'll try to post something on FBMHell.Com about it later.

  • Hi!! Alison how you doing?

    I have been working on your code for a few days. i am 95% happy with it so i wanted to show you. It has the tag, some anchors, forms from Jot form and an extra subnav.

    http://www.facebook.com/arrowshealthcarejobs

    Today i woke up with the CSS not working at all in IE8. Got any quick fix-advice for that??

    I am heading right now to my websites to put links to you! And as soon as i finish with the pages and present them internally I get some money your way to shopw appreciation. Cool?

    many many thanks, you are superawesome!

  • BusinessContent

    Have you noticed that the uber cool css buttons are no longer displaying in IE8? Any ideas? Or do I need to write an IE style sheet and use regular buttons?

  • BusinessContent

    OK So I found it again….was on your fB page then left and returned and they weren't showing. Took a screen shot so you could see, is there somewhere I can post or send?

  • Anonymous

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

  • You cannot.

  • Anonymous

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

  • 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.

  • 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??

  • 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

  • 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!

  • 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…

  • 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. πŸ™

  • 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!

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

  • 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,

    • 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.

  • David T

    Great article – very useful, taught me heaps! Thanks. πŸ™‚

  • 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!

    • 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;”

  • 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

  • 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.

    • 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.

  • JoΓ£o

    Hi, I need a little help with a code of clicktoshow/clicktohide.
    Operador de Mesa

    How can i fix this clicktohide to really hide a tab and not open another?

    Read more: http://www.hyperarts.com/blog/facebook-static-fbml-troubleshooting-guide-why-code-doesnt-work/#ixzz1B4T4PQ3M

  • 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?

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

  • matt12345

    Do you have any experience using I wanted to add a twitter feed into my FBML page using an iframe and it does not seem to work. Couldn’t find much help or clarification in my searches

  • Percy_2020

    very good help, a question please!!

    can I’m connect FBML to SQL. I’m want read something fron me database to me facebook page.

    Please help!!
    percy
    percy_2020@live.se

    • 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

        • Yes, you would iframe it in.

  • 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.

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

  • 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

    • JhayneLLe30

      same here..

    • Ayessa Mae Sevilla

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

      • 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.

  • 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.