web technology is a way of life
Update: Now that Facebook allows Tabs to be <iframe>s you can use animated gifs in the iframe without the need for the old school and now defunct FBML trick described below. Check out this example tab.
Ever tried to put an animated GIF on a Facebook tab? They work fine in the left sidebar boxes but unfortunately are cached by Facebook and served from their CDN. This causes the image’s animation features to be lost. However calling a remote stylesheet will allow the images linked from that sheet to not be cached and thus pull from your own servers directly and animate properly. Check out my example of an animated gif on facebook.
Code for your FBML tab:
<link href="http://example.com/stylesheet.css" />
<div id="Ani">animated gif from stylesheet</div>
Code for your Stylesheet:
#Ani {
background: white url(http://example.com/animated.gif) no-repeat;
width: 100px;
height: 100px;
display: block;
text-indent: -5000px;
}
7 Responses for "Animated GIFs on Facebook Tabs"
Can you specify what I need to do in order to have this tab?
@Shir: After you create your Fan page you need to add an FBML page (go here http://bit.ly/czjgXh and click Add to Page) then you can add the above code.
Thanks :) … you saved me :)
Mate, add a flattr icon to your site I woulda given you a few pennies for posting this one :)
Thanks a lot for sharing this Joel :)
Joel, thanks for posting this – using the CSS b/g image is a great idea. I have tried other workarounds before, but this is the first one that has actually worked!
My question is, now that I have my animation displaying correctly on the FBML tab, how do I then post it onto my friends’ pages?
Maybe I am being thick but just can’t work it out.
If you can help then I will gladly give a credit and a link to your page.
Thanks, Clive
@clive: Facebook no longer allows animated images on wall posts, any that are currently up were only allowed in during a small time period due to a bug. And now that Facebook took away boxes from profile pages you are no longer allowed to use that space either. Enjoy making fun tabs :)