JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.appelsiini.net/download/jquery.viewport.js"></script>
<div id="fb-root"></div>

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

CSS

.facebookHolder {
    height: 50px;
    background: #ccc;
}

JavaScript

$(document).ready(function() {
    jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
        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); 
});