How to load facebook comments in ajax WordPress

2 Views

I have a problem with loading facebook comments. Well, I’m using the Qawker theme. When I have integrated the facebook comments on my blog, it works for permalinks but the comment form will not show on ajax loaded page/post.

Here’s the URL of my blog: http://itnotes.tk/.

Read More

I see that facebook comments are URL sensitive and may not load when using ajax on a site, but my question is that: How would I be able to make the facebook comments load along with the ajax loaded content?

Help would be highly appreciated…Thank you!

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. I think that this post is old but anyway may be is useful for the next readers.

    If you want load “new comments” with ajax, you should run again the code that load the Facebook library and modify the data-href for the container (Facebook Comments Div). One simple example of code is this: 

    $.get("/sets/comentarios_facebook",{set_id:set_id},function(data){
    $("#componet_comentarios").html(data);               
(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
       js = d.createElement(s); 
       js.id = id;                          
   js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=178271392271647";                                    fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));                              
});

    This run with ajax action and the response is the Facebook comments div with the new “data-href”.

  2. 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);                   
    }

  3. use this – 

    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://itnotes.tk/" num_posts="10" width="600"></fb:comments>