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 t

Answer 1

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.

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.

Answer 3

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