2012-03-19 46 views
0

我试图显示一个facebook评论框以及生成的ajax内容。我将我的所有代码都减少到了一个简单的例子,在这个例子中我十分失望。AJAX调用后呈现Facebook评论框

我的主要示例页面http://www.gerdalouw.com/ajax/ajax.html(从下拉菜单中选择测试Ajax来执行)

下拉然后会自动绘制在http://www.gerdalouw.com/ajax/ax.html < <这部作品对自己很好,但FB评论框不想要通过Ajax调用生成。

我试过使用FB.XFBML.parse();函数,但是我要么把它放在错误的地方,要么我错过了其他的东西?我想我错过了一些非常明显的地方?

我在这里经历了很多可能的解决方案来解决我的问题,但是找不到有效的方法。任何人都可以帮忙吗?

+1

我没有看到“FB.XFBML.parse();”在ajax.html或ax.html中。另外,我没有看到FB.init。理想情况下,将AJAX内容渲染到页面上后运行FB.XFBML.parse完全正常。我们已经在很多应用中使用过它。 – Shreeni 2012-03-19 23:59:31

+0

谢谢Shreeni,我真的不知道该把它放在哪里(因为它不想在我认为应该放置的地方工作 - 在ax.html页面内)。你或者某个人可能没有一个简单的例子来说明如何将这个Ajax调用(触发页面+被调用页面)拼接在一起? – Herman 2012-03-20 07:23:15

回答

3

我发现这篇博客文章可能有帮助。 http://dominicminicoopers.blogspot.com/2012/03/assigning-url-for-facebook-comments.html

要做到这一点,它将会是稍微不同的代码。注意,一旦FB对象完全初始化,callAjax就需要发生。我将它放在window.fbAsyncInit函数中,以确保FB已正确加载并初始化。

<div id="fb-root"></div> 

<div id="myCommentsDiv"></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&appId=YOUR_APP_ID"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId : 'YOUR_APP_ID', // App ID 
     channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html' // Channel File 
    }); 

    callAjax(); 
    }; 

    function callAjax(yourData) { 
     $.ajax({ 
     url: "YOUR_AJAX_URL", 
     data: yourData, 
     success: function(){ 
      var mydiv = $('#myCommentsDiv'); 
      mydiv.html('<div class="fb-comments" href="' + document.location.href + '" posts="2" width="470">'); 
      FB.XFBML.parse(mydiv[0]); 
     } 
     }); 

    } 

    }; 
</script> 
+0

谢谢你,这个答案帮助我! – 2012-09-19 20:40:35

0

调用” FB.XFBML.parse()”明确了成功的AJAX功能,这将重新解析HTML并呈现Facebook的评论部分

//facebook comments 
    var isFacebook = $data.find('.fb-comments'); 
    if(isFacebook != 'undefined') { 
     var scriptText = 'FB.XFBML.parse();'; 
     var scriptNode = document.createElement('script'); 
     scriptNode.appendChild(document.createTextNode(scriptText)); 
     contentNode.appendChild(scriptNode);     
    } 
5

这应为你工作中:

$('body')。ajaxComplete(function(){FB.XFBML.parse(document.body)});

它会为每个ajax调用调用FB.XFBML.parse。所以你不需要在任何地方重复呼叫。