Google+ está teniendo bastante éxito entre bloggers, sobre todo porque el rey de las búsquedas se está haciendo más sociable y es importante contar con está red social como apoyo a nuestro blog. Dos de las principales formas de integrar Google+ en nuestro blog son la inclusión del botón +1 en los artículos y la integración de nuestro perfil en dicha red para que nuestros lectores puedan seguirnos en Google+.
Existen diferentes formas de insertar el botón +1 en nuestro blog, así como otras tantas para insertar un enlace a nuestro perfil, pero vamos a ver otra diferente para insertar ambos conjuntamente en un widget de WordPress, quedando de esta forma:
Supongo que a muchos no les resultará tan estético como a mí, pero por suerte se puede usar cualquier otra imagen como enlace al perfil, según nuestras preferencias. Vamos a ver el procedimiento que he seguido para crear esta.
Creación de la imagen del perfil
Para crear una imagen con los colores de Google+ y el logotipo sobre vuestra imagen de perfil o logo, podéis acceder a esta sencilla web:
Tan sólo tenemos que subir la imagen que queramos y elegir un tipo de personalización de Google+.
Como podéis ver, yo he elegido la tercera y luego con Photoshop he añadido esta imagen dentro de otra con el tamaño adecuado según el widget que uso, que tiene un máximo de 280 píxeles. Esta imagen final compuesta deberá ser del tamaño adecuado según el lugar donde queramos que aparezca. En mi caso obtuve esta imagen al final:
Una vez tenemos la imagen en nuestro ordenador la subimos al servidor que queramos, bien sea el mismo hosting del blog o cualquier otro. El siguiente paso consiste en añadir mediante HTML el enlace a nuestro perfil de Google+ con el siguiente código:
<a href=»https://plus.google.com/100000242929724813348/posts» target=»_blank»><img src=»http://www.dropbox.marcefx.com/pics/googleplusicon.png» alt=»Marce Castro en Google+»></a>
En los atributos del enlace podemos poner cualquiera que queramos. Yo sólo he puesto el target=”blank” para que mi perfil se abra en otra ventana diferente. Lógicamente tendremos que cambiar la dirección de enlace a nuestro perfil y la dirección dónde tenemos alojada la imagen, ambas en negrita en el ejemplo anterior.
Añadiendo el botón +1
Para añadir el botón +1 he usado el siguiente código:
<!– Código boton +1 –> <p aling=»left»>
<g:plusone size=»medium» annotation=»inline» width=»280″></g:plusone></p>
<!– Place this render call where appropriate –>
<script type=»text/javascript»> window.___gcfg = {lang: ‘es’}; (function() { var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true; po.src = ‘https://apis.google.com/js/plusone.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })(); </script>
He usado este en concreto ya que el botón +1 sólo para la primera página y me gusta que aparezca el total de personas con un icono.
Creando un widget con el botón y la imagen de perfil dentro
Un vez tenemos ambos elementow creados podemos meterlos dentro de un widget de texto para mayor comodidad. Yo lo he preferido de esta forma ya que así puedo controlar en qué páginas aparece mediante el plugin Display Widgets. En las entradas normales uso el botón +1, así que sólo uso este widget de Google+ en la página principal.
Para separar el botón +1 del badge he usado una línea con los colores de Google+. Podéis usar esta misma o cualquier otra imagen que creéis con un ancho máximo según el widget y una altura de 2 ó 3 píxeles. El código final queda de esta forma:
<p align=»center»>Recomienda <strong>MarceFX</strong></p>
<!– Código boton +1 –>
<p aling=»left»><g:plusone size=»medium» annotation=»inline» width=»280″></g:plusone></p> <!– Place this render call where appropriate –> <script type=»text/javascript»> window.___gcfg = {lang: ‘es’}; (function() { var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true; po.src = ‘https://apis.google.com/js/plusone.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })(); </script>
<!– Barra de separación –> <p><img src=»http://www.dropbox.marcefx.com/pics/googleplusseparar.png»</img></p> <!– Badge personalizada –> <p align=»center»>Añade <strong>MarceFX</strong> a tus círculos</p> <a href=»https://plus.google.com/100000242929724813348/posts» target=»_blank»><img src=»http://www.dropbox.marcefx.com/pics/googleplusicon.png» alt=»Marce Castro en Google+»
Cómo veréis, lo he metido en un DIV para centrar todo. Para terminar introducimos este código en un widget de texto y lo ponemos donde queramos. Seguro que vosotros hacéis uno más bonito que el mío, pero como se suele decir, lo importante es participar…
