CODEWITHSUNDEEP
phpjavascriptjqueryhtml
ShadowZzz
ShadowZzz

Reputation: 415

Delay Social network loading

I am trying to delay the loading of the following code for social networks: and still have it work.

<div id="social">
<div id="socialButton"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script><fb:like href="http://example.com" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>&nbsp;&nbsp;&nbsp;<<< Facebook Like</div>
<div id="socialButton"><g:plusone></g:plusone>&nbsp;<<< Google +1</div>
<div id="socialButton"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="example" ></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><<< Twitter Tweet</div>
<div id="socialButton"><a class="DiggThisButton DiggCompact"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Digg this</div>
<div id="socialButton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Stumble Upon

</div>
</div>

I want to use JS or Jquery to do this and plan to have $(document).ready(function() { }); to ensure the document is loaded prior to loading the social network.

Any idea what i can use, and how i can implement it... Im thinking im going to leave the div #socail and have it document.write to it but i dont know how i can pull it off.

All suggestions are appropriated.

Upvotes: 0

Views: 558

Answers (6)

Jon Grant
Jon Grant

Reputation: 11520

You could simply use the defer attribute on your <script> tags:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js" defer="defer"></script>

This causes them to be loaded after the page has rendered.

Upvotes: 0

ShadowZzz
ShadowZzz

Reputation: 415

I am unable to fix it with the ones above, it keeps corrupting the code or displays the code at the location of the script rather than in the social div.

I was wondering if it would be able to load the scripts later by loading the following with a delay and leaving the rest intact:

<script src="resources/scripts/main_script.js" type="text/javascript"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script>

since my main goal is to p

Upvotes: 0

Jon Grant
Jon Grant

Reputation: 11520

Just slap it all in a html() function call:

$(document).ready(function() {
    $('#social').html(
        '<div id="socialButton"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script><fb:like href="http://example.com" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>&nbsp;&nbsp;&nbsp;<<< Facebook Like</div>' +
        '<div id="socialButton"><g:plusone></g:plusone>&nbsp;<<< Google +1</div>' +
        '<div id="socialButton"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="example" ></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><<< Twitter Tweet</div>' +
        '<div id="socialButton"><a class="DiggThisButton DiggCompact"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Digg this</div>' +
        '<div id="socialButton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Stumble Upon/div>'
        );
});

Leave the <div id="social"></div> on the page, empty.

Upvotes: 0

micha
micha

Reputation: 1085

<div id="social">
</div>
<script id="socialTemplate" type="text/plain">
<div id="socialButton"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script><fb:like href="http://example.com" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>&nbsp;&nbsp;&nbsp;<<< Facebook Like</div>
<div id="socialButton"><g:plusone></g:plusone>&nbsp;<<< Google +1</div>
<div id="socialButton"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="example" ></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><<< Twitter Tweet</div>
<div id="socialButton"><a class="DiggThisButton DiggCompact"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Digg this</div>
<div id="socialButton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Stumble Upon
</script>
<script type="text/javascript">
window.addEventListener("load",function(){
document.getElementById("social").innerHTML = document.getElementById("socialTemplate").innerHTML;
});
</script>

Because socialTemplate has type text/plain it is treated as such. But when you place its contents into the empty social tag, the browser will initialize it.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

In a similar scenario I implemented a small function to load the script necessary to make social buttons properly work:

_MYNS.appendSocialWidget = function(id, url) {
   var js, fjs = document.getElementsByTagName('script')[0];
   if (document.getElementById(id)) { return; }
   js = document.createElement('script'); js.id = id;
   js.charset = "utf-8";
   js.src = url;
   fjs.parentNode.insertBefore(js, fjs);
};

and then when document.ready event occurs I loaded all the plugins I needed, like so

if ($('#social').length) {

    /* Facebook send and like */
    $('<div id="fb-root" />').appendTo($('body'));
    _MYNS.appendSocialWidget('facebook-jssdk', '//connect.facebook.net/it_IT/all.js#xfbml=1');

    /* twitter: tweet */        
    $('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>').appendTo($('#social'));
    _MYNS.appendSocialWidget('twitter-widget', '//platform.twitter.com/widgets.js');

    /* Google : +1 */
    $('<div class="g-plusone" data-size="medium" data-annotation="bubble" \
        data-expandTo="top"></div>').appendTo($('#social'));
    _MYNS.appendSocialWidget('google-plusone', 'https://apis.google.com/js/plusone.js');

    ...
};

Of course I had some pages without social buttons, so I check before the existence of the element. _MYNS is a simple namespace, just to not pollute the global scope

I don't know if I hit the point but hope this helps anyway.

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

With JavaScript, you can use setTimeout to execute code after a delay. For instance:

setTimeout(function(){
    //use jQuery to generate that code block and append it to the document
}, 10000);

This will execute the code inside the anonymous function after 10,000 milliseconds (10 seconds).

Alternately, you could have the code run in the page as normal, but hide it. After your chosen delay, reveal the social media elements. This is probably simpler since you may want to assume the Facebook and Twitter scripts are going to run unknown code.

Upvotes: 1

Related Questions