如何更改开放图元标记以在社交媒体上共享自定义内容? [英] How to change open graph meta tags to share custom content on social media?

问题描述

我想在我的网站上添加一些社交媒体共享按钮.使用开放图谱"元标记将适用于代表一种材料的页面(例如，我网站上的帖子).但是问题是，我有一个包含多张图片的图库页面，并且我想为每张图片添加共享按钮.如果我使用Javascript根据用户想要共享的图片更改元标记，例如，Facebook的Crawler会在页面加载时捕获新生成的标记或原始标记吗?

I want to add some social media share buttons on my website. Using Open Graph meta tags would work for pages that represent one material (for instance a post on my website). But the problem is, I have a gallery page which contains multiple pictures, and I want to add share buttons for each picture. If I use Javascript to change the meta tags according to which picture the user wants to share, would--for instance--Facebook's Crawler catch the newly generated tags or the original tags when the page is loaded?

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

I don't want to use PHP to generate the meta tags because everything in the gallery is being handled in Javascript and I can't refresh the page every time user selects one of the pictures to be shown.

解决此问题的成功方法是什么?

What is the successful approach to this problem?

推荐答案

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

This is an excellent question. I've been through this before and i know how awful this can be.

因此，首先，您需要将一个Facebook App注册到 developers.facebook.com ，让您拥有自己的应用程序密钥和应用程序ID.

So, first you need to registrate a facebook App, into developers.facebook.com, to have you own app Secret and App ID.

第二，您需要初始化Facebook Javascript SDK

Second, you need to init 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(该对话框将在用户单击共享"按钮时显示出来).

Third you need to create a function or a method that dynamically call FB UI (which is the dialog box that will appear ass the user click in the share button) with your image data.

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

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

And last, but not least, you need to call your function

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

---

动态结构

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

---

Dynamic Structure

Obviously, the above 'share info' have to be dynamic as well, so you can use data attributes to pass this info easily

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

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

So, you can use jQuery .data() to parse the info and directly run your method.

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

这篇关于如何更改开放图元标记以在社交媒体上共享自定义内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！