integrate facebook like button with dynamically loaded content
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
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/