Question

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

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

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

Answer 1

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

所以，首先您需要将Facebook应用注册到developers.facebook.com，才能拥有自己的应用秘密和应用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.');
        }
      }
    );
}

最后，但并非最不重要，您需要调用您的函数

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

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

1 个答案:

动态结构