Facebook tags dont render when generated dynamically using Jquery

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

Answers


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

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>


Need Your Help

Is there any significant difference between using if/else and switch-case in C#?

c# .net switch-statement

What is the benefit/downside to using a switch statement vs. an if/else in C#. I can't imagine there being that big of a difference, other than maybe the look of your code.

How do I make an editable DIV look like a text field?

html css

I've got a DIV which has contentEditable=true so the user can edit it. The problem is that it doesn't look like a text field, so it may not be clear to the user that it can be edited.