Skip to content

Instantly share code, notes, and snippets.

@dalethedeveloper

dalethedeveloper/gist:1265499

Created October 5, 2011 19:53
Show Gist options
  • Save dalethedeveloper/1265499 to your computer and use it in GitHub Desktop.
Save dalethedeveloper/1265499 to your computer and use it in GitHub Desktop.
Download ZIP
Very Lazy Loading of Facebook Connect with jQuery
Raw
gistfile1.js
/*
Use jQuery to load FB Connect javascript asynchronously, then trigger manual parsing of individual XFBML tags
*/
window.fbAsyncInit = function() {
FB.init({channelUrl:'http://YOUR_SITE_URL.HERE/channel.html',xfbml: false,logging:false,status:false});
};
(function() {
jQuery(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js', function(){
var parseXFBML = function() {
var me = jQuery(this);
if (typeof me.data('xfbml') === 'undefined') {
FB.XFBML.parse(this);
me.data('xfbml','parsed');
}
};
jQuery.map(
['activity','add-profile-tab','bookmark','comments','friendpile','like','like-box','live-stream','login-button','recommendations','serverFbml','profile-pic','user-status'],
function(xfbml){ jQuery('fb\\:'+xfbml).closest('div').each( parseXFBML ); }
// XFBML elements (<fb:like-box>) do not behave like real DOMElements
// they throw a TypeError: Object [object Object] has no method 'getElementsByTagName'
// when plugged directly in eg. FB.XFBML.parse( jQuery('fb\\:like') );
// Thus we have to pass the nearest ancestor element, hedging on a div.
);
});
});
}());
@dalethedeveloper
Copy link
Author

Some Internet Explorer Issues

  • IE7/6 only work with the connect js included in the head.
  • IE8 does work, but only when the namespaces are declared in the opening html element.
  • You do not need the base div#fb-root in your HTML anywhere.

Solution, using conditional includes from HTML5 Boilerplate:

<!doctype html>
<!--[if lte IE 8]> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
...
<!--[if lte IE 7]><script src="//connect.facebook.net/en_US/all.js#xfbml=1"></script><![endif]-->

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment