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.


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);

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.