// you’re reading...

Development PHP 

Facebook Like Button – asynchronous loading with jQuery

To prevent the Facebook like Button’s from blocking your page loading you can load the Facebook JavaScript librarys with the jquery “getScript” function.

First at all you need modify your HTML Tag in your Page Header, because we are using the OpenGraph and the FBML Schema to display the Like Button on the Page.

First you need to add the following code to your Page Header

 
xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/"

Sample Header:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" lang="de">
<head>
.....




Insert the Javascript:

<script type="text/javascript">
  // prevent jQuery from appending cache busting string to the end of the FeatureLoader URL 
  var cache = jQuery.ajaxSettings.cache; 
  jQuery.ajaxSettings.cache = true;
  // Load FeatureLoader asynchronously. Once loaded, we execute Facebook init 
  
  jQuery.getScript('http://connect.facebook.net/de_DE/all.js', function() {      
    FB.init({appId: 'your_app_id-optional', status: true, cookie: true, xfbml: true});    
  });
  // just Restore jQuery caching setting
  jQuery.ajaxSettings.cache = cache;
</script>

To integrate the Button insert just this code

<div id="fb-root"></div>
  <fb:like href="<YOUR URL>" layout="button_count" show_faces="false" width="450" height="35" action="like" colorscheme="light" font="trebuchet ms" allowTransparency="true"></fb:like>	  

Thats it! Feed free to use an modify the Code.

About

This in the personal Blog from Fabian Siebler, a Lead Developer and Projektmanager from Germany.

more...