This blog post has been updated, please scroll down to “update 1” and “update 2” sections. 

There are several ways of adding G+ button on your website, you must use the correct method to avoid lag as this affects your SEO.

This is just a quick tutorial that will enable you to implement the new Google +1 feature on your website with HTML5 syntax.

First thing is first, you need to include the following JavaScript file in your document.

<script type="text/javascript" src=""></script>

Please note that the JavaScript inclusion must use the HTTPS protocol. You can include the file at any point in your document but for performance reasons you should consider deferring the parsing of JavaScript files. By deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page which can improve performance. You can find more information on page speed optimisation.

Now that you have include the Plus One JavaScript file, it is now time to add the corresponding HTML5 placeholder. You can add the following code anywhere in your document, but you must ensure it the class is set to “g-plusone” else it won’t work.

<div class="g-plusone" data-size="medium" data-count="true"></div>

You can customize the look and feel of Google +1 button by including attributes prefixed with data-, for example if you want to customize it to have a small size you need the following:

<div class="g-plusone" data-size="small" data-count="true"></div>

Notice the “count” attribute is a boolean, you can set it to “true” or “false” to show/hide it. The following chart indicates the available types/sizes of +1 one button.

On a final note, Google will use the href value that you have passed. However, if the href attribute isn’t set, Google will next look for the rel="canonical" tag on the page. If that isn’t found, Google will use the document.location.href.


My colleague Dom Calisto has just pointed out that Google’s code doesn’t work in some browsers and I had forgotten to call the API. Please use the following code:

<!DOCTYPE html>



<meta charset="UTF-8" />

<title>Google +1 Demo</title>

<link rel="canonical" href="" />

<script type="text/javascript" src=""></script>

<script type="text/javascript">

function renderPlusone(){gapi.plusone.render("g-plusone", {"size": "small", "count": "true"});}



<body onload="renderPlusone();">

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




Here is a better way of implementing Google +1. I am using jQuery to trigger the function when document is ready, but you can go ahead and remove the jQuery if you are calling the API at the bottom of your document. The following code also allows you to customize Google +1 using lean and valid HTML5 code. Note, I am not using rel=canonical tag in this example, this is purely because I want the code to validate. You could always declare canonical but then the document wouldn’t validate. Check out the Google +1 button demo.

<!DOCTYPE html>

<html dir="ltr" lang="en-GB">


<title>Google +1 Button valid HTML 5</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="//" type="text/javascript"></script>

<script type="text/javascript" src=""></script>

<script type="text/javascript">


gapi.plusone.render("tall", {"size": "tall", "count": "true"});

gapi.plusone.render("small", {"size": "small", "count": "true"});

gapi.plusone.render("standard", {"size": "standard", "count": "true"});

gapi.plusone.render("tallbare", {"size": "tall", "count": "false"});

gapi.plusone.render("smallbare", {"size": "small", "count": "false"});

gapi.plusone.render("standardbare", {"size": "standard", "count": "false"}); });



<div id="tall"></div>

<div id="small"></div>

<div id="standard"></div>

<div id="tallbare"></div>

<div id="smallbare"></div>

<div id="standardbare"></div>