javascript - Facebook Like 按钮动态元标签 (jQuery)

Question

我正在尝试在模态中设置一个类似于 Facebook 的按钮，并且我希望 OG 元特定于模态中的每个图像。在我的脚本中，我首先添加所需的 OG 元标记:

/* INSERT OPEN GRAPH META TAGS */
$('head').append('<meta property="og:title" content="'+x+'"/>
   <meta property="og:url" content="'+window.location.href+'"/>
   <meta property="og:description" content="'+z+'"/>
');

我已经检查过了，它们添加得很好，此时 FB 尚未初始化或被调用。只有某些模态具有社交图标，因此当打开模态时，图像会加载，如果需要社交图标，它会运行以下代码并根据元素的某些数据属性动态更新 OG 元标记:

$('meta[property="og:title"]').attr('content',currentImageParent.data('MetaTitle')); 

$('meta[property="og:description"]').attr('content',currentImageParent.data('MetaDescription'));

这工作得很好，我可以看到代码中发生了更新。因此，在图像加载到模式中，并且元标记已根据图像的 .data 信息更新后，我认为调用 Facebook SDK 来设置“喜欢/发送”按钮(并添加所需的 DIV)是安全的到页面(如果不存在):

$('body').prepend('<div id="fb-root" class="FacebookSDK"></div>
   <script>
   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#xfbml=1";     
       fjs.parentNode.insertBefore(js,fjs);
   }(document,\'script\',\'facebook-jssdk\'));
   </script>
');

在调试器中这不起作用，只是默认为非 OG 元标记(标题/描述)。它还会抛出错误，指出 og:url 等未定义(即使它们在调用之前已添加)。如果我将虚拟 OG 元标记放在 html 页面上并运行调试器，我不会收到任何错误，并且会显示 OG 元标记内容(不是动态更新的内容，只是虚拟内容文本)。

有什么想法吗？谢谢!

Answer 1

Facebook 的抓取工具不执行 Javascript，因此只能在执行任何 Javascript(或 jQuery)之前读取 HTML 中可用的元标记。

每个开放图谱对象都必须有一个唯一的 URL。