Lazy load on hover Facebook and Google plus share buttons?

JavaScript
1

Could someone please help me out with a JavaScript code that will load Facebook like and Google plus share buttons on mouse hover.

I can’t use jQuery as it creates conflicts with some of my plugins.

Here is some codes that could help you going.

JavaScript

function loadTwitter()
{
    if (typeof (twttr) != 'undefined'){
        twttr.widgets.load();
    } else {
        $.getScript('http://platform.twitter.com/widgets.js');
    }
}

function loadFacebook()
{
    if (typeof (FB) != 'undefined') {
        FB.init({ status: true, cookie: true, xfbml: true });
    } else {
        $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
            FB.init({ status: true, cookie: true, xfbml: true });
        });
    }
}

function loadGooglePlus()
{
    if (typeof (gapi) != 'undefined') {
        $(".g-plusone").each(function () {
            gapi.plusone.render($(this).get(0));
        });
    } else {
        $.getScript('https://apis.google.com/js/plusone.js');
    }
}

HTML

<div class="socialButtons">
        <span class="twitterSpan"><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"></a></span>

        <span class="googleSpan"><div class="g-plusone" data-annotation="inline" data-size="medium" data-width="120"></div></span>

        <span class="facebookSpan"><div class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90"></div></span>
    </div>

I would like to show image show them on hover please help.

2

Your HTML looks a mess to me.
Does it validate?

3

I know you can’t place div inside the span.

But I am more interesting in making the JavaScript work please?

4

It is pointless to spend any effort in trying to get the JavaScript to work until the HTML is fixed up.

Have you done that yet?

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.