javascript - How to lazy load Facebook's Like Box?

I have found a tutorial for lazy loading Facebook's like box, but it's appropriate only if you use one FB widget on a page.

How would it look like if you want to load "like button" normally, but would like to lazy load "like box", i. e. load it only if the user scrolls and like box is in the viewport?

Also, is it possible to do it without any plugins nad possibly without jquery, i. e. using only pure javascript?

Here is the mentioned code:

/** 
* check if facebookHolder is in viewport, and then load Like Box widget 
*/ 
$(document).ready(function() { 
function checkScrollingForWidget(event) { 
    $('#facebookHolder:in-viewport').each(function() { 
    $('#facebookHolder').append('<div id="fb-root"></div>'); 
    $('#facebookHolder').append('<fb:like-box href="" width="300" show_faces="true" stream="false" header="false"></fb:like-box>'); 

    jQuery.getScript('.js#xfbml=1', function() { 
        FB.init({status: true, cookie: true, xfbml: true}); 
    }); 

    $(window).unbind('scroll', checkScrollingForWidget); 
} 

$(window).bind('scroll', checkScrollingForWidget); 
});

Since Facebook's like box is so widely used and can slow down page loading a bit (even if it's async.), I was quite surprised to see that there are no newer tutorials how to do this. Is it possible at all?

Thank you in advance for your ideas.

This is Markus' code in a simple HTML document:

    <html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>

<script src=".js" type="text/javascript"></script>
<script src=".viewport.js" type="text/javascript"></script>


  <style type="text/css">
    .facebookHolder {
    height: 50px;
    background: #ccc;
}
  </style>



<script type="text/javascript">
$(document).ready(function() {
    jQuery.getScript('.js#xfbml=1', function() {
        // initiate like boxed already in viewport as soon as fb sdk loaded.
        checkScrollingForWidget();
    });

    function checkScrollingForWidget(event) { 
        $('.facebookHolder:in-viewport').each(function(index, item) {
            if (!$(item).hasClass('fb_loaded')) {
                $(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
                $(item).addClass('fb_loaded');
                FB.XFBML.parse();
            }
        }); 
    }

    $(window).bind('scroll', checkScrollingForWidget); 
});
</script>


</head>
<body>


<div id="fb-root"></div>

<div class="facebookHolder" data-url=""></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url=""></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url=""></div>


</body></html>

I have found a tutorial for lazy loading Facebook's like box, but it's appropriate only if you use one FB widget on a page.

How would it look like if you want to load "like button" normally, but would like to lazy load "like box", i. e. load it only if the user scrolls and like box is in the viewport?

Also, is it possible to do it without any plugins nad possibly without jquery, i. e. using only pure javascript?

Here is the mentioned code:

/** 
* check if facebookHolder is in viewport, and then load Like Box widget 
*/ 
$(document).ready(function() { 
function checkScrollingForWidget(event) { 
    $('#facebookHolder:in-viewport').each(function() { 
    $('#facebookHolder').append('<div id="fb-root"></div>'); 
    $('#facebookHolder').append('<fb:like-box href="http://www.facebook./forexagone" width="300" show_faces="true" stream="false" header="false"></fb:like-box>'); 

    jQuery.getScript('http://connect.facebook/en_US/all.js#xfbml=1', function() { 
        FB.init({status: true, cookie: true, xfbml: true}); 
    }); 

    $(window).unbind('scroll', checkScrollingForWidget); 
} 

$(window).bind('scroll', checkScrollingForWidget); 
});

Thank you in advance for your ideas.

This is Markus' code in a simple HTML document:

    <html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>

<script src="http://code.jquery./jquery-git.js" type="text/javascript"></script>
<script src="http://www.appelsiini/download/jquery.viewport.js" type="text/javascript"></script>


  <style type="text/css">
    .facebookHolder {
    height: 50px;
    background: #ccc;
}
  </style>



<script type="text/javascript">
$(document).ready(function() {
    jQuery.getScript('http://connect.facebook/en_US/all.js#xfbml=1', function() {
        // initiate like boxed already in viewport as soon as fb sdk loaded.
        checkScrollingForWidget();
    });

    function checkScrollingForWidget(event) { 
        $('.facebookHolder:in-viewport').each(function(index, item) {
            if (!$(item).hasClass('fb_loaded')) {
                $(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
                $(item).addClass('fb_loaded');
                FB.XFBML.parse();
            }
        }); 
    }

    $(window).bind('scroll', checkScrollingForWidget); 
});
</script>


</head>
<body>


<div id="fb-root"></div>

<div class="facebookHolder" data-url="https://www.facebook./Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook./yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook./stackoverflowpage"></div>


</body></html>

Share Improve this question edited Dec 29, 2013 at 20:57 asked Dec 28, 2013 at 12:41 take2 6142 gold badges17 silver badges32 bronze badges

:in-viewport is no native jquery. Have you imported the corrsponding plugin correctly? – Markus Kottländer Commented Dec 28, 2013 at 12:49

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You can add a Facebook widget any time dynamically, but you need call FB.XFBML.parse after adding it to the DOM.

This could be inteteresting for me too so I just fixed the tutorial script:

JSFiddle

Of course you need to import jquery and the viewport plugin (if you want to use it).

<script src="jquery.js"></script>
<script src="jquery.viewport.js"></script>

Then include fbroot tag only once and give the holders an specific data-url attribute because loading one url multiple times doesn't seem to be possible. Late we will read out this data-attribute.

<div id="fb-root"></div>

<div class="facebookHolder" data-url="https://www.facebook./Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook./yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook./stackoverflowpage"></div>

Then use the following jQuery code:

$(document).ready(function() {
    jQuery.getScript('http://connect.facebook/en_US/all.js#xfbml=1', function() {
        // initiate like boxed already in viewport as soon as fb sdk loaded.
        checkScrollingForWidget();
    });

    function checkScrollingForWidget(event) { 
        $('.facebookHolder:in-viewport').each(function(index, item) {
            if (!$(item).hasClass('fb_loaded')) {
                $(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
                $(item).addClass('fb_loaded');
                FB.XFBML.parse();
            }
        }); 
    }

    $(window).bind('scroll', checkScrollingForWidget); 
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to lazy load Facebook's Like Box? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)