【问题标题】:Open Graph Gifs that animates when shared打开共享时动画的图形 Gif
【发布时间】:2016-01-17 05:17:39
【问题描述】:

是否可以构建网站的og 元标记,以便在将网站链接共享到 facebook 时,预览图像(gif)自动生成动画?

Here & here 讨论了 Giphy 是如何实现它的,基本上是将 gif 包装在一个 swf 文件中。但现在是 2016 年,有没有更好(和受支持)的方法来实现这一目标?我在 facebook 文档中找不到任何内容,我想将我的 og:type 元标记保留为具有 website 的值。

这是我的元标记配置对象的 sn-p(我使用 React Helmet 填充标记):

  { property: 'fb:app_id', content: 'some_app_id' },
  { property: 'og:description', content: 'My site's description' },
  { property: 'og:image', content: 'http://example.com' },
  { property: 'og:image:type', content: 'image/gif' },
  { property: 'og:title', content: 'My Site' },
  { property: 'og:url', content: 'http://example.com' },
  { property: 'og:type', content: 'website' },
  { property: 'og:image:width', content: '657' },
  { property: 'og:image:height', content: '411' },

  { charset: 'utf-8' },
  { property: 'og:site_name', content: 'My Site' },
  { property: 'og:locale', content: 'en_US' },

【问题讨论】:

    标签: javascript facebook facebook-graph-api facebook-opengraph


    【解决方案1】:

    去年夏天我研究过这个。我的理解是您必须将图像包装在 SWF 文件或 javascript 视频播放器中(据我所知,这实际上只是一个 javascript 程序)。许多大玩家(查看任何 youtube 页面)将通过多种方式使用 OG 呈现他们的内容 - 包括 SWF、javascript 播放器、仅作为图像等,因此他们正在查看的设备可能没有使用一种或多种方法的能力,它可以依赖另一种方法 - 即优雅地降级。

    这是一个 youtube 标题(有点矫枉过正?):

     <meta property="og:site_name" content="YouTube">
          <meta property="og:url" content="https://www.youtube.com/watch?v=UKOpnK5fC4k">
        <meta property="og:title" content="Pearl Jam 10-16-2014 Detroit Mi Full Show Multicam SBD Blu-Ray">
        <meta property="og:image" content="https://i.ytimg.com/vi/UKOpnK5fC4k/maxresdefault.jpg">
    
          <meta property="og:description" content="Pearl Jam 10-16-2014 Detroit Michigan Full Show Multicam SBD Blu Ray 2014 Lightning Bolt Tour Full Show Blu Ray Torrent (Added 06-05-2015) Option 1 - http://...">
    
        <meta property="al:ios:app_store_id" content="544007664">
        <meta property="al:ios:app_name" content="YouTube">
          <meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=UKOpnK5fC4k&amp;feature=applinks">
    
          <meta property="al:android:url" content="vnd.youtube://www.youtube.com/watch?v=UKOpnK5fC4k&amp;feature=applinks">
        <meta property="al:android:app_name" content="YouTube">
        <meta property="al:android:package" content="com.google.android.youtube">
        <meta property="al:web:url" content="https://www.youtube.com/watch?v=UKOpnK5fC4k&amp;feature=applinks">
    
        <meta property="og:type" content="video">
            <meta property="og:video:url" content="https://www.youtube.com/embed/UKOpnK5fC4k">
            <meta property="og:video:secure_url" content="https://www.youtube.com/embed/UKOpnK5fC4k">
            <meta property="og:video:type" content="text/html">
            <meta property="og:video:width" content="1280">
            <meta property="og:video:height" content="720">
            <meta property="og:video:url" content="http://www.youtube.com/v/UKOpnK5fC4k?version=3&amp;autohide=1">
            <meta property="og:video:secure_url" content="https://www.youtube.com/v/UKOpnK5fC4k?version=3&amp;autohide=1">
            <meta property="og:video:type" content="application/x-shockwave-flash">
            <meta property="og:video:width" content="1280">
            <meta property="og:video:height" content="720">
    
            <meta property="og:video:tag" content="Pearl Jam (Musical Group)">
            <meta property="og:video:tag" content="Pearl Jam">
            <meta property="og:video:tag" content="PJ">
            <meta property="og:video:tag" content="Full Show">
            <meta property="og:video:tag" content="Full Concert">
            <meta property="og:video:tag" content="HD">
            <meta property="og:video:tag" content="Blu Ray">
            <meta property="og:video:tag" content="Live">
            <meta property="og:video:tag" content="Eddie Vedder (Musical Artist)">
            <meta property="og:video:tag" content="Black">
            <meta property="og:video:tag" content="Alive">
            <meta property="og:video:tag" content="Even Flow">
            <meta property="og:video:tag" content="Sirens">
            <meta property="og:video:tag" content="Complete Concert">
            <meta property="og:video:tag" content="Frozen Let It Go">
            <meta property="og:video:tag" content="Pearl Jam Concert">
            <meta property="og:video:tag" content="Pearl Jam Full Show">
            <meta property="og:video:tag" content="Pearl Jam Full Concert">
            <meta property="og:video:tag" content="Pearl Jam 2014">
            <meta property="og:video:tag" content="Pearl Jam 10-16-2014">
            <meta property="og:video:tag" content="Pearl Jam 16-10-2014">
            <meta property="og:video:tag" content="10-16-2014">
            <meta property="og:video:tag" content="16-10-2014">
            <meta property="og:video:tag" content="Pearl Jam Detroit Full Show">
            <meta property="og:video:tag" content="Pearl Jam Detroit 2014">
            <meta property="og:video:tag" content="10-16-2014 Detoit">
            <meta property="og:video:tag" content="Pearl Jam Joe Louis Arena">
            <meta property="og:video:tag" content="Pearl Jam Michigan">
            <meta property="og:video:tag" content="PJ Detroit">
            <meta property="og:video:tag" content="Joe Louis Arena">
    

    【讨论】:

    • 嗯,是的,giphy 做了类似的事情,将og:video 属性与 swf 结合使用。你会碰巧知道降级是如何工作的吗?它是否从首先列出的内容开始,然后降级?
    • 根据我的阅读(我没有测试过),它尝试先做第一件事。这是一个 helptile.com:link.
    猜你喜欢
    • 2015-11-04
    • 1970-01-01
    • 2014-02-19
    • 2014-04-04
    • 2022-01-15
    • 1970-01-01
    • 2014-09-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多