在AJAX调用后呈现Facebook评论框

时间:2012-03-19 21:54:34

标签: ajax facebook fbml

我正在尝试显示Facebook评论框以及生成的ajax内容。我把我的所有代码都删减到了一个简单的例子,我很明显错过了一些东西。

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

下拉菜单会自动吸引http://www.gerdalouw.com/ajax/ax.html<<这个工作正常,但FB注释框不希望通过Ajax调用生成。

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

我在这里经历了许多可能的问题解决方案,但是找不到有用的东西。有人可以帮忙吗?

3 个答案:

答案 0 :(得分:5)

这对你有用:

  

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

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

答案 1 :(得分: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>

答案 2 :(得分:0)

在AJAX成功函数中显式调用“FB.XFBML.parse()”,该函数将重新解析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);                   
    }