Botón de Google + 1 no compatible con W3C


Así que he estado jugando con el botón +1 de Google tratando de conseguirlo en mi sitio web, pero no es compatible con W3C.

Aquí está el código:

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

¿Alguien sabe por qué sucede esto y cómo hacerlo compatible? Gracias

EDITAR: Para que esto pase a través de la validación, escribí un artículo en mi sitio web.

Author: Ian Kemp, 2011-06-02

12 answers

¿alguien sabe por qué sucede esto?

Porque Google lo diseñó para usar sopa de etiquetas en lugar de HTML

¿Cómo hacer que esto sea compatible?

La documentación tiene un marcado alternativo que es válido bajo el borrador de la especificación HTML 5:

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

Si quieres que funcione con HTML 4.x o XHTML 1.x entonces es posible que no tengas suerte (aunque es posible que puedas agregar el marcado no compatible usando JS, pero eso sería solo un truco para ocultarlo de la validación y no en absoluto en el espíritu de marcado válido)

 24
Author: Quentin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-30 16:00:56

Inserte este código en el encabezado:

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

Luego inserte este código donde desee el botón:

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

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

La respuesta completa se puede encontrar aquí (en francés)

 11
Author: Gilbou,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-23 14:09:05

Supongo que estás intentando validar XHTML. Lo más cerca que vas a llegar es a validar con éxito es definiendo el espacio de nombres "g" en tu elemento agregando esto:

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

Es decir,

<html xmlns:g="http://base.google.com/ns/1.0"> ... </html>
 9
Author: dossy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-02 16:45:03

La forma más sencilla de hacer que el código de Google Plus One valide: Solo pon:

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

En lugar de:

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

Inconvenientes: no puede agregar parámetros como 'count' o 'size', o el código ya no será válido.

Es el código propuesto por Google para HTML5, pero funcionará para otros sabores (X)HTML. En HTML5 PUEDE agregar parámetros como 'data-count', data-size', etc.

 6
Author: Ricardo de la Vega,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-19 07:09:40

Mantenga el código antes de cerrar la etiqueta del cuerpo, y reemplace:

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

Por:

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

Como de costumbre, funciona...

 2
Author: SuN,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-05 18:11:32

Prueba esto:

<div class="g-plusone" data-size="standard" data-count="true"></div>
 2
Author: Xavier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-18 16:45:59

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>
 1
Author: seo outsourcing,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-20 18:42:22

Es simple

Use lo siguiente dentro de una etiqueta div que puede configurar para colocarla donde quiera en su página y es válida.

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

Lo estoy usando en Nuestro sitio Web www.armaven.com . Échale un vistazo. Si quieres.

 1
Author: Magi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-30 14:29:35

La otra forma puede ser personalizar DTD como lo hice yo. He descargado el xhtml1-strict.dtd

Encuentre la siguiente definición de entidad en el archivo dtd

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

Y editarlo para que sea como sigue (Esto ayudará a resolver la validación contextual, es decir, dónde debe aparecer esta etiqueta)

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

Ahora definiendo un nuevo elemento

<!ELEMENT g:plusone EMPTY>

Y luego listar atributos

<!ATTLIST g:plusone
  href %URI; #IMPLIED
  size CDATA #IMPLIED
>
 0
Author: Shoaib Nawaz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-04 23:17:56

Esta es la solución que se me ocurrió...

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

Asegúrese de que tiene <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> u otro enlace al script jquery en su encabezado!

 0
Author: Brandon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-16 20:40:55

La solución que implementé ya está presente en este hilo y fue publicada por Gilbou, pero tengo que agregar que <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> no es obligatorio colocarlo en el encabezado.

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

Coloque el código anterior donde desea que esté el botón +1, pero asegúrese de reemplazar http://www.YOURSITE.com/ con el enlace de la página que sea +1. Si desea añadir otros parámetros a la gabi.plusone.función de renderizado check https://developers.google.com/+ / plugins / + 1button/ # plusonetag-parámetros y para ver si es compatible con W3C ir a http://validator.w3.org / . ¡Buena suerte!

 0
Author: Andrei T,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-20 11:38:47

Siguiendo la respuesta de Quentin , puede agregar un atributo href compatible con W3C usando data-href:

<div class="g-plusone" data-size="standard" data-count="true"></div>
 0
Author: Jonathan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:25:06