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="https://apis.google.com/js/plusone.js"></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.
UPDATE 1:
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>
<html>
<head>
<meta charset="UTF-8" />
<title>Google +1 Demo</title>
<link rel="canonical" href="http://www.elevatelocal.co.uk/" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
function renderPlusone(){gapi.plusone.render("g-plusone", {"size": "small", "count": "true"});}
</script>
</head>
<body onload="renderPlusone();">
<div id="g-plusone"></div>
</body>
</html>
UPDATE 2:
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">
<head>
<title>Google +1 Button valid HTML 5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
$(document).ready(function(){
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"}); });
</script></head>
<body>
<div id="tall"></div>
<div id="small"></div>
<div id="standard"></div>
<div id="tallbare"></div>
<div id="smallbare"></div>
<div id="standardbare"></div>
</body></html>
32 
1540 
70
9 Comments
Hello.
Data-type=”small” is not working. I can only see standard size, no matter what I try in my HTML5 documents.
How to make it “small with count” in HTML5 ?
It seems like there is more job for google to work on this.
Thnx for the code, in any way. :)
It is valid if nothing else.
Hi there Spooky, you are right. We’ve posted an update here. To keep things simple we’ve used an ID, it is also valid except for the canonical tag (which is always the case when using canonicals).
Yousaf is also working on an alternate version too. We’ll keep you posted.
@spooky I have the same problem — it’s ignoring the data-* attributes.
Hi Neil,
Check out the latest update, it should work and validate.
from the documentation I would expect this to work:
but it ignores the data-href
Is this a bug in the plus one or am I doing something wrong? I would rather use the html 5 syntax instead of their invalid markup tag
Hi Joe. It appears you are right – Google’s demo doesn’t work for the moment and the attributes aren’t being called. But if you were to use the js calls, as above, and wrap them in an external file it would make for cleaner markup and still be vaild.
Guys, It appears that html5 method is working from now on. I have just looked at my site and the small G-like button works with just this
Yousaf, you can now remove those
tags for the first and easiest HTML5 method. Thnx Google. :)I have used -del- tag for good in previous post… Sorry, my mistake! :D Whatever, starting today, Google has finnaly gave full support for the
variant of code.
No need for additional workarounds with js.
It is just as it should be from now on. :) The data-size attribute started working.
Cheers good people.
Hey Spooky,
That is great news, glad they support it now. Thanks for letting us know.