Google +1 Button not W3C compliant

Question

So I've been playing with Google's +1 button trying to get it on my website, but it's not W3C compliant.

Here's the code:

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'en-GB'}
</script>

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium" href="http://www.example.org"></g:plusone>

Does anyone know why this happens and how to make this compliant? Thanks

EDIT: To get this to pass through the validation, I wrote an article on my website.

The `{lang: 'en-GB'}` part looks weird to me. Firstly because the same script tag is loading from `src`, so I don't think there should be any more code in it. Secondly, the object literal is not assigned to anything, so what's the point of it? — mkilmanas, Jun 02 '11 at 16:43
@mkilmanas, while the browser will ignore the contents of the SCRIPT element if the SRC attribute is provided, a script author can still write code that retrieves the contents of the SCRIPT element (i.e., the `{lang: 'en-GB'}` portion in the above) and act on it. It's a convenient pattern for bundling a JS object literal that a script can use as parameters or configuration, etc. Just FYI ... — dossy, Jun 02 '11 at 16:55

score 24 · Accepted Answer · edited Sep 30 '11 at 16:00

24

Does anyone know why this happens?

Because Google designed it to use tag soup instead of HTML

How to make this compliant?

The documentation has alternative markup that is valid under the draft HTML 5 specification:

<div class="g-plusone" data-size="standard" data-count="true"></div>

If you want it to work with HTML 4.x or XHTML 1.x then you might be out of luck (although you might be able to add the non-compliant markup using JS, but that would just be a hack to conceal it from validation and not at all in the spirit of valid markup)

edited Sep 30 '11 at 16:00

genesis

50,477
20
96
125

answered Jun 02 '11 at 16:42

Quentin

914,110
126
1,211
1,335

I will try your solution out, not sure if I can change the correct answer though. – ingh.am Jun 24 '11 at 09:12
Do you now how can I specify the "href" value without Javascript? – Ivan Kuckir Jul 27 '12 at 08:46

score 11 · Answer 2 · answered Jun 23 '11 at 14:09

11

Insert this code in the header:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang:'en', parsetags:'explicit'}
</script>

Then insert this code where you want the button:

<div id="plusone-div" class="plusone"></div>

<script type="text/javascript">
      gapi.plusone.render('plusone-div',{"size": "small", "count": "true"});
</script>

The complete answer can be found here (in French)

answered Jun 23 '11 at 14:09

Gilbou

5,244
6
24
27

FYI I use this declaration in my page: – Gilbou Jun 23 '11 at 14:19
To define the URL would you add it to the JSON in .render? – ingh.am Jun 24 '11 at 09:13
I think so:
– Gilbou Jun 27 '11 at 16:26

score 9 · Answer 3 · answered Jun 02 '11 at 16:45

9

I'm guessing you're trying to validate XHTML. The closest you're going to come is to successfully validating is by defining the "g" namespace on your element by adding this:

xmlns:g="http://base.google.com/ns/1.0"

i.e.,

<html xmlns:g="http://base.google.com/ns/1.0"> ... </html>

answered Jun 02 '11 at 16:45

dossy

1,617
16
26

1

If you want it to pass the W3C Markup Validator then you would also need to write a custom DTD and point the Doctype at it. Of course, while this would be *valid*, it won't be valid (X)HTML. – Quentin Jun 02 '11 at 16:51
Unless Google have provided this advice, it is NOT legitimate. It is not up to page authors to decide that "plusone" should live in the Google namespace provided above; only Google have that authority. – Matthew Wilson Jun 06 '11 at 14:58
1

@Matthew - It IS in the "g" namespace, c.f. "g:plusone" - so, what's the problem? – dossy Jun 10 '11 at 04:04
@Quentin> no, the X is for "eXtensible". By adding the custom namespace & DTD, you *are* keeping it XHTML compliant, since the spec itself defines that means of extending the markup. – Paul Jun 12 '11 at 14:16
@Paul — It is extensible in the sense that it is built on XML and you can mix namespaces. XHTML + MathML (for example) is "XHTML + MathML" not "XHTML". The spec is explicit in that mixed namespace documents are [not strictly conforming](http://www.w3.org/TR/xhtml1/#well-formed) – Quentin Jun 12 '11 at 20:35
@Dossy: no, it just has a "g:" prefix in tag-soup markup. There's no XML namespace in use, so it's not declared to be part of the namespace defined by "http://base.google.com/ns/1.0" (unless there is a statement by Google to this effect). – Matthew Wilson Jun 13 '11 at 10:41

score 6 · Answer 4 · edited Aug 19 '11 at 07:09

The simplest way to make Google Plus One code to validate: Just put:

<div class="g-plusone"></div>

Instead of:

<g:plusone size="medium" href="http://www.example.org"></g:plusone>

Drawbacks: you cannot add parameters such as 'count' or 'size', or the code will not be valid any more.

It's Google's proposed code for HTML5, but will work for other (X)HTML flavours. In HTML5 you CAN add parameters such as 'data-count', data-size', etc.

score 2 · Answer 5 · edited Sep 18 '11 at 16:45

2

Try this:

<div class="g-plusone" data-size="standard" data-count="true"></div>

edited Sep 18 '11 at 16:45

cfillion

1,340
11
16

answered Jun 19 '11 at 15:58

Xavier

21
1

score 2 · Answer 6 · answered Jul 05 '11 at 18:11

Keep the code before you close the body tag, and replace:

 <g:plusone size="medium"></g:plusone>

by :

<div class="g-plusone" id="gplusone"></div>
<script type="text/javascript">
var ValidMe=document.getElementById("gplusone");
ValidMe.setAttribute("data-size","medium");
ValidMe.setAttribute("data-count","true");
</script>

As usual, it does the trick...

score 1 · Answer 7 · answered Jul 20 '11 at 18:42

1

http://james-ingham.co.uk/posts?p=google-plusone-w3c-valid

<!-- Put inside the <head> tag. -->
<script type="text/javascript"
        src="http://apis.google.com/js/plusone.js">
    {lang: 'en-GB'}
</script>

<!-- Put where you wish to display button. -->
<script type="text/javascript">
    document.write('<g:plusone size="medium" href="http://www.example.org/post"></g:plusone>');
</script>

answered Jul 20 '11 at 18:42

seo outsourcing

11
1

2

Lol taken from my own blog ;) – ingh.am Jul 20 '11 at 22:27

score 1 · Answer 8 · answered Jul 30 '11 at 14:29

1

its just simple

Use the following inside a div tag which you can configure to place it wherever you want in your page and it is valid.

<div class="g-plusone"></div>

I am using it in Our Web site www.armaven.com. Check it out. If you want.

answered Jul 30 '11 at 14:29

Magi

11
1

score 0 · Answer 9 · answered Jul 20 '12 at 11:38

The solution i implemented is already present in this thread and it was posted by Gilbou but i have to add that <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> is not mandatory to be placed in the header.

<div id="plusone-div" class="plusone"></div> <script type="text/javascript"> gapi.plusone.render('plusone-div',{"size": "medium", "count": "true", "href": "http://www.YOURSITE.com/"}); </script>

Place the above code where you want the +1 button to be but make sure you replace http://www.YOURSITE.com/ with the link of the page to be +1. If you want add other parameters to the gabi.plusone.render function check https://developers.google.com/+/plugins/+1button/#plusonetag-parameters and to see if it is W3C compliant go to http://validator.w3.org/. Good luck!

score 0 · Answer 10 · edited May 23 '17 at 12:25

0

Following on from Quentin's answer, you can add a W3C-compliant href attribute by using data-href:

<div class="g-plusone" data-size="standard" data-count="true"></div>

edited May 23 '17 at 12:25

Community

1
1

answered Jan 26 '15 at 15:18

Jonathan

13,947
17
94
123

score 0 · Answer 11 · answered Jan 04 '12 at 23:17

The other way can be to Customize DTD as I did. I downloaded the xhtml1-strict.dtd

Find the following entity definition in the dtd file

<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc; )*">

And edit it to be as follow (This will help to resolve the contextual validation i.e. where should this tag appear)

<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc; | g:plusone)*">

Now defining new element

<!ELEMENT g:plusone EMPTY>

And then listing attributes

<!ATTLIST g:plusone
  href %URI; #IMPLIED
  size CDATA #IMPLIED
>

score 0 · Answer 12 · answered Feb 16 '12 at 20:40

This is the solution I came up with...

<span id="plusone"></span>
<script type="text/javascript">
    //< ![CDATA[    
       $("#plusone").html('<g:plusone></g:plusone>');
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    //]]>    
</script>

Make sure you have <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> or other link to jquery script in your header!

Google +1 Button not W3C compliant

12 Answers12

Linked

Related