When Google +1 button was initially released in to the wild it was slightly slow. Back then I wrote a short tutorial demonstrating a slightly different way of implemented the +1 button as compared to Google’s recommendation. In the previous example I was using jQuery to include the +1 button when the document was ready.

Although you can still use the existing +1 implementation method, I highly recommend the new asynchronous snippet. The async snippet allows your web page to continue loading while your browser downloads the +1 JavaScript.  By loading these elements in parallel the asynchronous method ensures the HTTP request to get the +1 button JavaScript doesn’t lead to an increase in your page load time.

How to add Google Plus 1 button asynchronously?

First you need to the add the following code where you want the button to render.

<g:plusone></g:plusone>

You then need to add the following code after the plus one tag.

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

If you want to change the size of the Google +1 button then you need to pass the relevant attribute in the plus one tag. For example, if you want a tall button you need to use the following code:

<g:plusone size="tall"></g:plusone>

For your reference here is a list of UI options:

Remember this code would not validate and there are alternative ways of implementing it. For example, you can add +1 button using HTML5 syntax.