How does Giphy share gifs to facebook? (2015, NOT FLASH ANYMORE)

Question

If I paste the following URL into Facebook I can share an animated gif. It\'s not a movie and not flash, Facebook now supports gifs without those workarounds. I can click it

Answer 1

Product Manager for the Giphy API team here. No special treatment; I wish--filing bugs with Facebook takes forever.

The Flash tag is legacy and we should clean it up. FB now does support GIFs and the answer by vegashacker is essentially correct.

Answer 2

Actually, I looked at their source code, and I am 99% sure that they are actually showing a video. For this gif, there are a number of open graph meta tags associated with the page:

 <meta property="og:type" content="video">
 <meta property="og:image" content="http://media.giphy.com/media/H2ANZTOXVepbO/giphy-facebook_s.jpg">
 <meta property="og:image:width" content="480">
 <meta property="og:image:height" content="270">
 <meta property="og:video" content="http://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&amp;gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&amp;giphy_height=297&amp;video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&amp;giphyWidth=400&amp;path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&amp;destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&amp;giphyHeight=297&amp;gif_id=H2ANZTOXVepbO&amp;mode=embed&amp;giphy_width=400">
 <meta property="og:video:secure_url" content="https://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&amp;gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&amp;giphy_height=297&amp;video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&amp;giphyWidth=400&amp;path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&amp;destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&amp;giphyHeight=297&amp;gif_id=H2ANZTOXVepbO&amp;mode=embed&amp;giphy_width=400">
 <meta property="og:video:type" content="application/x-shockwave-flash">
 <meta property="og:video:width" content="470">
 <meta property="og:video:height" content="297">

and most of them are video tags. These tags are associated with the page and not a gif. If you share the straight gif image, then it will not animate.

To confirm this, if you plug the page into the Facebook URL debugger, then this can be confirmed. There is no mystery, this is shared as a flash video.

Answer 3

I was able to create an .html file which, when the link is pasted as a status, displays as an animating (and looping) GIF in the Facebook feed. In my html page, I use the following meta tags in the header:

<meta property="og:site_name"   content="Site Name">
<meta property="og:url"         content="url to GIF on web">
<meta property="og:title"       content="Title of GIF page">
<meta property="og:description" content="Some description">
<meta property="og:type"        content="video.other">
<meta property="og:image"       content="Same as og:url above">
<meta property="og:image:width"  content="800">
<meta property="og:image:height" content="400">

The thing that gave me trouble when I was working on this was the og:url property. It should point directly to the GIF, not the .html file that these meta tags are a part of. Also, og:image should be the same as og:url.

I didn't test if the width and height properties are required.

Answer 4

An important point which answers have missed, how to make GIF image (if clicked) redirects to the article which belongs to instead of the GIF link itself?

The important parts are:

<meta property="og:image"  content="url/to/image.gif">
<meta property="og:url"    content="url/to/image.gif">
<meta property="og:url"    content="url/to/article">

Add two og:url tags. First one should be the same as og:image pointing to the GIF image URL. Second one should be the URL to the article.

Answer 5

I have been working on this for a while with Facebook debugger and found how to post swf but just today I also successfully posted my animated gif.

I simply pasted my link https://www.example.com/my.gif into Facebook debugger and it said could not find URL but displayed fine giving app id number and then I went ahead and posted in my timeline for all to see :) So no html or tags to achieve that but simply a secure link to my gif file on my server.

Never did I work out how to achieve it via html embedded!