Google +1 Button not W3C compliant

C

12

41

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.

Campania answered 2/6, 2011 at 16:37 Comment(3)

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? – Flotow 2/6, 2011 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 ... – Indignant 2/6, 2011 at 16:55

Thanks, that an interesting though, haven't realized that – Flotow 2/6, 2011 at 17:14

B

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)

Bywaters answered 2/6, 2011 at 16:42 Comment(2)

I will try your solution out, not sure if I can change the correct answer though. – Campania 24/6, 2011 at 9:12

Do you now how can I specify the "href" value without Javascript? – Hipped 27/7, 2012 at 8:46

M

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)

Marengo answered 23/6, 2011 at 14:9 Comment(3)

FYI I use this declaration in my page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="w3.org/1999/xhtml"> – Marengo 23/6, 2011 at 14:19

To define the URL would you add it to the JSON in .render? – Campania 24/6, 2011 at 9:13

I think so: <div id="plusone-div" class="plusone"></div> <script type="text/javascript"> gapi.plusone.render('plusone-div', { "size": "small", "count": "true", "href": "your_url_here" }); </script> – Marengo 27/6, 2011 at 16:26

I

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>

Indignant answered 2/6, 2011 at 16:45 Comment(6)

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. – Bywaters 2/6, 2011 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. – Kathernkatheryn 6/6, 2011 at 14:58

@Matthew - It IS in the "g" namespace, c.f. "g:plusone" - so, what's the problem? – Indignant 10/6, 2011 at 4:4

@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. – Bandanna 12/6, 2011 at 14:16

@Bandanna — 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 – Bywaters 12/6, 2011 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 "base.google.com/ns/1.0" (unless there is a statement by Google to this effect). – Kathernkatheryn 13/6, 2011 at 10:41

C

6

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.

Concernment answered 12/6, 2011 at 14:13 Comment(0)

W

2

Try this:

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

Widgeon answered 19/6, 2011 at 15:58 Comment(0)

B

2

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...

Berthold answered 5/7, 2011 at 18:11 Comment(0)

A

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>

Aixenprovence answered 20/7, 2011 at 18:42 Comment(1)

Lol taken from my own blog ;) – Campania 20/7, 2011 at 22:27

U

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.

Unfaithful answered 30/7, 2011 at 14:29 Comment(0)

M

0

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
>

Micronucleus answered 4/1, 2012 at 23:17 Comment(0)

O

0

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!

Oney answered 16/2, 2012 at 20:40 Comment(0)

T

0

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!

Tucket answered 20/7, 2012 at 11:38 Comment(0)

K

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>

Keystroke answered 26/1, 2015 at 15:18 Comment(0)

Recommended topics

Hot tags