 |
| Lazy Load Facebook Like Box To Speed up Page Loading |
Also read; 5 Advanced Tips For Making Blogger Blog To Load Faster
Defer Facebook Developer Button
For better page performance this is an essential tip and as the page content is more important than widgets, it is much better to make a delay loading of these widgets so that it will load only when the whole page gets loaded.Lazy Load Facebook Like Box JavaScript
Add following code in your HTML widget. You just need to replace blue colored text as per your content.<!-- lazy loading of Facebook widget -->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#fbHolder').append('<div id="fb-root"></div>');
$('#fbHolder').append('<fb:like-box href="http://www.facebook.com/ID" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
FB.init({status: true, cookie: true, xfbml: true});
});
});
//]]>
</script>
<!-- lazy loading of Facebook widget -->
<div id="fbHolder">
<!-- put here your old Facebook widget box code -->
</div>
A demo is working here on this site, or you can check its performance on Page Speed and Yslow, significantly you will see the changes in the report. <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#fbHolder').append('<div id="fb-root"></div>');
$('#fbHolder').append('<fb:like-box href="http://www.facebook.com/ID" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
FB.init({status: true, cookie: true, xfbml: true});
});
});
//]]>
</script>
<!-- lazy loading of Facebook widget -->
<div id="fbHolder">
<!-- put here your old Facebook widget box code -->
</div>