Valid XHTML Google Plus Button

Posted on June 17, 2012 by Dan Doicaru 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="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
Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 7 = 13

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.