Facebook Like/Send 按钮动态生成不显示答案

【问题标题】：Facebook Like/Send button dynamically generated not showingFacebook Like/Send 按钮动态生成不显示
【发布时间】：2013-05-02 06:58:32
【问题描述】：

我动态创建了 Like/Send 按钮，fb-root 的 Div 显示 SDK 正在工作，但由于某种原因，该按钮没有显示任何内容。

$('body').prepend('<div id="fb-root"></div>');
   var _URL = window.location.href ;
 $('.center.pic-container').before('<div class="fb-like" data-href="'+_URL+'" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="segoe ui" data-action="recommend"></div>');
});
(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";
 fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

顺便说一句，它被包装在一个文档就绪函数中。对动态生成的like按钮有什么建议吗？也许是设定的超时时间或其他什么？

第二个代码尝试=

$(function() {
   var Sscript = '<script type="text/javascript">';
   var Escript = '</script>';
   var code = Sscript +'(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";fjs.parentNode.insertBefore(js, fjs);}(document, "script", "facebook-jssdk"));'+Escript;
 $('body').prepend('<div id="fb-root"></div>'+code);
   var add = $('.center.pic-container').children('a').first().attr('href');
   var URL = add.toString();
   var _URL = window.location.host + URL;
 $('.center.pic-container').before('<div class="fb-like" data-href="'+_URL+'" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="segoe ui" data-action="recommend"></div>');
    });

【问题讨论】：

浏览器控制台中是否有任何可见的脚本错误？关于问题所在的任何提示？
不，这就是问题所在。以及为什么我完全不知道它为什么不起作用。
您是否可以在浏览器中使用 Firebug 或 F12 工具来单步执行 JavaScript？这通常会使此类问题的故障排除变得更容易。也许也发布整个脚本和相关的标记/CSS - 问题可能出在你没有分享的东西上。
我不确定这一点，因为我已经在 chrome 中浏览了控制台，我还用我尝试过的新代码更新了第一篇文章，但仍然没有得到任何东西。那里没有任何东西，因为我可以用硬代码创建它并且它可以工作。
我们都忽略了一些非常重要的 :D 在 js.src 行中我不得不将 #xfbml=1 添加到 url。它现在可以工作了，谢谢你

标签： javascript jquery facebook facebook-like facebook-javascript-sdk

【解决方案1】：

这个问题的答案，看了每一行才知道。

$('body').prepend('<div id="fb-root"></div>');
  var _URL = window.location.href ;
 $('.center.pic-container').before('<div class="fb-like" data-href="'+_URL+'" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="segoe ui" data-action="recommend"></div>');
});
(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";
  fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

js.src = "//connect.facebook.net/en_US/all.js" 应该是这个js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"，如果您检查#fb-root div，它将获取所需的正确 XFBML 标签，它将附加到 Iframe。

希望这对其他人有所帮助。

【讨论】：