Tutorial: Load the Google +1 button asynchronously

Tutorial: Load the Google +1 button asynchronously

Introduction

In our previous article, we explained how to produce a valid Google +1 button. That’s nice, but you will probably notice that the button is rendered only after your website is completely loaded. This approach is problematic, especially regarding the fact that during the loading of the script, your page appears to be frozen. And let’s say it, this button is slow!

Fortunately, there are some solutions to circumvent this problem. It is possible to load scripts asynchronously so that it does not block your webpage rendering, and the script will be ready to use as soon as it is loaded.

We will use a technique similar to the one used by Google Analytics, with the difference that we had to modify it a little so that it is still possible to customize the button while speeding it up a little.

Ready? Let’s go !

Implementation

First add your DIV tag:

<div id="plusone-div"></div>

Nothing complicated. Note that you must not add the “g-plusone” class to this DIV.

Then anywhere after the DIV tag, add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
 
function getElementByIdUniversal( id )
{
	return ( document.getElementById ) ? document.getElementById( id ) : document.all[ id ];
}
function plusoneready()
{
	gapi.plusone.render( "plusone-div", { "size": "tall", "count": "true" } );
}
 
(function() {
	var gp   = document.createElement( "script" );
	gp.type  = "text/javascript";
	gp.async = true;
	gp.src   = "https://apis.google.com/js/plusone.js";
 
	gp.onload = plusoneready;
	// Only for IE 6 and 7
	gp.onreadystatechange = function()
	{
		if( this.readyState == "complete" )
		{
			plusoneready();
		}
	}
	var div = getElementByIdUniversal( "plusone-div" );
	div.parentNode.insertBefore( gp, div );
})();
 
</script>

 

Explanation

Let’s explain this code a little so that you can understand it faster:

  1. The function “getElementByIdUniversal()” returns the element corresponding to the specified “id” parameter. It is similar to the “getElementById” function but it also work with old versions of Internet Explorer.
  2. The function “plusoneready()” is a callback that will be called once the Google +1 Javascript file is loaded.
  3. Then we begin a self-running anonymous function.
  4. We create a SCRIPT element of type ‘text/javascript’.
  5. We take care to set the “async” member to “true” so that the script will load asynchronously.
  6. We set the “src” member to “https://apis.google.com/js/plusone.js”. Note that you should use “https” and not “http” if you want to avoid the cost of a useless redirection…
  7. We set the “onload” member to be our callback function.
  8. For IE 6 and 7, we have to use the “onreadystatechange” member to be able to call our callback.
  9. We find our DIV element using its ID
  10. We add our SCRIPT tag just before our DIV
  11. End of the anonymous function

 

Conclusion

And that’s it! Your Google +1 button will now load asynchronously and should not stop other elements from rendering.

If you have some suggestions to improve the previous code or found any issue, do not hesitate to give your feedback in the comments!

Happy coding.

11 Responses

  1. Joe D. says:

    Much thanks but I am getting a Javascript Error in latest version of Chrome. Sometimes the button loads fine despite the error but sometimes it doesn’t load at all.

    The error is: UncaughtTypeError: Cannot read property ‘parentnode’ of null.

    Right after the last line of the code.

    Any ideas?

    -Joe

  2. Hi Joe,

    The only explanation is that when the Javascript code is executing, the DIV with ID of “plusone-div” was not found, thus you have this error. Be sure to place this Javascript section after the “plusone-div” DIV element so that it always find it.

    Regards,

    Gabriel

  3. mrdeus says:

    Thank you, very helpful!

  4. PTroka says:

    Ok, but how to implement this when I have more than one button on the page???

  5. Thiru says:

    If Gmail is not login the pop-up window will display while clicking G+ (google Plus) button. how restrict the pop-up window? and how to get gmail account login status? Please help me. Thanks in advance.

  6. Gereggi says:

    Thanks for share this tips..

  7. Jarwo says:

    um, it doesnt work for me 🙁 any answer?

  8. Ugo.c.Ugo says:

    Please gabriel i have done this process, but i am having issues when i re-analyse my site using the google page analysis tool, it still shows that the plusone.js script is still a problem

  9. Moussya says:

    not working sir, please update tuts

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.