In this tutorial we will explain how to have a Valid XTML Google Plus Share Button on your website, and how to use the code correctly.
We all have problems with the tag <g:plusone> which is not a valid one, and you will get an W3C Validation Error - "element "g:plusone" undefined". To fix this problem read the steps below.
Step 1 - Include Google Plus Script in Head
Between the <head> and </head> tags include the Google Plus Javascript File:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang:'en-US', parsetags:'explicit'}
</script>
Step 2 - Valid XHTML Google Plus Button
To render/place the code anywhere on your website put the code below between <body> and </body> tags:
<div id="plusone-div"></div>
<script type="text/javascript">
gapi.plusone.render('plusone-div',{"size": "tall", "bubble": "true"});
</script>
If you want to add a custom URL to your Google Plus Button, use the code bellow:
<div id="plusone-div"></div>
<script type="text/javascript">
gapi.plusone.render('plusone-div',{"size": "tall", "bubble": "true", "href": "http://www.cleanhdwallpapers.com"});
</script>
Set Custom Attributes
If you want to customize your button you should use the attributes below.
For SIZE you can use:
- small
- standard
- medium
- tall
For ANNOTATION you can use:
- bubble
- inline
- none
If this tutorial was useful, you can help me maintain this website with more tutorials by buying me a coffe (or at least the sugar).