Javascript 使用动态元数据将页面共享到Facebook

我的页面上有一个Facebook共享按钮，它基本上会打开一个窗口，允许用户共享页面…非常基本的东西。我的问题是，我希望图像和标题特定于单击的按钮

因此，我构建了一个小js组件，它将用新内容更新OG元标记和。然后，它将打开共享模式，允许用户使用新的元信息共享页面

在更新元信息和打开模式时，一切都很好，但facebook帖子仍然会显示原始元信息。我担心的是，要么Facebook正在缓存早期的元数据，要么它只接受页面初始呈现的元数据。所以，如果有人对这类东西有更多的了解，那就太好了！。。。或者以前做过这种事情

我的JS组件如下所示：

'use strict';
NodeList.prototype.forEach = Array.prototype.forEach;

function updateMetaInformation () {
    const buttons = document.querySelectorAll('a[share-social]');

    if (!buttons) {
        return false;
    }

    buttons.forEach((button) => {
        const href    = button.getAttribute('href');
        const network = button.getAttribute('share-social');
        button.addEventListener('click', (e) => {
            e.preventDefault();
            if (network) {
                setCustomMetaData(button)
                .then(() => setTimeout(window.open(href, 'popUpWindow', 'location=yes,height=600,width=800,scrollbars=yes,status=yes'), 2000))
                .then(() => setTimeout(() => resetCustomMetaData(), 2000));
            }
        });

    });
}

function setCustomMetaData (button) {
    return new Promise(
      (resolve, reject) => {
          const newFacebookTitle = button.getAttribute('data-facebook-title');
          const newTwitterTitle  = button.getAttribute('data-twitter-title');
          const image            = button.getAttribute('data-image');

          const facebookTitle = document.querySelector('meta[property="og:title"]');
          const facebookImage = document.querySelector('meta[property="og:image"]');
          const twitterTitle  = document.querySelector('meta[name="twitter:title"]');
          const twitterImage  = document.querySelector('meta[name="twitter:image"]');

          facebookTitle.setAttribute('content', newFacebookTitle);
          twitterTitle.setAttribute('content', newTwitterTitle);
          facebookImage.setAttribute('content', image);
          twitterImage.setAttribute('content', image);

           resolve(button);
       }
   );
}

function resetCustomMetaData () {
    const facebookTitle = document.querySelector('meta[property="og:title"]');
    const facebookImage = document.querySelector('meta[property="og:image"]');
    const twitterTitle  = document.querySelector('meta[name="twitter:title"]');
    const twitterImage  = document.querySelector('meta[name="twitter:image"]');

    const originalFacebookTitle = facebookTitle.getAttribute('original');
    const originalFacebookImage = facebookImage.getAttribute('original');
    const originalTwitterTitle  = twitterTitle.getAttribute('original');
    const originalTwitterImage  = twitterImage.getAttribute('original');

    facebookTitle.setAttribute('content', originalFacebookTitle);
    facebookImage.setAttribute('content', originalFacebookImage);
    twitterTitle.setAttribute('content', originalTwitterTitle);
    twitterImage.setAttribute('content', originalTwitterImage);
}

export default updateMetaInformation;

---

正如您所看到的，它所做的只是更新meta标记，然后在短时间延迟后打开共享窗口。

Facebook不执行Javascript。Facebook只会获取你共享的URL，并将其删除。好的，这是有用的知识，谢谢。即使你使用类似npm的软件包来共享，Facebook也不会执行Javascript。因此，如何提供Javascript并不重要。您必须在服务器上执行此操作啊，该死，谢谢您的帮助！帮我节省了很多时间来修复一些根本不起作用的东西