Question

在很长一段时间后创建了一个脚本，它完全正常，直到前几天我注意到这个问题。 FB like按钮显示在实际页面上并且工作正常...我还在页面上有一个共享按钮，显示弹出其他共享服务...在此弹出窗口中，我还显示了SAME fb like按钮。

页面和弹出位置都使用完全相同的代码：

<div class="fb-like" data-href="'+ encodeURL(fb_url()) +'" data-action="'+ settings.fbAction +'" data-colorscheme="'+ settings.fbcolorscheme +'" data-send="false" data-layout="button_count" data-width="97" data-show-faces="false"></div>

变量和函数是正确的。这在实际页面上运行良好，并且在页面和弹出窗口上工作正常，直到最近...所以我想我的问题是，如果有什么改变，你只能在页面上显示相同的按钮的一个实例？这是我唯一能想到的，但想知道是否有其他人遇到类似的东西。我很困惑，因为相同的代码直到最近才出现问题。

Answer 1

确实可以在同一个HTML文档中呈现多个具有相同data-href值的按钮。在加载Facebook Javascript SDK之前，请检查您的<div class="fb-like"/>元素是否是DOM的一部分：

<div id="fb-root"></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_GB/all.js#xfbml=1&appId=YOUR_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

请注意，如果您包含YOUR_APP_ID并设置了xfbml=1（根据上面示例中的类似查询字符串的附录），则会在完成SDK加载后呈现Like按钮。在此点之后添加的任何Like Buttons都不会被渲染（可能是因为它们是通过Javascript，jQuery或类似的方式添加到DOM中的 - 例如在AJAX调用之后）。

如果必须在加载SDK后将第二个Like按钮添加到DOM，则在添加到DOM之后调用FB.init()将呈现尚未渲染的任何Like按钮，像这样：

FB.init({
    appId:'YOUR_APP_ID', 
    xfbml:true
});

注意：这样做有效，但不推荐使用，因为以下警告信息将打印到您的控制台：

FB.init已被调用 - 这可能表示存在问题。

FB喜欢按钮显示在页面上，但不在同一页面上弹出

1 个答案: