I’ve been asked several times recently if the FBJS examples on my Facebook fan page have a tutorial, so I figured I should probably post something. I hadn’t previously, since they were pretty basic examples, but Facebook is great at making stuff look way more complicated than it is, so if it helps demystify it a little, I’m happy to do my part.

You’ll want to look at the example fan page link here so you can see the effects that each one of these code snippets invokes. Without the corresponding page, it won’t really make much sense.

These examples will work FBML applications and Static FBML tabs.

IMPORTANT NOTE: FBJS onmouseover effects shown here will ONLY work after the user has clicked on a clickable element elsewhere on the page. Once the user has clicked on something else within the tab, all mouseover effects work properly for the duration of that page load. If the user reloads the tab, they have to click again before mouseovers will work.

It’s a restriction of Facebook, and there’s no way around it other than to use CSS workarounds when they’re available – a few are detailed at the bottom of the page. The onmouseover restriction may change as Facebook transitions over to iframe tabs, but as of this article, a click is required first.

I’ve never really understood exactly what “security” benefit Facebook thinks they’re gaining from this behavior, but it’s something to consider when you’re planning the interactive elements of your tabs.

I’ve included all of the examples here for continuity so that it’s easy to follow along, even though some of these effects are kinda stupid. Like the first few in particular. But keep reading – they do get more useful. And perhaps more importantly, they work great as an uncluttered introduction to the way the Animation() function works.

Also, please forgive the weird element names. I needed to make sure there were no naming conflicts, and since I added onto that page in a sort rambling way, I didn’t always make the names very intuitive. On the other hand, I didn’t want to risk changing things here for clarity and accidentally breaking something.

Just about all of the FBJS examples below use the Animation() function, and if you’re familiar at all with JavaScript libraries like jQuery, you’ll notice some similarities in how you can chain events and functions here as you can in jQuery. If you’re not familiar with jQuery, you’re missing out. I can pretty confidently say it’s changed the face of front-end web design over the past several years. Go learn it. You won’t be sorry.

Also keep in mind that if you’re using FBML for a static tab or an app, you may not need some of these FBJS transitions. Sometimes a simple clicktohide, clicktoshow or clicktotoggle will work. Although I haven’t written about those functions here on FBMHell.Com much, I have several in-depth tutorials that cover them on my main blog.

Simple Text Highlight and Flash Effect – onClick

These are pretty stupid. Not sure why anyone would use them. As you can see, each link has slightly different settings that specify what color the Animation() should transition the background to and from, and the third example chains a duration() onto the end before calling the go() trigger.

<a href="#">Highlight</a> the link background color. 
<br />
<a href="#">Flash</a> the background color.
<br />
<a href="#">Highlight</a> the background color.

Move Link – onClick

Another stupid example, but hopefully it gets you used to seeing how the Animation() function works.

<a href="#">Move Me!</a><br />
Each time you click on the link, it will move another 15 pixels.

Move Animation – onMouseover

Put your mouse over the links below – this action will trigger an animation in the opposite link. Take a look at what’s happening here. We’ve named two different link elements, me_1 and me_2. The onmouseover Animation() specifies the id of the opposite link, and then chains the actual animation behavior and locations onto the end.

<a href="#" id="me_1">Move the other on the right</a> 
<a href="#" id="me_2">Move the other on the left</a>

Content Hide (roll-up) with Animation – onClick

This animation hides content in a roll-up type of fashion. Notice the height and opacity set to 0 in the chained events? That’s because at the end of the transition, we want our content to be 0px high, and 0 opacity, so it does a fade-out as it’s rolling up.

<div style="overflow: hidden" id="container"> 
<img src="http://static.ak.facebook.com/images/wiki_logo.png" />
<br /> 
<a href="#">Hide this div</a>. 
</div>

Content Hiding – onClick

This animation hides content from the bottom and the right, closing in towards the upper left corner. Exact same concept as the hide+fade shown above, but with the additional to('width', '0px') chained in to collapse the width as well as the height.

<div id="textcontainer">Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet.<br /> 
<a href="#">Hide this div</a>. </div>

Animated Text Reveal (across and down) – onClick

You can also animate width and height to “auto” for when you want to completely show a div without having to calculate the specific dimensions of its parent:

<div id="about10"> Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet. </div> 
<a href="#">About Facebook</a>.

Animated Text Hide (across and down) – onClick

<div id="containerease"> Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet.<br /> <a href="#">Hide this div</a>. </div>

Animated Text Reveal (down)- onClick

There is a very slight difference between this animation and the one demonstrated above. Instead of the animation revealing across and down, this one reveals only down.

<div id="about11"> Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet. </div> 
<a href="#">About Facebook</a>.

Animated Text Hide (down)- onClick

This is the same style of animation as the reveal directly above, only it hides text. Once again, this simply uses the Animation() in an onclick, and then chains the specific height, animation style, duration, etc.

<div id="container10"> Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet.
<br /> 
<a href="#">Hide this div</a>. 
</div>

Checkpoint Callback “Storytelling” – onClick

<div id="container11" style="height: 130px">  
<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" align="right" style="padding-left: 10px"/>
This animation is pretty clever. It allows you to present one bit of content, for example, this paragraph.
<br /> 
<a href="#">Moving On...</a> 
</div>

<div id="next" style="height: 130px">
<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-2.jpg" align="left" style="padding-right: 10px"/>
And then once you click on the link, the original content animates out, and the new content animates in. 

<a href="#">Moving On...</a> 
</div>

<div id="nexter" style="height: 130px">
<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg" align="right" style="padding-left: 10px"/>
You could chain these as many times as you like, to create a sort of story-telling feel.  
<a href="#">Or Start over</a> 
</div>

Ease Functions – onClick

There are three default eases that come with the animation library: begin, end, and both. begin will start slow and end fast, end will start fast and end slow, and both will start and end slow, but will be very fast in the middle.

<div id="firsteasecontainer"> Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet.
<br />
<br /> 
Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet.
<br />
<br />
 Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet.
<br /> 
<a href="#">Hide this div</a>. 
</div>

Custom Ease Functions – onClick

This is an awkward ease, but it’s really only meant to demonstrate how you can write your own simple ease functions to call those in your Animation(). In this case, we create a custom function called bounceEase, add some math to create the (awkward) bounce, and specify bounceEase in the ease() option of the chaining.

<div id="easecontainer">
Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet.
<br /> 
<a href="#">Hide this div</a>. 
</div> 
 
function bounceEase(p) { 
if (p &lt;= 0.6) { 
return Math.pow(p * 5 / 3, 2); 
} else { 
return Math.pow((p - 0.8) * 5, 2) * 0.4 + 0.6 } 
} 

FBJS Image Carousel

I’m actually skipping that one in this list, since I have a whole tutorial dedicated just to the FBJS carousel already. Click here to check it out.

FBJS Image Swap

This doesn’t seem to be working anymore – I believe they changed something in the FBML. No biggie, since the same effect can be done more reliably using CSS. Since CSS isn’t FBJS, you don’t have the same restriction on mouseover events that was discussed at the beginning of this post, where the user has to click on some clickable element on the tab before mouseover events will fire. In general, if you can accomplish something via CSS instead o FBJS, do it. šŸ™‚

The last two code snippets are strictly CSS and not FBJS at all, but I’m including them so that the demo effects on the Facebook fan page match up with the snippets here.

CSS Image Swap

div.nav {
height: 129px;
width: 129px;
margin:0;
padding:0;
background-image:url("http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg");
}

div.nav a, div.nav a:link, div.nav a:visited {
display:block;
}

div.nav img {
width:100%;
height:100%;
border:0;
}

div.nav a:hover img {
visibility:hidden;
}


<div class="nav">
<a href="#">
<img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" alt="" />
</a>
</div>

CSS Text Swap

#set_of_links {
	position:relative;
	padding:9px;
	border:1px dotted #999;
	background-color:#fff;
	margin-bottom:20px
}
#set_of_links a {
	display:inline;
	padding:2px 9px 2px 9px;
	text-decoration:none;
	color:maroon;
	background:#ececec
}
#set_of_links a:hover {
	background:white;
	text-decoration:none
}
#set_of_links a span {
	display:none
}
#set_of_links a:hover span {
	display:inline;
	position:absolute;
	top:0;
	left:90px;
	padding:5px 15px 5px 0
}


<div id="set_of_links">
<a href=";">Snipe.Net
<span><strong>http://www.snipe.net</strong><br />This is the first site<br />It is my blog.</span>
</a><br />
<a href=";">FBMHell
<span><strong>http://www.fbmhell.com</strong><br />This is this site!</span>
</a><br />
<a href=";">SocialMediaDouchebag
<span><strong>http://www.socialmediadouchebag.net</strong><br />This is a site I made because I thought it was funny.</span>
</a><br />
<a href=";">GeekHaiku
<span><strong>http://www.geekhaiku.com</strong><br />This is one of my haiku websites.</span>
</a>
</div>

Advertisement

Themeforest

Advertisement

468x60_makemoney
facebook-fan-page
Previous post

Facebook Places Bonks Fan Page Layout

security-keynote.001-001
Next post

Security Keynote Download

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

  • Info

    Thanks for this. I am appreciative of you and your blogs.

  • Gulshi

    Hell Awesome!!
    LOVE you Snipe..
    <3 Mwahh..:p
    Neva seen these kinda Awesome posts on FBML…:D
    The only thing i am not able to figure out since past few months is that how to use CSS for Mouseover Buttons but i guess i'll be able to do it soon..
    If u can do me a favour then plz temme the code for the css buttons u used..
    Thanxx!!

  • Dan

    How would I go about placing multiple carousels on a single page?

    BTW your tutorials are amazing!

  • Anonymous

    Wow thanks!! Lots of GREAT info!

  • Anonymous

    First of all….GREAT tutorials you have here šŸ™‚

    I have a question regarding the code for the “storytelling” feature. How can you adjust the size of the second, third, etc. slides? I’ve been tinkering around with this and noticed that if you increase the 130px size for the first slide, it will get larger; however, if you do this to the second slide, it doesn’t change.

    Obviously, you can put as many tags in the text area to increase the container size, along with adding CSS style at the top of the document to control the text and background colors, but there must be a cleaner, less confusing way.

    And, I could just be missing something here. Basically, I’d like to have all of the slides/containers be the same size before/after transitions, regardless of how much content is in each. What I’m trying to do is have a graphic at the top, the storytelling section in the middle, and another section at the bottom (only the middle section changes). I get a bit confused because there is styling within the code already; whereas I’m used to placing an image down first and then creating tags to place images, music, videos, text, forms, etc.

    I get sooooo frustrated when I see pages like VitaminWater’s and wonder how in the world they do it. I need more patience since I’m a designer and not a coder šŸ™‚

  • Sascha

    GREAT TUTS!

    I can hide the text with oneclick, but how i can show the text with oneclick? šŸ˜‰

    • You could use clicktohide and clicktoshow to show/hide text with one click

  • Thank you for taking the time to put all this info out there. My Facebook business page looks great- all because of you!

    • Glad to help, Steve!

  • wow, its awesome. thanks .

  • chris

    great tutorials! But I am having one problem, similar to Sascha’s. I used your click to reveal code on a div that is display:none when you go to the page, and it works great. Then I used your click to hide to hide the div once finished reading it, and it hides, which is good. But if I wanted to show that div again with the click to reveal link, it expands, but the fbml div content is missing, so it looks like a big white space was revealed. Any suggestions?

  • R Trgy

    Perfect, Great !!

  • Mrahmadaawais

    great lovin it