javascript - content - meta property w3schools
Botón Google+1 no compatible con W3C (12)
¿Alguien sabe por qué pasa esto?
Porque Google lo diseñó para usar sopa de etiquetas en lugar de HTML
¿Cómo hacer esto compatible?
La documentation tiene un marcado alternativo que es válido según el borrador de la especificación HTML 5:
<div class="g-plusone" data-size="standard" data-count="true"></div>
Si desea que funcione con HTML 4.x o XHTML 1.x, es posible que no tenga suerte (aunque podría agregar el marcado no compatible con JS, pero eso sería un truco para ocultarlo). validación y no en absoluto en el espíritu de marcado válido)
Así que he estado jugando con el botón +1 de Google intentando obtenerlo 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 por la validación, escribí un artículo en mi website .
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 tener <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> u otro enlace a jquery script en tu encabezado!
Guarde 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, hace el truco ...
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 inserta este código donde quieras 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 here (en francés)
La forma más sencilla de hacer que el código de Google Plus One se valide: Simplemente coloque:
<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 ''conteo'' o ''tamaño'', o el código ya no será válido.
Es el código propuesto por Google para HTML5, pero funcionará para otras (X) versiones HTML. En HTML5, PUEDE agregar parámetros tales como ''conteo de datos'', tamaño de datos '', etc.
La otra forma puede ser Personalizar DTD como lo hice. He descargado el xhtml1-strict.dtd
Busque la siguiente definición de entidad en el archivo dtd
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc; )*">
Y edítelo de la siguiente manera (esto ayudará a resolver la validación contextual, es decir, dónde debería aparecer esta etiqueta)
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc; | g:plusone)*">
Ahora definiendo nuevo elemento
<!ELEMENT g:plusone EMPTY>
Y luego listando atributos
<!ATTLIST g:plusone
href %URI; #IMPLIED
size CDATA #IMPLIED
>
La solución que implementé ya está presente en este hilo y fue publicada por Gilbou, pero debo 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 como +1. Si desea agregar otros parámetros a la función gabi.plusone.render, consulte https://developers.google.com/+/plugins/+1button/#plusonetag-parameters y para ver si es compatible con W3C vaya a http://validator.w3.org/ . ¡Buena suerte!
Prueba esto:
<div class="g-plusone" data-size="standard" data-count="true"></div>
Siguiendo la answer de Quentin, puede agregar un atributo href compatible con W3C usando data-href :
<div class="g-plusone" data-size="standard" data-count="true"></div>
Supongo que estás tratando de validar XHTML. Lo más cerca que vendrá es validar exitosamente definiendo el espacio de nombres "g" en su 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>
es simplemente simple
Use lo siguiente dentro de una etiqueta div que puede configurar para colocarla donde desee en su página y que sea válida.
<div class="g-plusone"></div>
Lo estoy usando en nuestro sitio web www.armaven.com . Echale un vistazo. Si tu quieres.
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>