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

score 8 · Accepted Answer · edited Aug 09 '11 at 06:58

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

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. — mbrevoort, Sep 22 '09 at 21:59

score 6 · Answer 2 · edited Mar 14 '11 at 19:18

6

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.

edited Mar 14 '11 at 19:18

Bill the Lizard

398,270
210
566
880

answered May 27 '10 at 06:14

Daniel

2,331
3
26
35

this what I had to use as well – Pbearne Aug 17 '10 at 22:53
@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? – Jun 01 '10 at 00:47

score 0 · Answer 3 · answered Jul 30 '11 at 17:18

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.

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

3 Answers3

Linked