Pop-up de Google+ Badge no documentado

En Desarrollo, Tutoriales y Guías, Webmasters por

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.

Pop-up de Google+ Badge no documentado

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.

Comentarios (4)

Deja un comentario: