Search code examples
javascriptjqueryfacebookxfbml

Can't dynamically load Facebook like buttons

I have a webpage which will dynamically load the next page when you scroll to the bottom, once the new page loads I want to be able to render all the Facebook like buttons that are new but not all the ones that have already been rendered.

I am at a bit of a loss as to where I have gone wrong with this and any help would be much appreciated, thanks.

Javascript code:

$('.fb-like:not(.fb_edge_widget_with_comment)').each(function(index, element) {
    $(element).attr('id', 'ajax-fb-like');
    FB.XFBML.parse(document.getElementById('ajax-fb-like'));
    $(element).removeAttr('id');
});

Facebook like button code:

<div class="fb-like" data-href="http://url.com/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
Solution

  • You can change your like buttons to XFBML and use FB.parse() to make your buttons dynamically.

    http://developers.facebook.com/docs/reference/plugins/like/

    http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/