Load Facebook like, Google+ social buttons on mouse over

This technique will speed up your web page loading times. The action performed is simple:
1) Do not load or render resources (i.e. external javascript files) until the user places its mouse over them.
2) Mimic their appearance via simple images.
3) When the user hovers social media buttons, the temporary images are getting hidden and replaced by their relevant counterparts(i.e. scripts 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

You can test the hover loading and the simple working JavaScript code is placed below:

$('.sharebox').mouseenter(function () {
    if (load_count() == 1) {
        $(".tmp_img").remove();

        $.getScript("https://apis.google.com/js/plusone.js");
        $.getScript("//connect.facebook.net/bg_BG/all.js#xfbml=1", function () {
            FB.init({
                status: true,
                cookie: true,
                xfbml: true
            });
        }); 

    }
});

function load_count() {
    return 
    load_count.count = ++load_count.count || 1
}

For avoiding pre-loading everytime the .js libraries, I'm using a static variable as a counter. This could be also done by just unbinding the MouseEnter event handler once the user has hovered the images via $('.sharebox').unbind();

Second and more faster way of loading these buttons is by using specially styled Iframes. This way we are not loading the all.js or plusone.js which speeds the code significantly. Here is how:

function makeIframe(url, call_id) {
    $(document.body).append('<iframe id="' + call_id + '" >');
    $('iframe#' + call_id).attr('src', url);
}
$(".g_img").remove();
$(".fb_img").remove();
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");
});

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

---