VINX Programación Web, Barcelona
669 344 302   vinx@vinx.info

Jueves, 25 de Agosto de 2011

Colocar el botón "Google +1" manteniendo una correcta validación html W3C

Un pequeño truco para mantener una correcta validación html de nuestras páginas webs

Siguiendo las instrucciones proporcionadas por Google para mostrar el nuevo botón 'Google +1', nos encontramos que nuestro html deja de superar la validación html proporcionada por el W3C.

El código consta de dos partes:

  1. En nuestra cabecera, llamaremos el javascript necesario:
    <script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>

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

Escrito por Martin, el 5/9/2011 a las 12:16

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

Escrito por Vinx, el 5/9/2011 a las 15:15

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.

Escrito por Martin, el 5/9/2011 a las 16:21

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.

Escrito por Vinx, el 5/9/2011 a las 17:01

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!

Escrito por Ruben - Rock lyrics, el 23/9/2011 a las 10:04

Solución:

Utilizar <div class="g-plusone"></div> en vez de <g:plusone></g:plusone>

Escrito por Martin, el 28/9/2011 a las 12:54

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.

Escrito por Vinx, el 28/9/2011 a las 12:59

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.

Escrito por Martin, el 28/9/2011 a las 13:49

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.

Escrito por Martin, el 28/9/2011 a las 16:44

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.

Escrito por Javier, el 29/9/2011 a las 10:31

Hola, yo tampoco consigo verlo en las versiones anteriores a la 9 de IE.

Donde colocas el código de jQuery??

Salu2

Escrito por David, el 11/10/2011 a las 18:43

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

Escrito por Adri, el 15/2/2012 a las 21:04

PD: Con este codigo del post anterior tambien podeis meterle las etiquetas size o href, a prueba de w3 ;)

Escrito por Adri, el 15/2/2012 a las 21:05

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!

Escrito por isaac, el 21/2/2012 a las 19:11

muy bueno el articulo, muchas gracias

Escrito por manuel, el 12/11/2012 a las 8:34

buena explicación

Escrito por delineante, el 12/11/2012 a las 8:41

 

Déjanos tu opinión:






Compártelo


¿De qué se habla en esta web?

Usamos cookies propias y de terceros para analizar tus hábitos de navegación. Si continuas navegando consideramos que aceptas su uso. OK | más detalles