1

我正在尝试在模态中设置一个类似 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 等（即使它们在调用之前已添加）。如果我在 html 页面上放置虚拟 OG 元标记并运行调试器，我不会收到任何错误，并且会显示 OG 元标记内容（不是动态更新的内容，只是虚拟内容文本）。

有任何想法吗？谢谢！

4

1 回答 1

0

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

每个 Open Graph 对象都必须有一个唯一的 URL。

于 2012-09-15T12:08:27.800 回答