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

12 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
  10. Just wish to say your article is as surprising. The clearness in your post is just nice and i could assume you are an expert on this subject.

    Well with your permission let me to grab your RSS feed to keep updated with forthcoming post.
    Thanks a million and please continue the rewarding work.

    Posted by swarovski | February 26, 2014, 2:49 pm
  11. I will ask to my developer regarding the same because its fact that facebook like implementation on website affects the website loading time.

    Posted by CareerOrbits | January 17, 2015, 7:25 am
  12. In support of this point, it is to be remembered that the http://weddinginvitations4u.net/invite:161890307786631003 rear areas were rarely Both sides zero’d in on and had pre-registered road and rail junctions in rear That British and Imperial reinforcements for cavalry would as often as not go to transport units says something about the weight of casualties they To say nothing of the casualties faced from medical

    Posted by happy anniversary | March 26, 2016, 5:45 pm

Post a comment

About

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

more...

Twitter