Load FaceBook Like Box on Scroll Asynchronously

By Anil Gupta, 0  Tech Tips

Load facebook like box on scroll after page load using JQuery. Ajax load of FB LIKE widget allows asynchronous script and CSS to improve page load speed.


Loading Facebook Like Box after page load or on scroll is a pretty basic requirements these days when you are developing a responsive web design.

We load Like Box on our website only when the user has scrolled down to the level where FB Like box section starts.

This helps is reducing the initial page download time along with restricting the amount of data that gets downloaded.

The users (using smaller screen like mobile), who never scroll down, to reach the FB section never load the extra baggage.

Here is our tried and tested JQuery code to load FaceBook Like on demand and that too Asynchronously.

Difference between Asynchronous and Lazy Load on Scroll?

Asynchronous loading means that the Facebook like box scripts (js) and CSS would be loaded on page load by user, but would not stop parallel loading of other page resources like images, other scripts and CSS.

Load facebook LIKE box on scroll

Load Facebook LIKE box on scroll after page load

Lazy Load on Scroll on the other hand would NOT let the Facebook like box load its scripts and CSS until the user has actually scrolled down the the section of page, where the FB box is kept.

Lazy Load code

  1. Jquery is required
    Make sure you are loading JQuery in your web page before adding this code.If you don’t have it, you can add it using this line of code (using Google hosted JQuery CDN):

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    You can add this line of code either in <head>...</head> tag of your HTML page or at the bottom of the page just above the closing </body> tag.

  2. Choose your preferred Facebook box lazy load code.

    Copy and paste this FB Jquery Lazy load code at the bottom of your web page just before the closing </body> tag.

    <script>
    /**************************************************************/
    /*AM22 Named Function to load FB box - START*/
    
    var fb_loaded = false; //To track loading only once on a page.
    function loadFaceBook()
    {
        var fb_div = $("#facebookHolder");
        
        var top = fb_div.offset().top;
     
        if ( !fb_loaded && $(window).scrollTop() + $(window).height() > top ) 
        {
            fb_loaded = true;
          
            $('#facebookHolder').append('<div id="fb-root"></div>'); 
            $('#facebookHolder').append('inhouserecipes' width="300" show_faces="true" stream="false" header="false">'); //Change RED colored name to your Facebook page address. 
     
           jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() { 
              FB.init({status: true, cookie: true, xfbml: true}); 
           }); 
         } 
    } 
    
    /*AM22 Named Function to load FB - END*/ 
    /*AM22 Facebook Lazy load - START*/
     
    $(function () { 
       var fb_div = $("#facebookHolder"); 
       if (fb_div.size() > 0) { 
         $(window).scroll(loadFaceBook); 
       } 
    }); 
    /*AM22 Facebook lazy load - END*/ 
    </script>
    
    
    
    

    Copy and paste this Facebook Lazy load code at the bottom of your web page just before the closing </body> tag.

    <script>
    /**************************************************************/
    /*AM22 Named Function to load Facebook - START*/
    
    var fb_loaded = false; //To track loading only once on a page.
    function loadFaceBook()
    {
        var fb_div = $("#facebookHolder'"); //The ID of the FB LIKE BOX DIV tag
        
        var fb_data = fb_div.data();
        if ( !fb_loaded) 
        {
            fb_loaded = true;
          
            $('#facebookHolder').append('<div id="fb-root"></div>'); 
            $('#facebookHolder').append('inhouserecipes' width="300" show_faces="true" stream="false" header="false">'); //Change RED colored name to your Facebook page address. 
           
            jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() { 
               FB.init({status: true, cookie: true, xfbml: true}); 
            }); 
         }
    } 
    /*AM22 Named Function to load FaceBook- END*/ 
    /**************************************************************/ 
    /*AM22- Load Facebook on click of button - START*/ 
    $(function () { 
    $("#btnFBLoad").click(loadFaceBook); 
    }); 
    /*AM22- Load Facebook Like Box on click of button - END*/ 
    </script>
    
    
    

    Copy and paste this Facebook Lazy load code at the bottom of your web page just before the closing </body> tag.

    <script>
    /**************************************************************/
    /*AM22 Named Function to load Facebook- START*/
    var fb_loaded = false; //To track loading only once on a page.
    function loadFaceBook()
    {
        var fb_div = $("#facebookHolder");
        
        var top = fb_div.offset().top;
        var fb_data = fb_div.data();
     
        if ( !fb_loaded && $(window).scrollTop() + $(window).height() > top ) 
        {
            fb_loaded = true;
          
            $('#facebookHolder').append('<div id="fb-root"></div>'); 
            $('#facebookHolder').append('inhouserecipes' width="300" show_faces="true" stream="false" header="false">'); //Change RED colored name to your Facebook page address. 
    
            jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() { 
               FB.init({status: true, cookie: true, xfbml: true}); 
            }); 
         } 
         
         /*FB is not loaded - Show the button to load*/ 
         if (fb_loaded) { 
            $("#btnFBLoad").hide(); 
         } 
         else { 
            $("#btnFBLoad").show(); 
         } 
    } 
    /*AM22 Named Function to load Facebook- END*/ 
    
    /*AM22 Facebook lazy load - START*/ 
    
    $(function () { 
       var fb_div = $("#facebookHolder"); 
       if (fb_div.size() > 0) { 
          $(window).scroll(loadFaceBook); 
       } 
    } ); 
    /*AM22 Facebook lazy load - END*/ 
    /**************************************************************/ 
    /*AM22- Load Facebook Like Box on click of button - START*/ 
    
    $(function () { 
       $("#btnFBLoad").click(loadFaceBooK); 
    }); 
    /*AM22- Load Facebook on click of button - END*/ 
    </script>
    
    
    

  3. Add a DIV placeholder for Facebook
    Add this line of code where you want the Facebook to appear (for all 3 cases as mentioned above).

    <div id="facebookHolder"></div>
  4. Add the Facebook Like Box Load button (Only required if you chose button click code above)Add this DIV tag to show the button. This should ideally be placed at the FB box location in your HTML code.

    This button will show up when the FB Like Box not loaded automatically on scroll.
    If they were indeed loaded, the button will be hidden.

    In case you chose only the ‘Click’ load code, this button would show up irrespective of scroll.

     
    <button type="button" id="btnFBLoad" >Load FaceBook Like Box</button>
    

Related: Load Disqus comments on Scroll with JQuery


Loading FaceBook Lke Box On Scroll in WordPress

If you are using WordPress, JQuery is loaded automatically by core code.

But, here the location of the JQuery load matters to make our code work.

How to check location?

Go to any page/post of your site and Right click on your browser window->view Source->search for JQuery.js
Once found, you can see its location.It would most probably be either in the head section or the footer of web page.

Now, choose your case and then proceed:

  1. JQuery loads in HTML Head sectionBy default, WordPress loads JQuery in <head>section. Copy and paste the Facebook lazy load code in any file (like single.php or index.php, if you know how to edit them) file and you are all set.

    In case you are not familiar with php files, you can just add the code in a TEXT widget by going to WordPress Admin -> Appearance -> Widgets -> Text -> Copy and paste code. Now, add this widget to any sidebar.

    This would work as JQuery would have already been loaded when PHP files (or widget) loads or gets a hit.

  2. JQuery loads in footer section of web pageIf you are using a good optimized theme or a custom one, you might fall in this case. This is in-fact a recommended approach to speed up the website page load.

    In this case, your Facebook Like Box code in php or widget won’t work as JQuery is not available at the time of loading comments.

    Whats the solution?

    1. Create a new *.js file in your active theme’s folder. You can give it any name like fbLazyLoad.js.
    2. Add the above lazy load code (only the script portion) to this file. You can skip the opening and closing <script> tags.
    3. Add the following code to your WordPress active theme’s functions.php file.
      This code simply instructs wordpress to load your javascript file (i.e. FB lazy load) after JQuery has loaded.

      function am22_enqueue_custom_scripts()
      {
          wp_enqueue_script('am22-script', get_stylesheet_directory_uri() . '/fbLazyLoad.js', array('jquery'), FALSE, TRUE); 
      }
      add_action( 'wp_enqueue_scripts', 'am22_enqueue_custom_scripts', 30 );
      

      It would make sure that the lazy load code is executed only when JQuery is available.

      The benefit with this approach is the applicability in both cases i.e. even the one where JQuery is loaded in head section.

    4. Add the facebookHolder placeholder DIV code (given above) to any php file or a text widget.
      Example:

      Load Facebook like box on scroll in WordPress

      Load Facebook LIKE box on scroll in wordpress.

FAQ – Frequently Asked Questions

  1. Can we use this code with Facebook wordpress plugin?
    • No. You have to ditch the official facebook plugin to get this lazy load working.
  2. I have added the code and FB like box has stopped loading at all.
    • This is a very common case. Your web page is not loading JQuery before this FB boxload code gets executed. Please move JQuery load statement above this script code and things will start working.