Valid XHTML Google Plus Button

Posted on June 17, 2012 in HTML/CSS Category

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="">
{lang:'en-US', parsetags:'explicit'}

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"});

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": ""});

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
Related Articles
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

8 + one =

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.