integrate facebook like button with dynamically loaded content

Question

The website I am working on consists of a list of items dynamically loaded via AJAX. As you scroll down the page, more items are loaded.

Now my customer wants to add a Facebook like button (and the number of people who liked this) to each of these items.

Integrating the default like button is no problem, but how do I add the like button to the items loaded via AJAX? If a new item is loaded, how does the Facebook API know that there is a new like button in the DOM tree for which it needs to fetch the count of how many people liked this?

Has anyone experience in how to do this? Is there an example available? My search didnt turn up anything usefull except integrating the standard like button.

Answer 1

Late answer, but you could use the parse function of the Facebook API in a callback of your function that loads the new elements to render the new like buttons:

FB.XFBML.parse();

You can also direct the parser to the elements you want rendered, so it doesn't re-render the already existing like buttons:

FB.XFBML.parse(document.getElementById('foo'));

This is straight from the docs: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Answer 2

Late late answer but just in case someone need it.

Just finished my project nearly same as the one described. My page gets posts via ajax in json format, and i than create dom elements including facebook like button, tweet button and google plus one button. I ve had lots of problems until i get it right. Major problem was that like buttons didnt work as expected again and again... After while i found working solution.

I am using facebook js sdk (you can find some useful info here)

<div id="fb-root"></div>
<script>
  var isFBLoaded = false;
  window.fbAsyncInit = function() {
    FB.init({
        appId: ' your api key', 
        status: true, 
        cookie: true, 
        xfbml: false
    });
    isFBLoaded = true;
    ...
    renderFBqueue(); // i ll explain this later
  };
  (function() {
    var e = document.createElement('script'); 
    e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

It seems that there is a problem whit ajax content and FB.XFBML.parse() method or something. I found a solution on fb developers forum, and modified it to fit my needs. So after i get json content (multiple posts) from ajax call, i create all elements with jquery except fb like buttons. I put the post url (and some other related data) in queue and call function with timeout to create/parse those buttons.

var fb_queue = [];
...
function getMorePosts(){
    $.get('moreposts.php', params, function(response){
        if (response) createPosts(response);
    }, 'json');    
}
...
function createPosts(data){
    ...
    for (var key in data.posts) {
        ...
        fb_queue.push({ id : data.posts[key].id , url : data.posts[key].url });
    }
    ... // elements are created

}

and finaly to create and parse fb like buttons

function parseFBqueue(){
    if(isFBLoaded){
        if (fb_queue.length==0) return false;
        $.each(fb_queue, function (j, data) {
            window.setTimeout(function () { 
                renderFBLike(fb_queue.shift());  
            }, (j + 1) * 300); 
        });  
    };
}
function renderFBLike(data){
    var fblike = '<fb:like href="'+data.url+'" layout="button_count" ... ></fb:like>'
    $('#fbdiv-'+data.id).append(fblike);
    FB.XFBML.parse(document.getElementById('fbdiv-'+data.id'));    
}

Hope someone will find this useful, I know that I would a week ago :)