Website Administration Services
WebsiteAdministrator.com.au
Website Google PlusOne Button
Website Administrator Know How Articles
Social Networks Series
 |
Add the Google +1 (plusone) Button with Strict W3C Validation
|
|
|
Just to be clear, these two methods also work with most all HTML formats, and one will work in w3c strict too.
Sharepoint has it's "like it" button and now Google has introduced their "+1" button to help us tell each other about pages we think are cool. But how do we go about adding this Google button into our webpage and can we make it work in strict html formats?
The Google code requires you add some html code into the <head> and <body> sections of your web page. The standard Google code however, will also make your page fail W3C validation when using their recommended format.
But of course, we can get around that too using our second method. The second method is the one that we use on this website. Though this page uses the variaton given at page bottom.
The methods.
Method One
Adding the plusone (+1) Button using the Google Code
This is the Google code to add a plusone (+1) button to your page. It will fail with W3C strict validation and upset HTML TIDY, but this is standard Google code.
This code uses the canonical link given in your link rel tag as the source page to link if it exists. Though not mandatory, this is recommended. Refer to our free online seo course for more data on the link rel tags.
<!-- Place this in the HEAD section of your code -->
<link rel="canonical" href="http://www.websiteadministrator.com.au/index.html" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Place this in the Body section of your code where you would like the PlusOne button to appear -->
<g:plusone></g:plusone><!-- end GooglePlusOne code from www.websiteadministrator.com.au -->
And as you can clearly see, there is no standard HTML tag g:plusone and so yes, W3C failure is inevitable with this use.
In all methods, please don't forget to change the canonical link to suit your own webpage (yes, page, not just the website)!
Method Two
Adding the plusone (+1) Button using Javascript only Code
But we can use javascript to get around the Google "special" tag so we will pass W3C validation with ease. The head section is the same as the above method, but we do alter the body code a little.
<!-- Place this in the HEAD section of your code -->
<link rel="canonical" href="http://www.websiteadministrator.com.au/index.html" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Place this in the BODY section of your code where you would like the PlusOne button to appear -->
<div class="g-plusone"></div><!-- end GooglePlusOne code from www.websiteadministrator.com.au -->
And with this code, we will pass validation. Yes!
Method Three (same as method two - but method three is only for php enabled websites)
Adding the plusone (+1) Button using Javascript only Code and PHP
Some of you might use a PHP enabled website (or a cms website like drupal, wordpress, joomla etc.) and would like to have a simple PHP styled code to automatically add the canonical link for you. So we can include a little php code in the head section of the html to achieve this. We still need to add the body part of the following code at the exact place on the page want to see the google plus one button appear.
This has the added benefit of ensuring your canonical link is free of typos too. And Don't forget to test your page and check that the canonical link is correct after you have saved your new file to the server.
<!-- Place this in the HEAD section of your code -->
<link rel="canonical" href="http://<?php $url=$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];echo $url;?>" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Place this in the BODY section of your code where you would like the PlusOne button to appear -->
<div class="g-plusone"></div><!-- end GooglePlusOne code from www.websiteadministrator.com.au -->
And as this code is really the same as number two, we will pass validation. Yes!
And that's all there is to it.
Having fun with Google PlusOne Display Options for Methods 2 & 3
"small", "medium", "standard" and "tall"
If you are not coding for strict validation, your google plus one button can come in a variety of sizes. "small" 24x15, "medium" 32x20, "standard" 38x24 and "tall" 50x20. You can also change various attributes to more closely resemble what you want by configuring attributes inside the opening <div class tag>. Some valid attributes are: data-size="small" ["medium", "standard" or "tall"], data-annotation="none" ["bubble" or "inline"], data-align="left" [or "right"]. Inline can show faces.
eg. <div class="g-plusone" data-size="tall" data-annotation="inline" data-align="right" ></div>
Don't forget to add the head section!
If you are coding for W3C xHTML strict validation, then give the campisi variable a try for a touchdown...
<!-- start www.websiteadministrator.com.au google PlusOne button code-->
<div id="gplusone">
<script type="text/javascript">
//<![CDATA[
var campisi = document.createElement('g:plusone');
campisi.setAttribute("align","left");
campisi.setAttribute("size","medium");
campisi.setAttribute("annotation","inline");
document.getElementById("gplusone").appendChild(campisi);
//]]>
</script>
</div><!-- end www.websiteadministrator.com.au google PlusOne button code-->
test if this page passes with W3C using their Strict HTML validation checker
(opens in a new window or tab)
If you haven't done so, follow this link to learn how to add the facebook like button with a W3C pass.
Fin.
