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.