Loading Facebook fb:profile-pic via AJAX in Facebook Connect site

Question

After a page loads, I'm making an AJAX request to pull down an HTML chunk that contains tags representing a Facebook user profile picture. I append the result to a point in the DOM but the logos don't load, instead all I see is the default silhouette.

Here's simply how I'm loading the HTML chunk with jQuery

$.ajax({
  url: "/facebookprofiles"
  success: function(result) {
    $('#profiles').append(result);
  }
});

The HTML that I'm appending is a list of diffs like this:

<div class="status Accepted">
  <fb:profile-pic class="image" facebook-logo="true" linked="true" size="square" uid="1796055648"></fb:profile-pic>
  <p>
    <strong>Corona Kingsly</strong>My Status Update<br/>
    <span style="font-size: 0.8em">52 minutes ago</span>
  </p>           
</div>

Any ideas? I assume the fb tags are not being processed once the dom is loaded. Is there any way to make that happen? I'm not seeing any exceptions or errors in my Firebug console.

Thanks

Answer 1

First attempt

Not sure if this helps a lot, but here's an article on Ajax + FBML: http://wiki.developers.facebook.com/index.php/FBJS#Creating_FBML_Elements

In particular, perhaps you can use the setInnerFBML() method

---

Follow up

So I think the init function parses the fbml. So the obvious question is how do you get facebook's javascript library to re-parse the fbml (or just parse the new fbml) if you insert fbml after init.

It looks like this thread may help: http://forum.developers.facebook.com/viewtopic.php?id=22245

Here's what appears to be the relevant code although there is more context at the forum:

if ( FB.XFBML.Host.parseDomTree )
  setTimeout( FB.XFBML.Host.parseDomTree, 0 );

Answer 2

i was having the same problem and that fixed it. u rock!

Answer 3

FB.XFBML.Host.parseDomTree did not work for me. maybe it has changed in the new api. what did work was:

FB.XFBML.parse(document.getElementById('foo'))

or

FB.XFBML.parse()

if you want the whole page parsed.

Answer 4

@user239427

where did you put these lines of code?? inside a script call on the page that is loading inside an ajax loaded div.. or on the original script page?

Answer 5

Well... I have the same error... Let me explaine:

First, I have a button on the top of the web, in HTML, Then, though an AJAX request I load some information, 3 divs whit a button each. When I create the elements via JS and then I use FB.XFML.parse, what happen is that que 3 new buttons are just the same than the First one (on HTML), but I want this be news!

I already put the title and href tags, but I can't solve this... Can help me? Thanks

P.D. Sorry for my English... I'm spanish speaker xD

Answer 6

FB.XFBML.parse(document.getElementById('foo')) fixed it perfectly i wanted to upvote that answer but i don't have enough reputation , either way many thanks! I