Giphy 如何将 gif 分享到 facebook？（2015，不再闪光）答案

【问题标题】：How does Giphy share gifs to facebook? (2015, NOT FLASH ANYMORE)Giphy 如何将 gif 分享到 facebook？（2015，不再闪光）
【发布时间】：2015-09-21 20:47:41
【问题描述】：

如果我将以下 URL 粘贴到 Facebook，我可以分享一个动画 gif。这不是电影，也不是 Flash，Facebook now supports gifs 没有这些解决方法。我可以点击它来暂停，它会在暂停时以圆圈显示“GIF”。

http://giphy.com/gifs/hot-funny-cartoon-fBEDuhnVCiP16

无论我从该页面的元标记中复制什么，我都无法让 Facebook 分享我自己页面的动画 gif。我什至甚至复制了该页面的整个代码并自己提供（更改 <link rel="canonical" 和 <meta property="og:url" 以匹配我的网址）。

Open Graph Object Debugger 为真实的 Giphy 页面和我的副本提供了相同的结果。有趣的是，Object Debugger 中的预览是两个页面的旧式 Flash 电影。但是，当我将 Giphy 网址粘贴到我的 Facebook 时，它会显示 gif - 我的 relica 会显示 Flash。

Giphy 是否从 Facebook 获得特殊待遇？我需要做一些不同的事情吗？

【问题讨论】：

标签： facebook facebook-opengraph gif

【解决方案1】：

我能够创建一个 .html 文件，当链接作为状态粘贴时，该文件在 Facebook 提要中显示为动画（和循环）GIF。在我的 html 页面中，我在标题中使用了以下元标记：

<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">

在我处理这个问题时给我带来麻烦的是og:url 属性。它应该直接指向 GIF，而不是这些元标记所属的 .html 文件。此外，og:image 应与og:url 相同。

我没有测试是否需要 width 和 height 属性。

【讨论】：

这应该是公认的答案。 og:image 和 og:url 相同在这里很重要。
如果有人点击该链接，他们是直接将 gif 带到包含页面吗？
@vegashacker 您能否发布一个完整的工作链接到工作的 html 文件？
@PatrickGunderson 如果有人点击来自 FB 提要的动画 GIF 链接，他们将被带到包含页面，而不是动画 GIF 本身。
这行得通，GIF 确实在提要中显示为 GIF。然而，Facebook 尝试从 GIF URL（在我的例子中是 S3 URL）中获取所有其他元标记。结果，fb:app_id 和其他标签被忽略，我无法在我的应用分析中跟踪用户交互。关于如何解决这个问题的任何想法？

【解决方案2】：

这里是 Giphy API 团队的产品经理。无特殊处理；我希望——用 Facebook 提交错误需要很长时间。

Flash 代码是遗留的，我们应该清理它。 FB 现在确实支持 GIF，vegashacker 的回答基本上是正确的。

【讨论】：

【解决方案3】：

答案遗漏了一个重点，如何使 GIF 图片（如果点击）重定向到所属的文章而不是 GIF 链接本身？

重要的部分是：

<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">

添加两个og:url 标签。第一个应该与指向 GIF 图片 URL 的 og:image 相同。第二个应该是文章的 URL。

【讨论】：

2020年，点击图片暂停/恢复动画。添加第二个og:url 不会改变任何东西。

【解决方案4】：

实际上，我查看了他们的源代码，我 99% 确定他们实际上是在播放视频。对于this gif，有许多与页面关联的开放图元标记：

 <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">

其中大部分是视频标签。这些标签与页面相关联，而不是 gif。如果你分享的是直接的 gif 图片，那么它不会动画。

要确认这一点，如果您将页面插入Facebook URL debugger，则可以确认这一点。没有什么神秘的，this is shared as a flash video。

【讨论】：

绝对是 gif。我刚刚将它发布到我的 Facebook 页面并在 chrome 开发工具中检查了结果。 <img class="_9_m img" src="https://fbexternal-a.akamaihd.net/safe_image.php?d=AQCBcGH6WvU_FUPB&amp;url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&amp;ext=gif" width="470" height="349" data-reactid=".18.0">
嗯，是的，不是的（关于它是一个 gif）。他们通过 Flash 电影加载 gif 有点奇怪。看看这个网址：giphygifs.s3.amazonaws.com/…
这是他们从og:video 标签中引用的网址。我认为他们正在做一些闪存编程。我相信这是他们使用的技巧：helpx.adobe.com/flash/kb/load-external-swf-swf.html
我知道从元标记中看起来就像会发生的那样。但是当你将它发布到 facebook 时，它是一个 gif。这是一个带有src="...safe_image.php..." 的img 标签，并且该网址返回一个带有content-type:image/gif 的gif
不，他们不会将“gif”作为 gif 标签发布。他们将它们作为视频发布。 Giphy的人是这么说的adweek.com/socialtimes/giphy-animated-gif-files/427540

【解决方案5】：

我已经用 Facebook 调试器研究了一段时间，并找到了如何发布 swf 但就在今天我还成功发布了我的动画 gif。

我只是将我的链接 https://www.example.com/my.gif 粘贴到 Facebook 调试器中，它说找不到 URL，但显示很好，给出了应用程序 ID 号，然后我继续并在我的时间轴上发布给所有人看 :) 所以没有 html 或标签实现这一点，但只需一个安全链接到我的服务器上的 gif 文件。

我从来没有弄清楚如何通过嵌入的 html 来实现它！

【讨论】：