Geek Answers Handbook

Download Facebook fb: profile-pic via AJAX on Facebook Connect site

After loading the page, I make an AJAX request to pull out a piece of HTML containing tags representing a Facebook user profile picture. I add the result to a point in the DOM, but the logos do not load, instead I only see the default silhouette.

Here's just how I load a piece of HTML using jQuery

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

The HTML I am adding is a list of differences 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 that fb tags are not processed after loading dom. Is there any way to do this? I do not see any exceptions or errors in the Firebug console.

thanks

+6
jquery facebook fbml
source share
3 answers

First try

Not sure if this helps, but here is an article about Ajax + FBML: http://wiki.developers.facebook.com/index.php/FBJS#Creating_FBML_Elements

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

Following actions

So, I think the init function parses fbml. So the obvious question is how do you get the javascript library on facebook for re-parsing fbml (or just parsing a new fbml) if you insert fbml after init.

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

Here's what looks like the appropriate code, although the forum has more context:

 if ( FB.XFBML.Host.parseDomTree ) setTimeout( FB.XFBML.Host.parseDomTree, 0 );
+8
source share

FB.XFBML.Host.parseDomTree does not work for me. perhaps this has changed in the new api. what the job was:

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

or

 FB.XFBML.parse()

if you want to analyze the whole page.

+6
source share

I am using Microsoft-Web-Helpers with MVC3 (which include facebook helpers)

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

Reanalyze the contents of facebook.

0
source share

More articles:


All Articles