Load Facebook like, Google+ social buttons on mouse over

The following two techniques will definitely speed up your web page loading times if you want to use social sharing buttons.
The action performed by the first technique is simple:
1) Do not load or render third party resources (i.e. external javascript files) until visitor places the mouse over the social buttons.
2) Mimic social buttons appearance via simple images.
3) When the user hovers the buttons, temporarily used images are being hidden and replaced by the original buttons from Google, Facebook, LinkedIn, etc.
Here is more info on the subject: http://www.rustybrick.com/javascript-hover-effects-to-speed-up-page-load-time.html

First place div tag with id = sharebox and put simple .png mock-up graphics of the social buttons inside.
<div id=sharebox > <img src="social.png" /> </div>

<span id="social_share"><img src= "images/user.gif" /></span>
<div>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"></a>
<div class="g-plusone" data-annotation="inline" data-size="medium" data-width="120"></div>
<script type="IN/Share" data-counter="right"></script>
<div class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90"></div>
</div>

Then add this simple working JavaScript code placed below:

document.getElementById('social_share').addEventListener("mouseenter", load_scripts);
function load_js_script(src, call_back) {
    var scriptTag = document.createElement("script");
    scriptTag.type = "text/javascript";
    scriptTag.src = src;
    scriptTag.async = true;
    document.getElementsByTagName("head")[0].appendChild(scriptTag);
    scriptTag.onload = function () {
        if (typeof call_back != 'undefined') {
            call_back();
        }
    };
}

function load_scripts(e) {
    e.target.innerHTML = '';
    if (typeof twttr != 'undefined') {
        twttr.widgets.load();
    } else {
        load_js_script('//platform.twitter.com/widgets.js');
    }
    if (typeof FB != 'undefined') {
        FB.init({
            status: true,
            cookie: true,
            xfbml: true
        });
    } else {
        load_js_script("//connect.facebook.net/en_US/all.js#xfbml=1", function () {
            FB.init({
                status: true,
                cookie: true,
                xfbml: true
            });
        });
    }
    if (typeof gapi != 'undefined') {
        var gplus = document.getElementByClassName('g-plusone');
        gapi.plusone.render(gplus);
    } else {
        load_js_script('https://apis.google.com/js/plusone.js');
    }

    if (typeof IN != 'undefined') {
        IN.parse();
    } else {
        load_js_script("//platform.linkedin.com/in.js");
    }
}

Second and faster way of loading those buttons is by using specially styled Iframes. This way we are not loading the third-party libraries locally such as all.js or plusone.js which speeds the code significantly. Here is how:

document.getElementById('social_share').addEventListener("mouseenter", load_scripts);

function load_scripts() {
    e.target.innerHTML = '';
    makeIframe("https://plusone.google.com/_/+1/fastbutton?url=http://tools.royalsbg.com/test_social.html&size=medium&count=false", "google_slot");
    makeIframe("https://www.facebook.com/plugins/like.php?href=http://tools.royalsbg.com/test_social.html", "facebook_slot");
}

function makeIframe(url, call_id) {
    var iframe = document.createElement('iframe');
    iframe.id = call_id;
    iframe.src = url;
    document.body.appendChild(iframe);
}

P.S. These are just sample images. Please use/create placeholder images of your own taste.
Cheers!