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

Tervalent

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

Gagarin

I should have mentioned that I'm using Facebook Connect. I've been combing over everything related to setInnerFBML() but it's part of FBJS and I can't see how you can leverage it when using Facebook Connect outside of FB. – Tervalent

Answer 2

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.

Pareto

@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? – Psalms

this what I had to use as well – Euridice

Answer 3

I'm using the Microsoft-Web-Helpers with MVC3 (which include facebook helpers)

the razor syntax

 @Facebook.GetInitializationScripts()

ouputs

<script type="text/javascript">
        window.fbAsyncInit = function () {
            FB.init({ appId: '115631105198333', status: true, cookie: true, xfbml: true });
        };
        (function () {
            var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        } ());

        function loginRedirect(url) { window.location = url; }
    </script>

So I needed to call

window.fbAsyncInit(); 

To re-parse the facebook content.

Inflection