Jueves, 25 de Agosto de 2011
Colocar el botón "Google +1" manteniendo una correcta validación html W3C
Siguiendo las instrucciones proporcionadas por Google para mostrar el nuevo botón '
Google +1' (como el que aparece en el pie de página de esta web), nos encontramos que nuestro html deja de superar la
validación html proporcionada por el W3C.
El código consta de dos partes:
- En nuestra cabecera, llamaremos el javascript necesario:
<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>
- En el cuerpo de la página, allá donde queremos que aparezca el botón, colocamos:
<g:plusone></g:plusone>
Y este último punto es el que genera el conflicto con el W3C, ya que "<g:plusone></g:plusone>" no es una etiqueta estandard.
Para solucionar el problema, basta con reemplazar dicha línea por estas otras:
<script type="text/javascript">
// <![CDATA[
document.writeln('<g:plusone></g:plusone>');
// ]]>
</script>
Finalmente, podréis añadir atributos como "size" cuyos posible valores son "small", "medium" (opción por defecto) y "big" y que afectarán evidentemente al tamaño del botón.
Este es el código utilizado en esta web:
<script type="text/javascript">
// <![CDATA[
document.writeln('<g:plusone size="big"></g:plusone>');
// ]]>
</script>
[ ver todos los artículos ]
Comentarios
Esta solución no es valida pra IE
Martin,
el 05.09.2011
Hola Martín,
Google ha dejado de dar soporte a las versiones de IE inferiores a la 9, eso lamentablemente incluye su botón Google+ el cual no funciona en versiones de IE anteriores a la 9, independientemente de si se utiliza el script aquí expuesto o directamente el código proporcionado por Google.
Saludos
Vinx,
el 05.09.2011
El botón si funciona en ie, funciona tanto en ie7, ie8 como ie9. Cuando no funciona es cuando se construye a través de javascript.
Un saludo.
Martin,
el 05.09.2011
jeje esto empieza a ser intrigante, yo sinceramente no he conseguido verlo con IE7 (con IE8 posiblemente me equivocara, ahora no lo tengo a mano), tanto con el javascript publicado aquí como con el código proporcionado por google.
Ahora mismo acabo de probar entrando por ejemplo en www.viengo.com, con Firefox todo bien pero con IE7 sigue sin salirme el botón.
Vinx,
el 05.09.2011
Efectivamente, valida bien en W3C pero el Internet Explorer, como siempre, toma su propia decision de no mostrar el boton (solo a traves de javascript). En el resto de navegadores se ve perfecto. Si alguien consigue que funcione en IE que avise, por favor!
Ruben - Rock lyrics,
el 23.09.2011
Solución:
Utilizar <div class="g-plusone"></div> en vez de <g:plusone></g:plusone>
Martin,
el 28.09.2011
Muy buena solución Martín!! sin embargo con este código no veo como poner el parámetro "size" para cambiar el tamaño del botón, he hecho varias pruebas y siempre sale el tamaño por defecto.
Vinx,
el 28.09.2011
Para eso hay dos opciones:
1 De la forma <div class="g-plusone" data-size="standard" data-count="true"></div> pero esta no valida desgraciadamente.
2 La que estoy probando ahora que es coger el código fuente que genera la etiqueta directamente y ponerle la url adecuada en cada caso. Parece que funciona.
Martin,
el 28.09.2011
Creo que conseguí ponerlo correctamente por fin. La forma sería así:
El botón lo pondríamos con <div class="g-plusone"></div>
y luego el tamaño se lo daríamos con jQuery de la forma jQuery('.g-plusone').attr("data-size","small");
Esta solución valida y funciona en todos los navegadores. Cuando lo probéis contadme haber si le encontráis algún problema.
Saludos.
Martin,
el 28.09.2011
Hola,
Nunca he conseguido que me funcione. Utilizo Firefox 3.6 y lo veo en otras webs, pero no conswigo implementarlo. Agradecería un ejemplo completo, porque no hay manera.
Javier,
el 29.09.2011
Hola, yo tampoco consigo verlo en las versiones anteriores a la 9 de IE.
Donde colocas el código de jQuery??
Salu2
David,
el 11.10.2011
Solución para los que siguen teniendo problemas, en el body agregar este codigo en lugar del indicado arriba:
<script type="text/javascript">
// <![CDATA[
document.writeln('<g:plusone />');
// ]]>
</script>
Espero que os sirva de ayuda ^^
Adri,
el 15.02.2012
PD: Con este codigo del post anterior tambien podeis meterle las etiquetas size o href, a prueba de w3 ;)
Adri,
el 15.02.2012
Aquí les envío la solución para IE8 y anteriores (con el tamaño pequeño):
<!--[if lt IE 9]>
<div class="g-plusone"></div>
<script>
function cambiarTamano(){
$('.g-plusone').attr("data-size","small");
};
cambiarTamano();
</script>
<![endif]-->
si quieren cambiar el tamaño a "big" o "medium", sólo cambien el "small".
¡SI FUNCIONA!
isaac,
el 21.02.2012
