27 de febrero de 2017

Añadir los iconos de redes sociales en Blogger

Añadir los iconos de redes sociales en Blogger


Añadir al blog los iconos o botones de las redes y medios sociales facilita la socialización de sus contenidos al poder ser seguido y compartido por un mayor número de lectores. Al mismo tiempo favorece su promoción a través de las recomendaciones que vayan otorgando los visitantes y que posibilitarán una rápida difusión de sus contenidos, un incremento de su popularidad y ser reforzado desde otros sitios web. Esto con mucha probabilidad supondrá un aumento de visitas y una mejora del posicionamiento SEO.

Blogger nos facilita la tarea de incorporar estos botones de medios sociales añadiéndolos en cada una de las entradas publicadas.

Para agregarlos tan solo tenemos que ir al menú Diseño → Entradas del blog → Editar.

Diseño-Editar Entradas del Blog


En la ventana de configuración del Gadget Entradas del blog pulsamos con el ratón sobre la casilla "Mostrar botones para compartir".

Hacer clic en mostrar botones para compartir


A partir de ahora estos botones se incluirán en cada entrada tal como se muestra en la siguiente imagen,

Botones de redes sociales en la entrada


Los botones que incluye son,
🌑 Gmail que enviará la entrada a una dirección de correo electrónico.
🌑 Blogger que creará un enlace al blog desde una entrada.
🌑 Twitter, Facebook y Pinterest que compartirá la entrada en estas redes sociales.
🌑 G+1 para compartir la entrada en Google plus o hacer +1

Es cierto que Blogger facilita la inclusión de estos iconos en el blog pero es probable que el aspecto, iconos a incluir o su ubicación en el blog no se ajuste a nuestras necesidades o gustos. En este caso existen opciones que nos permiten configurar qué iconos mostrar, dónde y cómo.


Incluir en la cabecera del blog botones de redes sociales


Voy a añadir al blog los iconos de las redes sociales de dos formas distintas,

🌑 Con la herramienta gratuita AddThis.
🌑 Descargando de la web los iconos de redes sociales.


Herramienta AddThis


AddThis es una herramienta de código abierto que se puede implementar en cualquier web o blog para que el contenido pueda imprimirse, enviarse por correo electrónico o compartirlo en las redes sociales, entre otras muchas posibilidades.

Es necesario registrarse como usuario y ofrece la posibilidad de elegir la ubicación de la barra de botones y las redes sociales a incluir. Se puede incorporar como extensión al navegador de Google Chrome o como complemento en el navegador de Mozilla Firefox.

Una vez seleccionado el botón deseado, y dentro de la Galería de Herramientas, AddThis nos permitirá obtener su código haciendo clic en "Obtener el código".

Volvemos a Blogger y dentro de Diseño añadimos un nuevo gadget a la plantilla del blog con  +Añadir un gadget. Seleccionamos el widget HTML/Javascript  y pegamos el código que hemos copiado de AddThis.

Hay un magnífico tutorial publicado por compartidísimo.com donde se detalla claramente cómo usar esta herramienta en Blogger.



Botones de redes sociales descargados de la web


En Internet hay infinididad de sitios en los que podemos descargar packs de iconos de redes sociales, como por ejemplo:
pixeden.com, dreamstale.com o mr.icons.   

Para buscar iconos de Facebook voy a entrar en otra web que cuenta también con muchos iconos libres: Iconfinder
Elijo uno que sea libre para usos comerciales y sin obligación de mencionar al autor (la i situada en la esquina inferior izquierda nos dará información de la imagen).

Una vez seleccionado el icono, hago clic sobre su imagen. Se abre una ventana con varias opciones, selecciono el icono en formato PNG y descargo el archivo a mi equipo.

Ahora busco un icono para Google Plus y para el envío de correo electrónico siguiendo los mismos pasos anteriores.

Si el tamaño de estos iconos no se ajusta a nuestras necesidades, podemos modificarlo mediante un editor gráfico. Yo voy a reducir el tamaño de estos tres iconos con Adobe Photoshop a 50 x 50 píxeles. (Ver cómo ajustar tamaño de imagen en Photoshop)

Una vez tengo descargados y listos los iconos que deseo añadir, regreso a Blogger, hago clic en Entrada nueva → Redactar.

Insertar imagen en una entrada


Me sitúo sobre el espacio destinado a la redacción de la entrada y hago clic en Insertar imagen para subir la imagen del icono de Facebook, de Google + y de envío de correo electrónico.

Añadir iconos redes sociales en la entrada


Ahora ya están incluidos los tres iconos en la entrada.

Iconos de redes sociales añadidos a la entrada


A continuación, y dentro de esta misma entrada, accedo a la pestaña de introducción de código HTML.
 
Introducir HTML en nueva entrada


En esta ventana se muestra el código HTML de las tres imágenes correspondientes a los iconos de las redes sociales.

<div class="separator" style="clear: both; text-align: center;">
<a href="URL enlace icono facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL imagen icono facebook.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="URL enlace icono google_plus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL imagen icono google_plus.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="URL enlace icono mail-social-media.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL imagen icono mail-social-media.png" /></a></div>




<a href="URL a la que se dirige el hipervínculo"</a>
Es el enlace a una dirección que puede ser interna o externa (si accede fuera del sitio actual).

<img src="URL de la imagen que se usa como enlace"></a>
también puede escribirse  <img src="URL de la imagen que se usa como enlace" />
Es la dirección de la imagen sobre la que se incluirá el enlace.

Para estos tres iconos la URL del hipervínculo y la URL de la imagen es la misma (al hacer clic sobre la imagen se muestra esa imagen) por lo que será necesario cambiar la dirección URL del hipervínculo o enlace (código resaltado en negrilla del cuadro superior) para que al pinchar sobre el icono, el usuario sea dirigido directamente a nuestro perfil de la red social correspondiente o, en el caso del correo electrónico, sea llevado a su aplicación de correo determinado para que pueda enviar un correo a nuestra dirección de correo electrónico.

Para cambiar la URL del enlace o hipervínculo de cada uno de los tres iconos voy a seguir dos procedimientos diferentes:

🌑 Modificando manualmente el código HTML.
🌑 Cambiando el enlace directamente desde la ventana de redacción de la entrada.


Cambiar la URL del hipervínculo del icono modificando manualmente el código HTML


Para evitar problemas de errores o borrado accidental voy a copiar las líneas de código HTML que se encuentran en la entrada donde he incorporado los tres iconos, para trabajar con ellas en un editor de texto como Bloc de Notas (editor de Microsoft), Wordpad o Word Office.

A continuación accedo a mi perfil en Facebook, copio su URL en la barra de dirección del navegador, elimino la URL del enlace inicial a la imagen del icono de Facebook y pego en su lugar la URL que he copiado de mi perfil en esta red social.
Es decir, elimino toda la etiqueta <a href> siguiente,
<a href="URL enlace icono facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> 
Y la cambio por,
<a href="URL enlace a mi perfil Facebook">

 Hago lo mismo para Google plus.

Para el caso del correo electrónico:
<a href="URL enlace icono mail-social-media.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
Y la cambio por,
<a href="mailto:midirecciondecorreo@correo.com">

Incluir nuestra dirección de correo electrónico mediante un enlace en el blog facilita la comunicación con nuestros visitantes y lectores pero debemos valorar los inconvenientes que tiene esta acción, como es la exposición de nuestra cuenta a los robots que rastrean la web para el envío de spam. Por lo tanto hay que pensar bien si realmente nos conviene o no incorporarla al blog.

En caso de conformidad, es preferible destinar una cuenta exclusiva para este fin y usar servidores de correo fiables y seguros, como es el caso de Gmail. Existe otra opción que es indicar en el blog la cuenta a la cual pueden enviarnos cualquier consulta o sugerencia (por ejemplo, "puedes contactar conmigo en correo@correo.com" / "escríbeme a correo@correo.com").


Cambiar la URL del hipervínculo del icono sin modificar manualmente el código HTML


Si no queremos estar copiando, borrando y sustituyendo el código manualmente, podemos hacerlo directamente desde la ventana de redacción de la entrada.

Se repiten los primeros pasos anteriores.

En Blogger, hago clic en Entrada nueva → Redactar → Insertar imágenes

Una vez están los tres iconos en la entrada hago clic sobre uno de ellos.

Hacer clic sobre imagen

Al hacer clic sobre la imagen, el botón "Enlace" de la barra de herramientas aparece resaltado.
Pincho en "Enlace" para eliminar el enlace que hay sobre esta imagen, de nuevo hago clic en el icono y pincho otra vez sobre "Enlace" para añadirle un nuevo enlace.

Blogger abre una ventana que permite editar el enlace.

Editar enlace del icono


◾El campo Texto a mostrar lo dejo en blanco porque el enlace se sitúa sobre una imagen sin texto. 

Enlazar a: En este campo pego la URL que copié de mi perfil en las redes sociales. 

Dirección de correo electrónico: Añado mi cuenta de correo para el icono de envío de correo electrónico.

◾Marco la casilla "Abrir este enlace en una ventana nueva" para que el usuario no salga del blog cuando acceda, mediante estos botones, a las redes sociales. Sobre la conveniencia o no de marcar esta casilla no hay acuerdo.

El que un visitante del blog al acceder a un link salga de nuestro sitio pero sin salir de la misma pestaña del navegador provoca que nuestra página ha perdido momentáneamente la visita y el tiempo de permanencia del usuario en ella, con el riesgo de que no regrese a nuestro blog. También es cierto que puede ocasionar una mala experiencia al usuario con la apertura de múltiples pestañas.

Personalmente me resulta más cómoda la navegación cuando el enlace se abre en una nueva ventana porque cuando quiero regresar al punto de origen solo tengo que cerrar la nueva pestaña evitando hacer uso de la flecha de "ir a la página anterior" de los navegadores, sobre todo cuando he realizado diferentes acciones en el sitio al que me ha dirigido el enlace.

◾Si no queremos que los motores de búsqueda sigan este enlace, debemos marcar la casilla "Añadir el atributo "rel=nofollow" (recomendable para mejorar el SEO del blog cuando los enlaces dirigen a webs poco fiables o que tienen poco que ver con la temática de nuestro sitio). Aunque hay muchas opiniones sobre su uso para los enlaces a redes sociales, me inclino por marcar esta casilla.

Ya tengo modificadas las URLs de los enlaces. Solo me falta agregar el código HTML de los iconos y sus enlaces a la plantilla del blog.


Agregar gadget HTML/Javascript


Copio el código anterior de los iconos y sus enlaces que estaba en la pestaña HTML de la entrada en la que los había añadido.

En el menú Diseño, y dentro de sidebar-rigth-1, hago clic sobre + Añadir un gadget y añado el gadget HTML/Javascript

Añadir gadget HTML/Javascript con iconos redes sociales


Dentro de este gadget, pincho sobre Editar y pego dentro de Contenido el código HTML de los iconos y sus enlaces.
Podemos incluir un texto (dentro de Título) que se mostrará en el blog, sobre los iconos de las redes sociales. Yo lo voy a dejar en blanco. Guardo los cambios y voy a ver el blog.

Botones de redes sociales en el blog en vertical


El gadget con los botones de redes sociales se sitúan en el lateral derecho del blog, centrados sobre el menú de Etiquetas y en posición vertical.

Para que los botones se muestren en posición horizontal centrados sobre el menú de Etiquetas solo hay que eliminar las etiquetas de salto de línea <br /> y las etiquetas <div> </div> que están incluidas en el gadget HTML/Javascript, excepto la primera etiqueta de apertura <div> y la última etiqueta de cierre </div>.

<div class="separator" style="clear: both; text-align: center;">
<a href="URL enlace a mi perfil Facebook"><img border="0" src="URL imagen icono facebook.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="URL enlace a mi perfil Google plus"><img border="0" src="URL imagen icono google_plus.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="mailto:midirecciondecorreo@correo.com"><img border="0" src="URL imagen icono mail-social-media.png" /></a></div>



Botones de redes sociales en el blog en horizontal


Por supuesto, podemos añadir los botones de redes sociales en cualquier otra sección de la plantilla del blog.

Si en alguna sección no se puede añadir un nuevo gadget al no mostrarse + Añadir un gadget  tenemos que editar la plantilla del blog en el menú Plantilla → Editar HTML y modificar el widget correspondiente. 

Los botones de redes sociales se pueden personalizar mediante CSS. Trataré este tema en una próxima entrada.