A simple method to make GIFs animate on Facebook

When someone links directly to an animated GIF on Facebook, Facebook shows only the first frame of the GIF, and a link, which opens in a new window.

Of course, we all want to just see the animation, preferably without having to click anything.

http://giphy.com/ took the approach of converting them to videos. To me this is offensive, as it is a computationally expensive solution to a problem that Facebook is causing, which could be solved in less than an hour with about 17 lines of code.

Here’s a solution I built in less than an hour in 17 lines of code (time includes: coding, repeated testing/debugging, conversion to bookmarklet, and creating this post.)

HOW TO USE IT

  1. Drag the button above to the Bookmarks Bar of your web browser.
  2. Visit https://www.facebook.com/selfxss and tick the box to grant permission to paste your own scripts, which is what that button does. Read the security warning. Don’t paste scripts from strangers. I’m not a stranger. If you don’t trust me have an expert check the code in the bookmarklet button, it’s all open.
  3. Browse Facebook, click the button and all GIFs will be displayed.

IMPORTANT STUFF

  • Works perfectly on own wall (where I tested it), on FB Home it may show the GIF next to the still image. Deal with it!
  • While it’s definitely safe, there’s a slim chance it will corrupt the Facebook page and you’ll lose your place, forcing you to refresh. Deal with it!
  • I only tested links DIRECTLY to .gif URLs pasted into a status update/post, and then painstakenly took the time to also make it work when detecting a GIF in a comment. It eats the rest of the comment though. Deal with it!
  • So, this means it will not work if the link someone posts is to a PAGE that CONTAINS the gif. Sorry, that’s way more complicated. I’d have to go to the page myself and figure out the GIF url, all inside a little bookmarklet with javascript. Not bloody likely. Deal with it!

sloth


and then
PARTYHARD4



I think the code is beautiful so I want to actually show it to you here:

javascript:var divs = document.getElementsByTagName(‘div’);for (var i=0;i<divs.length;i++) {var d=divs[i].innerHTML;if (d.match(/^http.*?\.gif$/i)) {divs[i].parentNode.parentNode.parentNode.parentNode.innerHTML = ‘<img src=\”+ d + ‘\’>’;}};var spans = document.getElementsByTagName(‘span’);for (var i=0;i<spans.length;i++) {var s=spans[i].innerHTML;if (!(s.match(/ajax\/hovercard\//))) {if (m=s.match(/http.*?\.gif/)) {spans[i].innerHTML = ‘<br/><img src=\”+ m[0] + ‘\’/>’;}}}; return(false);

Note that the code displayed is for appreciation only, character conversion issues will prevent its use, if you’re trying to copy it somewhere and failing, please read from the start and use the bookmarklet. If you really want to grab the code, do the bookmarklet anyway and then edit the bookmarklet and you will see usable code there.