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

Question

我想在我的网站上添加一些社交媒体分享按钮。使用 Open Graph 元标记适用于代表一个 material 的页面（例如我网站上的 post）。但问题是，我有一个包含多张图片的画廊页面，我想为每张图片添加分享按钮。如果我使用 Javascript 根据用户想要分享的图片更改元标记，例如，Facebook 的爬虫会在页面加载时捕获新生成的标记还是原始标记？

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

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

Answer 1

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

所以，首先你需要注册一个facebook App，进入developers.facebook.com，拥有你自己的app 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（就是用户点击分享后出现的对话框按钮）与您的图像数据。

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.');
        }
      }
    );
}

和last，但同样重要的是，你需要调用你的函数

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'
});

动态结构

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

<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);
})

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

How to change open graph meta tags to share custom content on social media?

javascript

meta

share

facebook-opengraph

动态结构