在带有照片的fancybox中添加facebook评论答案

【问题标题】：Add facebook comments inside fancybox with photo在带有照片的fancybox中添加facebook评论
【发布时间】：2012-10-28 20:16:06
【问题描述】：

如何在fancybox 中添加facebook cmets？在我的 HTML 中，我有这个：

<a  class="fb" data-fancybox-group="gallery" title="Laurea" href="http://mediablog.cadenadial.com/atrevete/files/2012/10/cocheespa%C3%B1a.jpg">
<img  src="http://mediablog.cadenadial.com/atrevete/files/2012/10/cocheespa%C3%B1a.jpg" alt=""   width="19%"/></a>

然后在另一个名为 js.js 的文件中，我有一个 fancybox 函数：

(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/es_ES/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));



    $(".fb")
    .attr('rel', 'gallery')
    .fancybox({
        padding: 0,    
        afterShow : function(){
        var myContent = '<div id="myContent">
<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:210px; height:30px;" allowTransparency="true">
</iframe>
<iframe src="http://www.facebook.com/plugins/comments.php?href=' + this.href + '&permalink=1"  scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width="600" height="600"" allowTransparency="true">
</iframe>
  </div>';
 $(".fancybox-wrap").append(myContent);}
 });

如何在fancybox 中显示cmets？谢谢

【问题讨论】：

你的意思是jsfiddle.net/dF4tT/4/show/light？
嗨，JFK，也许我的问题表述有误。我想知道当你点击带有fancybox的图片时是否会出现照片并且在照片旁边或下方放置社交插件Facebook cmets，再次感谢
在 javascript 文件中我有这个： $(".fb") .attr('rel', 'gallery') .fancybox({ padding: 0,
afterShow : function(){ var myContent = '
facebook.com/plugins/comments.php?href=' + this.href + '&permalink=1" scrolling="yes" 溢出：隐藏；宽度：130px； height:30px;" allowTransparency="false">
';
$(".fancybox-wrap").append(myContent);但显示不正确

标签： javascript jquery fancybox facebook-comments

【解决方案1】：

我的猜测是它没有显示评论插件，因为该站点已经被解析并且它是动态添加的。在“追加”功能之后尝试以下操作：

https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

因此，您要么只使用FB.XFBML.parse(); 来解析整个文档（再次），要么使用FB.XFBML.parse(document.getElementById('foo')); 来解析具有特定ID 的特定元素。也应该适用于子项目。

另外，使用正确的插件代码，而不是 iframe 版本：

https://developers.facebook.com/docs/reference/plugins/comments/

【讨论】：

对不起，我是西班牙人，英语说得不好。我应该把 FB.XFBML.parse() 放在 $(".fancybox-wrap").append(myContent);??这？ $(".fb") .attr('rel', 'gallery') .fancybox({ padding: 0, afterShow : function(){ var myContent = '

'; FB.XFBML.parse(); $(".fancybox-wrap").append(myContent); } });???非常感谢
在追加之后，而不是之前：$(".fancybox-wrap").append(myContent); FB.XFBML.parse();
感谢 Luschn，照片已显示，但评论下方仍然缺失
你可以发布链接吗？我想测试一下
我的意思是指向真实网站的链接。它在 jsfiddle 中实际上不起作用，还需要包含 fancybox 等等。但我已经可以告诉你了：没有像按钮或评论插件的官方 iframe 版本，至少现在没有了。更好地生成新代码：developers.facebook.com/docs/reference/plugins/comments