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

问题

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

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

回答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'))

FB.XFBML.parse()

if you want the whole page parsed.

回答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.

来源：https://stackoverflow.com/questions/1462584/loading-facebook-fbprofile-pic-via-ajax-in-facebook-connect-site

标签

facebook

jquery

fbml