JSFiddle - React, Tailwind, and code Playground

by pnoeric

HTML

<p id='loadmore'>Click here to load more Facebook like buttons. Each time it will add a box to the page, then run FB.XFBML.parse() to create the like button.<br><br>More detail in console log.</p>
<div id='fb-root'></div>
<div id='holder'>
    <div class='box'>
        <fb:like href="http://test.com/a" width="100" layout="button_count" show_faces="false" send="false"></fb:like>
    </div>
</div>

CSS

.box {
    width:100px;
    height:30px;
    border:solid 2px green;
    padding:10px;
    margin:20px;
}
#loadmore {
    cursor:pointer;
    font-weight:bold;
    padding:10px;
}

JavaScript

$(function () {
    $('#loadmore').click(function () {
        $.ajax({
            type: 'post',
            url: '/echo/html/',
            data: {
                html: '<div class="box" style="clear:both;float:left;"><fb:like class="fb-like"  href="http://test.com/a'+Math.floor((Math.random()*10000)+1)+'" width="100" layout="button_count" show_faces="false" send="false"></fb:like><fb:like style="float:left;" class="fb-like"  href="http://test.com/a'+Math.floor((Math.random()*10000)+1)+'" width="100" layout="button_count" show_faces="false" send="false"></fb:like></div>',
            },
            success: function (html) {
                // wrap HTML in special div so we can find it later
                newDivName = "d" + String(new Date().valueOf());
                var $newhtml = $("<div id='" + newDivName + "'>" + html + "</div>");
                $('#holder').append($newhtml);

                // walk through new HTML, get all FBXML bits and parse them
                console.log('finding and XFBML parsing anything that matches $("#' + newDivName + ' .fb-like")');
                $('#' + newDivName + ' .fb-like').each(function () {
                    console.log('found something with class = .'+$(this).attr('class'));
                    FB.XFBML.parse(this);
                });
            }
        });
    });

});




// all code below is directly from Facebook developer docs

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=173603499485572";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));