Avoid loading Facebook buttons and statistics multiple times

lurie. I would use vanilla Javascript in the front end. This way, you don’t need to invalidate any server cache. Here is a untested solution.

The Javascript File – using ES6 features and forEach polyfill

In your main javascript file:

'use strict';

/**
 * @summary Clones social buttons and insert them elsewhere
 *
 * Clones social buttons and insert them elsewhere in the DOM after the window.load event.
 * Can be used to clone anything else, in fact.
 *
 * @listens window.load
 *
 * @param string $sourceSelector a CSS3 element selector for the element to be cloned
 * @param array $wrappersSelectors an array of CSS3 element selectors to append the cloned elements
 * @returns voide
 */
function cloneSocialButtonsES6( sourceSelector="", wrappersSelectors = [] ) {
    // get the source element
    var originalButtons = document.querySelector( sourceSelector );
    // if wrappersSelectors is empty or not-provided, bail and logs to console
    if ( wrappersSelectors.length === 0) {
        console.error('wrappersSelectors must be a non-empty array of CSS3 selectors');
        return;
    }
    // for each item in wrappersSelectors array, clones the source element
    wrappersSelectors.forEach( function( wrapper ){
        // get the wrapper element in the DOM
        var wrapper = document.querySelector( wrapper );
        // for each wrapper in the array, clones the source element and appends it to wrapper
        var clone = originalButtons.cloneNode( true );
        wrapper.appendChild(clone);
    });
}

// lazy load cloneSocialButtons on window.load event
if ( window.addEventListener ) {
    window.addEventListener('load', cloneSocialButtons, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", cloneSocialButtons);
}
else {
    window.onload = cloneSocialButtons;
};

This version makes use of certain ES6 features like forEach method for arrays and default value for function arguments. It’s cleaner, but has less browser support.

I recommend you to use a service like Polyfill.io or to use Chris Ferdinandi’s Array.forEach polyfill as suggested in his Pocket Guides You could use in a separate file with all utilities and polyfills you might need.

/**
 * Array.prototype.forEach() polyfill
 * @author Chris Ferdinandi
 * @license MIT
 */
if (window.Array && !Array.prototype.forEach) {
    Array.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

The Javascript File – Without forEach polyfill

Better browser support, but much more verbose;

'use strict';

/**
 * @summary Clones social buttons and insert them elsewhere
 *
 * Clones social buttons and insert them elsewhere in the DOM after the window.load event.
 * Can be used to clone anything else, in fact.
 *
 * @listens window.load
 *
 * @param string $sourceSelector a CSS3 element selector for the element to be cloned
 * @param array $wrappersSelectors an array of CSS3 element selectors to append the cloned elements
 * @returns voide
 */
function cloneSocialButtons( sourceSelector, wrappersSelectors ) {
    sourceSelector = sourceSelector || '';
    wrappersSelectors = wrappersSelectors || [];
    // get the source element
    var originalButtons = document.querySelector( sourceSelector );
    // if wrappersSelectors is empty or not-provided, bail and logs to console
    var wrappersLength = wrappersSelectors.length;
    if ( wrappersLength === 0) {
        console.error('wrappersSelectors must be a non-empty array of CSS3 selectors');
        return;
    }
    // for each item in wrappersSelectors array, clones the source element
    for (var i = 0; i < wrappersLength; i++) {
       // get the wrapper element in the DOM
       var wrapper = document.querySelector( wrappersSelectors[i] );
       // for each wrapper in the array, clones the source element and appends it to wrapper
       var clone = originalButtons.cloneNode( true );
       wrapper.appendChild(clone);
    }


}

// lazy load cloneSocialButtons on window.load event
if ( window.addEventListener ) {
    window.addEventListener('load', cloneSocialButtons, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", cloneSocialButtons);
}
else {
    window.onload = cloneSocialButtons;
};

The PHP Function

Placed in functions.php or in a site specific plugin.

function wpse_285324_social_scripts() {
    wp_register_script( 'wpse_285324_social_buttons_cloner', $path_to_the_javascript_script, array(''), '0.1.0', true);
    wp_register_script( 'wpse_285324_social_buttons_cloner');

};
add_action('wp_enqueue_scripts', 'wpse_285324_social_scripts');

Important note

I think it’s a good starting point for you.

Let me know if it helps.