Animated Gifs on Facebook on the client side with Userscript

Before getting to this client side animated GIFs that only you can see, or your friends who has this greasemonkey script(below in this article) enabled, let’s see how people are posting animated GIFs on their Facebook wall at the moment,

How people post Animated GIFS on their Facebook wall

There are a couple of Facebook apps that lets you upload animated GIFs picture exploiting an rendering bug on Facebook. That is because you can’t upload animated GIFs and have it animated on your wall. The animated GIFs when you upload will get converted to a static plain JPG image.

One such app, that lets you request for an image upload on that app’s page and then people manually upload it as an Mp3 file. This MP3 file since is hosted on the Facebook and when you upload it as an 398×398 image on the wall, this image will be animated, and the reason they choose MP3 (from my reasoning) is that it is the MP3 file is not static and is a music files with varying bit rate, maybe the rendering engine has a bug that process the animated gifs with a file extension MP3 as the regular animated gifs that is animated. The app is Animated picture. The instruction for upload is shown in the image below,

animated picture app facebook instructions

As you can see, an application developer working at Facebook is behind this app(below on the image above), so you can be assured that you are not violating Facebook’s terms of service.

Once you request for an image upload as shown on the image bottom, they will manually upload the image and get you a Facebook hosted url, that you can post it to your wall from the upload page from this app. You can also use the existing image from the app welcome screen to post it on your wall, that looks like below,

animated picture images on your facebook wall

Ofcourse the image of a cat laughing above is animated when displayed.

So, that’s how animated GIFs are being uploaded to the facebook and it is a server side, meaning that it resides on server, and everyone can see the animated GIFs which is what almost everyone wants.

Animated GIFs on a client side with Userscript

But the purpose of the article is to show you how to enable animated gifs on the client side, meaning on your browser. This is done with a greasemonkey script. The script works by setting the regular GIFs image link that is hosted somewhere else to the image’s source attribute that is rendered as a plain JPEG on the Facebook wall. So you upload a GIF image, which will not be animated, instead Facebook changes it to a JPG image. You then add the original GIF link that is animated on to the comment field of the image you uploaded.

So your friends cant see this, unless they have the greasemonkey on firefox or tampermonkey on chrome or violent money on opera installed and have this script (which I’ll talk about in a bit) installed.

You may think it’s silly or a waste of your time, so I will show a video (3 min long) of it quickly to help you decide if it’s a worth while attempt of joy.

So, as you can see from  the video, anyone with that userscript installed, can see it animated with a few changes to the script. It may not be interesting if you don’t like to dabble with the installation of the userscript engine like greasemonkey addon for firefox or tampermonkey extension for chrome or violentmonkey addon for opera. But this is just an idea I wanted to share that you can enjoy it with your friends on Facebook if you are willing to go a little extra step.

So the script that you want to add to your user script engine is,

I know the script can be improved to automatically recognize all the images on your wall and let you choose which one, and as well as let you choose the gifs links. If you have more suggestions, remarks please reply in the comments section. Thanks and I hope atleast one person will see this as not so silly attempt.

Leave a Reply

Your email address will not be published. Required fields are marked *