Cómo hacer responsive tu badge de google plus con CSS

El badge de google plus lo podemos sacar fácilmente desde esta página. Definimos los parámetros, si lo queremos vertical u horizontal, con más o menos información y el ancho… Y aquí viene el problema del responsive.

Cuando maquetamos como responsive ese bagde que normalmente suele ir en el lateral lo acoplamos a la medida del sidebar, pero cuando lo vemos en tablet o móvil, seguramente ese sidebar haya cambiado de ancho y por tanto sobresalga o se quede corto. Para ello podemos crear 3 divs cuyo contenido sea exactamente igual pero en el que sólo cambie el ancho, algo así:

<div class="google-desktop">

<div data-href="https://plus.google.com/ID" data-width="180" data-rel="author" data-layout="portrait" ></div>
</div>

<div class="google-tablet">
<div data-href="https://plus.google.com/ID" data-width="430" data-rel="author" data-layout="portrait" ></div>
</div>

<div class="google-movil">
<div data-href="https://plus.google.com/ID" data-width="270" data-rel="author" data-layout="portrait" ></div>
</div>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Y en el CSS, mediante media queries, ocultar o no los divs que nos interesen con la propiedad display:

.google-desktop {display:block;}
.google-movil, .google-tablet {display:none;}

@media only screen and (max-width: 479px) {

.google-tablet {display:block;}
.google-desktop, .google-movil {display:none;}

}

@media only screen and (max-width: 320px) {

.google-movil {display:block;}
.google-desktop, .google-tablet {display:none;}

}

El problema de esta solución es que sólo funciona si las medidas que hemos aplicado en nuestro css a los cambios por responsive son fijas, es decir, en píxels.

¿A alguien se le ocurre cómo hacerlo con medidas relativas?
  • El arreglo tiene buena pinta, pero, ¿no va a ralentizar demasiado la carga al tener que 3 iframes externos?

    Buen aporte Dámaso.

    • Muchas gracias por el plugin, le pegaré un vistazo!

      Como dices uno de los problemas es el tiempo de carga, si sólo cargamos una vez el .js, tal y como está en el ejemplo, el tamaño del módulo de google plus son 17kb x 3 veces… No es demasiado pero para ahorrarnos esto, quizá, se podría hacer una variable por LESS que leyera del CSS el ancho o una variable de toda la vida en PHP

      Tengo que pegarle un vistazo a las tripas del plugin para ver cómo lo hace… gracias de nuevo!

  • Creo que esto te va a gustar http://wordpress.org/plugins/sz-google/. Funciona a las mil maravillas y soluciona todos los problemas de la insignia de Google+, aún así, gran aporte.