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来设置like / send按钮（并添加所需的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元标记内容（不是动态更新的内容，只是虚拟内容文本）。

有什么想法吗？谢谢！

Answer 1

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

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

Facebook Like Button动态元标记（jQuery）

1 个答案: