How to display gif thumbnail while sharing the webpage in Facebook

When we try to share some page or url in facebook; facebook fetches some data from that page to display as a thumbnail and description in your facebook wall. However, if you have any gif or animated image in that page, facebook will display it as a static one with no animation.

In this post I will show you, how you can modify your page html by which facebook will display the original animated picture instead of the converting it to a static one.

Simple og meta for facebook

The meta tags above helps you to display right contents and image snippet if one tries to share the webpage in facebook. This also converts the image in a static one.

Show animated image with og meta

As you can see, here I’ve replaced the “og:url” content with the url of my gif image. Doing this will display an animated image if one shares the webpage in facebook. To test it you can share the page https://metalshan.github.io/gif-page-share/index.html in your facebook.

However, the disadvantage with this approach is, it will convert the entire post with the gif. So one can not land in your website by clicking on the thumbnail gif. He actually have to click on the page url which will be there with the image. This approach is no official approach; but a hack or workaround to achieve our goal.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Neat! Just what I was looking for. Thank you.

  • Florian

    I can’t seem to replicate this. If I share your page it works. But from mine, all I get is a white image…

    I have tried setting all of these simultaneously: og:description, og:image, og:image:url, og:image:width, og:image:height, og:url (in addition to article:author, article:tag, article:published_time, og:site_name, og:title) and having a application/ld+json script of type “NewsArticle” that includes an image as well (.gif).

    And I have tried to strip it all down to the bare minimum that you have in your example.

    And none worked…

    • Paul Shan

      Can you share your url?

    • Florian

      I actually ended up making it work though I have not been able to find where the problem was… I just re-wrote the whole meta section. Point is, it works now, but I’d feel safer knowing where the issue came from!
      http://whiteboard-comics.com/

    • Paul Shan

      could have been a typo.

  • Sebastien Carbain

    Hello Paul,

    It doesn’t seem to be working anymore. I’ve tried many things to display only the GIF and not the og:title and og:description : displaying it as a video, serving directly the gif URL, providing every og meta but nothing works. Even Giphy’s sharing is broken and showing a static preview of the GIF.
    I’ve searched for a changelog on Facebook about this but nothing.

    I just realised that when sharing Youtube videos the preview is the same. I’m thinking GIF doesn’t work anymore because Facebook is treating it like a video, not a picture, and as Facebook wants people to upload videos directly to it, it makes sense they would degrade the user interaction with external videos..

    Do you have any idea that would make sharing GIF (or external MP4) play on Facebook ? Perhaps we could upload the video/gif as an object to Facebook and then link somehow the og:url to it. That way when the page is shared, Facebook would automatically play the video previously created. I’m thinking out loud so I’m really not sure if it’s possible but if you have any comment or suggestions it’d be really appreciated !

    Thanks

    • Paul Shan

      Are you talking about autoplay?
      GIF still works on facebook. Share this in your fb wall https://metalshan.github.io/gif-page-share/index.html
      You will find a GIF thumbnail. Clicking on which will make it play. But it won’t autoplay without interaction. It never did.