// 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.

Discussion

9 Responses to “Facebook Like Button – asynchronous loading with jQuery”

  1. Very helpful. Thank you!

    Posted by Pablo | April 28, 2011, 12:56 pm
  2. missing } in XML expression
    [Break On This Error] FB.init({status: true, cookie: true, xfbml: true });

    What’s wrong?

    Posted by rafael | April 30, 2011, 12:45 pm
  3. Have a look at the “html” Tag.
    Have you changed it?

    Posted by Fabian | April 30, 2011, 1:01 pm
  4. Super!
    Ich hatte es auf eigene Faust mit $.getScript() versucht und vergessen init() manuell aufzurufen, da es mit “normalem” Script Tag ohne funktioniert 🙁

    Posted by Patrick | July 4, 2011, 9:12 pm
  5. I will using this technique on my website http:// codedunia.in and i hope it works fine.

    Posted by yogendra | October 1, 2011, 1:24 am
  6. Thx mate, it works well!

    Posted by qlimax | October 4, 2011, 12:20 pm
  7. Do have anyone with same method a tip improve the performance for the twitter Button? Then i have the question. Must i place the jQuery Javascript Code above of the Facebook Like Button Tag Code or can i put this near to ?

    Posted by Alexander | April 28, 2012, 6:52 pm
  8. Why is this method better than the async scripts already provided by fb? We are using those at our website (examrace.com).

    Posted by Ram Shankar | September 10, 2012, 7:04 pm
  9. Your code snippets font size is faaarrr too small. Just sayin’, I have to zoom in like 4 times to be able to read it properly. 🙁

    Posted by Kyle Sevenoaks | December 11, 2012, 2:26 pm

Post a comment

About

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

more...

Twitter