Validación W3C con boton +1 de Google

[ayar]

Buenas a tod@s,

He estado tratando de validar mi web en W3C, y me salen 2 Errores al incluir el boton de +1 de google.

Los errores son (losiento salen en ingles):

Line 107, Column 25: there is no attribute "href"
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Line 107, Column 54: element "g:plusone" undefined
You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).


¿Alguien sabe como solucionar esto?

Saludos y gracias,
Ayar Aguirre

[Smolky]

Lo que te dice allí es que cambies el tipo de documento de strict a Transitional.

¿Cómo es el código de Google para el botón +1?

[ayar]

EL codigo es:
Esto en head:

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

Esto donde aparece el boton:

<g:plusone></g:plusone>

¿Como cambio el tipo del cocumento?

[zerokilled]

buenas,
aunque cambie el tipo de documento seguirá siendo un documento inválido. la razón es porque <g:plusone> no es un elemento de html ni xhtml. creo que como único puede validar ese elemento es si tiene un namespace, pero solo validará en xhtml. y sobre el atributo href, habría que primero determinar cual es el elemento. de todos modos, cuando te dice que no existe dicho atributo para tal elemento, significa que debes eliminar el atributo para que valide en ese doctype o bien cambias el doctype por uno que incluya el atributo.

[emprear]

Tambien lo podes insertar así, necesitas de jQuery


en el head

Código HTML:

<script type="text/javascript" src="/js_css/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
//<![CDATA[
{lang: 'es'}
//]]>
</script>
 

En el body, donde quieras que aparezca el boton

Código HTML:

<p id="googlemas"><!-- boton + 1 --></p>
 

Y finalmente al final del documento, antes del cierre del body

Código HTML:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(window).bind('load', function(e){ 
  $('#googlemas').after('<g:plusone size="small" href="http://luzdecielo.com"><\/g:plusone>'); 
  $.getScript('http://apis.google.com/js/plusone.js'); 
});
});
//]]>
</script>
 

con la url de tu web

Valida perfectamente en Strict
Saludos

[ayar]

Muchas gracias a todos!
Con la solucion de Emprear paso la validación perfectamente, y aparece +1 de google.
Gracias y un Saludo Ayar Aguirre

[ciisteado]

Otra solución sencilla es con un simple document.writeln

En el encabezado:

Código:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
	{lang: 'es-419'}
</script>

Y donde quieres que aparezca el botón:

Código:

<script type="text/javascript">
	// <![CDATA[
	document.writeln('<g:plusone size="medium"></g:plusone>');
	// ]]>
</script>

Y con eso pasa sin broncas la validación...

Saludos!

[zerokilled]

@ciisteado,
considerando que estas usando CDATA, se entiende que el documento es XHTML. por tanto, en XHTML no existe document.write ni document.writeln.

[ayar]

@ciisteado y @zerokilled con la solcion que dio: @emprear funciona perfecta ya esta resuelto.
Gracias de todos modos

[ayar]

Parece ser que tengo que volver con el tema...
me fijado que la solcion de @emprear funciona perfectamente en todos los navegadores menos uno... como no el Internet Explorer...
Si alguien puede ayudarme para que funcione en todos ya sea modificando esa opcion o con otra nueva....

Muchas gracias!

[emprear]

Con que versión de IE tenes el problema, con el 9 al menos funciona

Saludos

[ayar]

Yo tengo instalado el 9.0.08112.16421 y no lo veo ni en la mia ni en la tuya...
pero con los demas navegadores perfecto...
saludos

[emprear]

A ver, no entiendo que es lo que no se ve?



Esa es una captura de IE9.
Si podés pasá tu url

Saludos

[ayar]

No la tengo todavia en internet la estoy desarrollando en local...
Si veo el codigo si escribe todo pero eso no se ve nada mas... no se porque.

Gracias

[Nanod10]

Hablando de validacion... esos codigos funcionan perfectos! =)

Pero...

Cuando agregue el codigo para publicar articulos o productos en el "muro" de google+, me hizo poner unos metatags y tambien un adicional en la etiqueta html

Las dejo:

Código:

<html itemscope itemtype="http://schema.org/Product">

W3c error: Line 2, Column 54: "itemscope" is not a member of a group specified for any attribute
Line 2, Column 63: there is no attribute "itemtype"

Metas en head:

Código:

<meta itemprop="name" content="" />
<meta itemprop="description" content="" />
<meta itemprop="image" content="" />

W3c error: Line 49, Column 16: there is no attribute "itemprop"

Tambien la misma aplicacion pero de facebook.

Código:

<meta property="og:title" content="" />

W3c error: Line 34, Column 16: there is no attribute "property"

[emprear]

Si usas html5 va a validar

Código HTML:

<!DOCTYPE html>
    <html lang="es" itemscope="itemscope" itemtype="http://schema.org/Product" >
    <head>
    <meta charset="utf-8">
    <meta itemprop="name" content="">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="">
    <title></title>
    </head>
    <body>
    <p>sssss</p>
    </body>
    </html>
 

De todas maneras te aclaro, la validación de un documento, no es un fin en si misma, es una forma cumplir con una serie de normas que van a permitir detectar errores de marcado y evitar comportamientos extraños dada la cantidad de browsers que puedan leer tu código, pero en este caso en particular, los atributos en el <html> no van a afectar la visualización del documento.
Sería bueno de todas formas que Google aclarase esto a la hora de hacernos poner estas etiquetas y atributos propietarios, ya que uno de los principales motivos por los que intentamos la validación, es por el SEO, siendo Goolge nuestro principal objetivo.

saludos