Search code examples
facebooksharefacebook-opengraphanimated-gifgiphy

Metas open graph to build share with animated gif


I'm trying to build a page to share animated gifs just like Giphy do.

If you share this link (http://giphy.com/gifs/mQpZtX0gKDESA) you see that the share image becomes playable. It's important to note that I don't want to share the direct link to the gif. I need to share my page with a gif and the share needs to show a playable gif.

I already tried to copy all the meta tags Giphy use, but no lucky.

If anyone knows anything about this, i'll really appreciate.

Thanks for your help.


Solution

  • At the current time, it's still possible to display the GIF animation like a video, using an .SWF container. If you make such Flash container, you can use it to display the animated GIF.

    The container should be parametrized, so you don't hardcode the image link. Read the parameter in Flash, load the GIF image and display it.

    When you're done with Flash, open the script link (similar to shown below) in a browser - it should display the animated image.

    http://website.com/container.swf?url=http://website.com/animated.gif

    Finally, fill these metatags for Facebook in your HTML:

    <meta property="og:type" content="movie">
    <meta property="og:video" content="http://website.com/container.swf?url=http://website.com/animated.gif" />
    <meta property="og:video:secure_url" content="https://website.com/container.swf?url=http://website.com/animated.gif" />
    <meta property="og:image" content="http://website.com/front.jpg"/>
    <meta property="og:image:width" content="640" />
    <meta property="og:image:height" content="480" />
    <meta property="og:video:width" content="640" />
    <meta property="og:video:height" content="480" />
    <meta property="og:video:type" content="application/x-shockwave-flash" />