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

Chasitychasm

you should reload it... I suggest via ajax,... – Alberic

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. – Chasitychasm

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

Actinouranium

thankyou thankyou thankyou - l love you - you saved so much of my time..........thats exactly what I needed - thanks again – Chasitychasm

And me, that is a lovely little fix! I was using like button in ajax loaded jQuery tab and could not get it to render whatever I tried until I found this. Big upvote from me! – Flitch

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>

Alberic

What difference does it make rendering the same line on server side vs client side. I just tried your approach it doesnt work – Chasitychasm

if you can display some/url.php in the browser with no problem, then that should work... – Alberic

if I return any other string - that displays fine - but when I return an fb tag string like <fb:profile-pic - it does not show up – Chasitychasm

how did you display <fb:profile-pic in the other pages then ? you can use that same thing... – Alberic