Pop-up de Google+ Badge no documentado
Hoy vamos a mostraros un tutorial de como agregar un pop-up de Google+ Badge y que por el momento esta característica no está documentada en la propia información que nos facilita Google, pero es totalmente funcional.
En artículos anteriores ya vimos como poner el botón +1 de Google+ en WordPress pero en esta ocasión vamos a emplear un pop-up para mostrar el Badge de Google+ y ofrecer al visitante la posibilidad de agregarnos a sus círculos.
Para los que no sepan que es el Google+ Badge lo explicaré de forma rápida. El Badge de Google+ no es más que el distintivo o insignia de un usuario en la red social Google+ y que además nos permite agregar al usuario a nuestros círculos e incluso hacer +1 a la página conectada con el perfil.
Toda la documentación existente sobre esta característica de la red social Google+ se encuentra disponible en el siguiente enlace: https://developers.google.com/+/web/badge/?hl=es
Podremos observar en la documentación oficial que no se habla en ningún momento sobre la característica del pop-up de Google+ Badge pero en cambio esta funcionalidad está disponible.
Tengo que dejar claro que se trata de un “hover pop-up”, es decir el pop-up se muestra al pasar con el puntero del ratón por encima del link del perfil de Google+. Para verlo en acción podéis pasar el ratón por encima de +ZeOVozIdea.
Como implementar el pop-up de Google+ Badge
Implementar este pop-up es bastante sencillo y sólo necesitamos que en la página se haga referencia al javascript del botón +1 de Google+, por ejemplo:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Si ya tienes el boton +1 en tu web no hace falta que vuelvas a agregar el código javascript.
Ahora sólo nos quedaría agregar el enlace a través de código HTML:
<a class="g-profile" href="https://plus.google.com/104546396099524006900">ZeO VozIdea</a>
En el código HTML del enlace observamos cómo hay que emplear la clase g-profile para que funcione el pop-up.
Resumiendo, los requisitos para implementar el pop-up del Badge son:
- Que esté presente el código javascript del +1 de Google+.
- El enlace debe tener la clase
g-profile. - La URL del perfil de Google+ a mostrar en el pop-up debe ser la URL canónica.
Este último punto es importante, ya que hay varias URLs de perfil de Google+, por ejemplo:
- https://plus.google.com/+ZeOVozIdea
- https://plus.google.com/u/0/+ZeOVozIdea
- https://plus.google.com/u/0/104546396099524006900
Todas las URLs anteriores no son validas para mostrar el pop-up, la única que funciona es:
- https://plus.google.com/104546396099524006900
Espero que os guste este pequeño truco y ya os adelanto que hablaré bastante sobre Google+ en siguientes artículos.