如何更改开放图元标签以在社交媒体上共享自定义内容？答案

【问题标题】：How to change open graph meta tags to share custom content on social media?如何更改开放图元标签以在社交媒体上共享自定义内容？
【发布时间】：2016-03-14 16:25:38
【问题描述】：

我想在我的网站上添加一些社交媒体分享按钮。使用 Open Graph 元标记适用于代表一种材料的页面（例如我网站上的帖子）。但问题是，我有一个包含多张图片的图库页面，我想为每张图片添加共享按钮。如果我使用 Javascript 来根据用户想要分享的图片更改元标记，例如，Facebook 的 Crawler 会在页面加载时捕获新生成的标签或原始标签吗？

我不想使用 PHP 生成元标记，因为画廊中的所有内容都在 Javascript 中处理，并且每次用户选择要显示的图片之一时我都无法刷新页面。

解决这个问题的成功方法是什么？

【问题讨论】：

Facebook 的解析器不执行客户端 JavaScript。因此，您需要一些服务器端代码来更改元标记。一种方法是，每当使用 history.pushState() 加载新图片时更改 URL

标签： javascript share facebook-opengraph meta

【解决方案1】：

这是一个很好的问题。我以前经历过，我知道这有多糟糕。

所以，首先你需要在developers.facebook.com注册一个facebook应用，拥有你自己的应用Secret和App ID。

其次，需要初始化Facebook Javascript SDK

window.fbAsyncInit = function() {
    FB.init({
        appId: YOUR_APP_ID,
        channelUrl: YOUR_CHANNEL_URL,
        status: true,
        xfbml: true
    });
};

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

第三您需要创建一个函数或方法，使用您的图像数据动态调用 FB UI（用户点击分享按钮时将出现的对话框）。 p>

function shareMyImage(data) {
    FB.ui(

      {
        method: 'feed',
        name: 'Facebook Dialogs',
        link: data.link,
        picture: data.image,
        caption: data.caption,
        description: data.description
      },
      function(response) {
        if (response && response.post_id) {
          alert('Post was published.');
        } else {
          alert('Post was not published.');
        }
      }
    );
}

最后，但同样重要的是，您需要调用您的函数

shareMyImage({
    link: 'http://link-to-your-page.com',
    image: 'http://link-to-your-page.com/your-image.jpg',
    caption: 'Reference info'
    description: 'Description to your image'
});

动态结构

显然，上面的“共享信息”也必须是动态的，因此您可以使用数据属性轻松传递此信息

<span class="button--share" data-link="THE LINK" data-image="THE IMAGE" data-caption="THE CAPTION" data-description="THE DESCRIPTION">Share</span>

所以，您可以使用 jQuery .data() 解析信息并直接运行您的方法。

$('.button--share').on('click', function(){
    var data = $(this).data();
    shareMyImage(data);
})

【讨论】：

这是一个非常好的答案。我实际上也想通过 Twitter、Google+ 和 Pinterest 做同样的事情（我更喜欢使用库——你的答案——作为应用程序发布，而不是使用 URI 来共享链接）。我也可以对这些媒体使用相同的 Facebook 方法吗？
种类... 这些媒体中的每一个都有自己的 API。因此，您有一种具有类似逻辑的方法，但方法不同。不幸的是，我不能在我的回答中添加额外的信息，因为您的问题是关于 Facebook OG 的，未来的访问者可能会感到困惑。但我想，你现在拥有了正确的工具来更深入地研究这些 API。祝你好运！而且，如果您喜欢这个答案，请考虑接受它。谢谢。
其实我说的是--例如--Facebook，不过还是谢谢。我有想法去挖掘。
我不想这么说，但从 2017 年 7 月 17 日起，上述内容将不再有效。这真的非常糟糕。检查提要对话框文档的底部developers.facebook.com/docs/sharing/reference/feed-dialog