Question

我的页面上有一个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;

正如您所看到的那样，只需更新元标记，然后在短暂的延迟后打开共享窗口。

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

0 个答案: