Facebook like plugin

Showing that Facebook SDK prevents display of the plugin button if it is not displayed for some time

by eitanp461

HTML

<script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5&amp;appId=230650050380161" id="facebook-jssdk"></script>

<h1>
Facebook like plugin
</h1>
This page renders 2 Facebook buttons. 
One is displayed after 200 msec
The other is displayed after 1000 msec.
Both button widths are logged after 2000 msec.
<div id="log"/>

JavaScript

const fastWrapper = "fast-fb-wrapper"
const slowWrapper = "slow-fb-wrapper"
const fastTimeout = 200;
const slowTimeout = 1000;
const logTimeout = 2000;

function addFB(wrapperId) {
  document.body.innerHTML += `<div id="${wrapperId}" style="display: none"><div id="${wrapperId}-fbbutton" class="fb-like fb_iframe_widget" data-href="https://www.facebook.com/Cloudinary" data-layout="button" data-action="like" data-show-faces="false" data-share="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="action=like&amp;app_id=230650050380161&amp;container_width=0&amp;href=http%3A%2F%2Fwww.facebook.com%2FCloudinary&amp;layout=button&amp;locale=en_US&amp;sdk=joey&amp;share=false&amp;show_faces=false"></div></div>`;
}

function revealButton(wrapper, delay) {
  setTimeout(() => {
    document.getElementById(wrapper).style.display = "block";
  }, delay);
}

// Log widths
function logWidth(wrapper) {
  setTimeout(function logWidth() {
    const fbButton = document.getElementById(`${wrapper}-fbbutton`);
    document.getElementById("log").innerHTML += `<p>${wrapper} width = ${fbButton.offsetWidth}`
  }, logTimeout);
}

function test(wrapper, delay) {
  addFB(wrapper);
  revealButton(wrapper, delay);
  logWidth(wrapper)
}
test(fastWrapper, fastTimeout);
test(slowWrapper, slowTimeout);


// Use MutationObserver to log changes to the plugin button

// Select the node that will be observed for mutations
const targetNode = document.getElementById(`${fastWrapper}-fbbutton`);

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
           ...