Facebook Comment Box to appear after Ajax Call

Question

I'm trying to make the Facebook Comment Social Plugin here to work with my Ajax jQuery call under Wordpress but unsucessfully.

I am calling a page via jQuery load() after I click on a link. This brings me all the content from that page. I've tried the following already:

Adding the code below in the loaded page or in the original page (the one that calls):

<div class="fb-comments" data-href="<?php echo $commentsFB; ?>" data-num-posts="5" data-width="500"></div>

If I add it in the original page, the comment box shows but I don't want it to show right away, I only want it to show when the user clicks on a link! What can I do to make it work? I tried to hide the box via jQuery with (field).hide() but it doesn't work, it shows either way.

If you want an example http://dev.bsides.co/wasabi/gol/goleiros/ (click on the blue names)

Already tried this, in event that hashtag changes `$('div#goleirosAjax').after('
'); }); });` — Rafael 'BSIDES' Pereira, Dec 01 '11 at 21:36

score 3 · Answer 1 · edited May 23 '17 at 12:22

3

Use FB.XFBML.parse(); after ajax call to regenerate comment box.

it is already posted here

Different Facebook comment box after each ajax call

edited May 23 '17 at 12:22

Community

1
1

answered Feb 26 '12 at 18:48

Mohd Shahid

1,538
2
33
66

score 1 · Answer 2 · answered Jun 24 '13 at 00:24

1

Just found a faster way to change the comments, just changing the href:

    $(".fb-comments").attr('data-href', data_href);
    FB.XFBML.parse();

answered Jun 24 '13 at 00:24

Arik

43
5

score 0 · Answer 3 · edited Jan 22 '12 at 15:14

0

Well I just figure it out. I need to make a call and render it when I click the link. Then, I also re-parse the Facebook stuff and hide the old Facebook comment if it existed. It's way simpler showing my function that changes once the hash on url changes:

$("#goleirosAjax")
    .animate({opacity: "0.5"})
    .html('<p>Loading...</p>')
    .load(url, function() {
        $("#goleirosAjax").animate({opacity: "1"});
        $('.fb-comments').hide();
        $('#goleirosAjax').after('<div class="fb-comments" data-href="'+ window.location.href +'" data-num-posts="5" data-width="500"></div>');
        FB.XFBML.parse($('#goleirosAjax'));
    });

edited Jan 22 '12 at 15:14

Marcelo Diniz

2,493
2
21
27

answered Dec 02 '11 at 04:56

Rafael 'BSIDES' Pereira

2,951
5
22
24

Better yet, delete the like with the hide() function, put it out of the click funcion and let it only inside the bind on hashtag change of url. Then, instead of hide(), use remove() so you'll have a cleaner code :) – Rafael 'BSIDES' Pereira Dec 02 '11 at 04:59

Facebook Comment Box to appear after Ajax Call

3 Answers3