Facebook tags dont render when generated dynamically using Jquery

Question

Hey guys,

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

In short, you can't use these tags...there are server-side tags that actually render as something else in the HTML sent to the client.

If you want to use facebook tags, you must render them server-side and pull the resulting HTML, rather than constructing the HTML using those tags client-side...which is just creating invalid HTML the browser doesn't understand.

For example the same in true in other languages. Here's an example in ASP.Net:

<asp:TextBox />

Renders as:

<input type="text" />

But the tag itself, the server-side markup is completely invalid in the client world...many languages operate like this, the same goes for facebook tags.

Answer 2

how do I do that - like right now I build my entire string say comment="<div>I love icecream<br/><fb:profile-pic uid='xxx'></fb:profile-pic></div>" Then I would do $("#myswipes").html(comment); So how would I reload.

you can use $.ajax(), say

$('a.moreComment').click(function(){
    $.ajax({
        url: 'some/url.php',
        success : function(comment){
            $("#myswipes").html(comment);
        }
    });
})

some/url.php should be in the server that can correctly render and return this line, <div>I love icecream<br/><fb:profile-picuid='xxx'></fb:profile-pic></div>

Answer 3

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'));