CODEWITHSUNDEEP
ajaxfacebookfbml
Herman
Herman

Reputation: 1

Facebook comment box rendered after AJAX call

I'm trying to display a facebook comment box along with generated ajax content. I cut down all my code to a simple example where I am eveidently missing something.

My main example page http://www.gerdalouw.com/ajax/ajax.html (from the dropdown select Test Ajax to execute)

The drop down then automatically draws in http://www.gerdalouw.com/ajax/ax.html << this works fine on its own, but the FB comment box doesn't want to generate via the Ajax call.

I've tried using the FB.XFBML.parse(); function, but I am either putting it at the wrong place or I am missing something else? I guess I am missing something very obvious somewhere?

I've been going through many possible solutions to my problem on here, but just couldn't find something that worked. Anyone that can help please?

Upvotes: 0

Views: 6515

Answers (3)

Tiago
Tiago

Reputation: 2966

This shall work for you:

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

It will call FB.XFBML.parse for every ajax call. So you don't need to repeat the call everywhere.

Upvotes: 5

Subharanjan
Subharanjan

Reputation: 668

Call the ” FB.XFBML.parse() ” explicitly inside the AJAX success function, which will re-parse the html and render the Facebook comments section

   //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);                   
    }

Upvotes: 0

DMCS
DMCS

Reputation: 31880

I found this blog article to be possibly helpful. http://dominicminicoopers.blogspot.com/2012/03/assigning-url-for-facebook-comments.html

To do yours, it will be slightly different code. Notice the callAjax will need to happen once the FB object has been fully initialized. I placed it inside of the window.fbAsyncInit function to ensure FB has been correctly loaded and initialized.

<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>

Upvotes: 3

Related Questions