Earlier in 2011 Google launched it’s +1 feature, which is the latest addition to Google’s own Social Network known as Google+. Think of a Google Plus One button along the same lines as a Facebook “Like” button.
It’s a way of telling others that you “Like” a web page and/or found it useful.
So why should you consider adding a Google Plus One button to your web pages? The general feeling is that at some point in the future they are likely to affect Google’s search rankings, and web sites which are not using +1 may find themselves further down the search results. Obviously this is not good, so now is the time to think about adding +1 buttons to some, or all of your web pages.
The problem is that although we are given us valid code for the Google Plus One button, it’s only for those using the new HTML5. The rest, (or rather, most of us) have to make do with the alternative code which is not valid HTML. So let’s see how we can add a shiny new +1 button to our web page while maintaining valid HTML.
Step 1 – Replace the Google tag
The first thing we need to do is remove the non standard <g:plusone> tag and replace it with a standard <div> tag:
<div id="plusone"></div>In this example we have used the ID “plusone” as it’s a logical name but you can use any ID you wish.
Step 2 – Set the google plus one button size
We need to specify the size of the button to ensure a space is left for it in your web page layout. To do this we use a second <div> and set the button height and width in the CSS file. You will need to check Google’s documentation to find the size of each button. Once you know the size of your chosen button style you can set this in your CSS:
#plus { width: 106px; height: 24px; }NOTE: You can add additional styling to this <div> such as float or margin to position the +1 button exactly where you need it.
All we need to do then is wrap this second <div> around the one for the button:
<div id="plus"><div id="plusone"></div></div>Here we have used the ID “plus”, but again you can give it any name you want.
Step 3 – The Google Javascript
Now we need to insert the link to Google’s Javascript. Place this at the end of your page code, just before the closing </body> tag:
<script type="text/javascript"
src="https://apis.google.com/js/plusone.js">
{"lang": "en-GB", "parsetags": "explicit"}
</script>
The important part here is the “explicit” setting.
Final Step
Now we just need a call to instruct the browser to insert the button in place of your <div>:
<script type="text/javascript">
gapi.plusone.render("plusone",
{"size": "standard", "count": "true"});
</script>
NOTE: “plusone” will need to be changed to whatever name you gave the <div>. The count and size options set the style of the Google Plus One button in the normal way. The maximum button width can vary if there is a counter following it so please see Google’s documentation for the table of exact button sizes.
You will now have a Google Plus One button on your web page with valid HTML markup.
Acknowledgement: www.jonathan.rawle.org
Comments closed