Facebook tags dont render when generated dynamically using Jquery

Question

To give you a simple use case - on my website, I display the comments posted by the facebook users. For each comment I display the facebook users photo using the fb:profile-pic tag and a fb like button.

This page renders properly and everything displays well. Now when the users want to read older comments, they click on the "More" link

Using Jquery, I pull the older comments and in the javascript build the content adding the fb:profile-pic and the fb:like tags

But these tags dont show up. Do we need to reload it or something. Thanks for your help

Answer 1

First make sure the FBML is being inserted into the DOM with an inspector. If so, all you need to do is tell Facebook to convert the FBML tags to HTML tags so your browser can render it. With the Graph API you call FB.XHTML.parse http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse using the Javascript SDK. Here's an example from my code:

$('#list').append('<fb:name uid="4"></fb:name>');
FB.XFBML.parse(document.getElementById('list'));