Cómo poner los Iconos de Redes Sociales en el blog

Algo muy importante cuando tenemos un blog es estar presente en las principales redes sociales y para que a través de estas redes puedan llegar nuestros lectores al blog, tenemos que dejar bien claro donde pueden encontrarnos. Hoy en

Cómo poner los iconos de redes sociales en el blog

Lo primero que hay que hacer es elegir unos iconos que nos gusten, para ello basta con poner en google Free Social Media Icons para obtener miles de posibilidades totalmente gratuitas. Yo he elegido la que está rodeada con el círculo rojo, porque he visto unos que me gustan, pero puede ser cualquiera.

Antes de elegir los iconos en cuestión hemos de asegurarnos que están todos los que necesitamos, en mi caso facebook, twitter, g+, instagram y por último correo electrónico, aunque el mail no lo voy a hacer de esta forma para enseñaros otra posibilidad. Le damos a Download.

A continuación se nos habré la página de quien ha hecho los iconos realmente y buscamos el link para descargarlos, en este caso Donwload (puede aparecer de otra forma)

Se nos abre la ventanita que aparece en el siguiente pantallazo, ya que los archivos suelen venir comprimidos, dejamos pinchado abrir con y le damos a aceptar.

Ahora toca descomprimir los archivos. Puede que se nos abra la siguiente pantalla, en cuyo caso tenéis que pinchar sobre esos libritos que se llaman social-media-icons (depende del archivo que os hayáis descargado se puede llamar de otra forma, hay que buscar los libritos)…

…pero si nos los encontráis es porque ya os lo muestra como si los hubiéramos abierto, es decir, directamente aparecen los archivos jpg o png. Le damos arriba a extraer.

Se nos abre una nueva ventana, esta es para organizarnos, tenéis que elegir dónde queréis guardar los iconos, en mi caso en el escritorio, le decimos que en una nueva carpeta , le damos nombre a esa nueva carpeta, por ejemplo iconos sociales y pinchamos en aceptar.

Ahora, si nos vamos donde hayamos guardado esa nueva carpeta (en mi caso el escritorio) y la abrimos, tienen que aparecer todos los iconos, aconsejo poner vistas en miniatura, porque aunque aparece el nombre, así podemos ver a golpe de vista a que red se refiere y el tamaño, por ejemplo estos que he elegido vienen en dos tamaños 16 y 32 px (para que os hagáis una idea del tamaño, yo he puesto los de 32px).

Para no liaros, ya podéis cerrar todas las ventanas excepto el blog. Y si queréis podéis ir abriendo vuestras redes sociales.

A continuación tenemos que subir los iconos a la red para que tengan una url, es decir, transformar un dibujo en una dirección web. Para ello necesitamos abrir Tinypic.

Cuando hemos abierto Tinypic, nos sale la siguiente pantalla, pinchamos en examinar y se nos abre una ventana donde vemos nuestro PC, ahí buscamos la carpeta que hemos creado y donde hemos guardado los iconos. Le damos a abrir (no se ve en la imagen, está en la ventanita abajo a la derecha)

En la siguiente ventana que se nos abre, elegimos el icono de la primera red social que queramos poner (podemos volverle a dar a vistas en miniatura para ver mejor los iconos) y volvemos a darle a abrir.

¿Véis?, al lado de examinar, aparece la red social que hayáis elegido (círculo negro, en mi caso facebook) y pinchamos en cargar ahora.

De todos los que se originan, el importante es el último enlace. Para ir obteniendo códigos, solo hay que ir pinchando en Upload more.

Ahora vamos a otra cosa. Abrimos una hoja de word y copiamos lo que os dejo a continuación. Tenéis que modificar; la letra en rojo es la dirección de vuestra red social, la letra en azul es ese último  enlace que hemos obtenido con Tinypic (para no liaros con los colores es el enlace del círculo rojo de la pantalla anterior, copiar y pegar) y la letra en verde es el nombre de la red social. Os he puesto facebook y twitter como ejemplo, las demás redes es exactamente igual, modificando lo que os he detallado (mucho cuidado con las comillas).

Una vez tenemos los códigos correctos en esa hoja de word, los copiamos y nos vamos al pegarlo al blog. Para ello en el escritorio, entramos en apariencia-widget. En blogger es igual, pero los códigos los pegamos en un gadget Html-javascrip.

Arrastramos hasta la columna lateral un widget de texto, lo colocamos en la posición que queramos (yo lo he puesto al final del todo para enseñároslo, pero lo ideal es ponerlo cuanto más arriba mejor, cuanto más visible), lo abrimos…

…y pegamos los códigos (los que hemos hecho el la hoja de word). Como veis yo ya he pegado dos; el de facebook y el de twiter (he resaltado en colores lo que he modificado; mi dirección de la red social, el código obtenido en tinypic y rel nombre de la red social). Se ponen así seguidos, uno debajo de otro y se le da a guardar. Podemos ir viendo como que dan yendo al blog y dándole a refrescar.

Bueno, pues yo ya he puesto todos los iconos sociales para todas mis redes.

Ahora como os he dicho más arriba voy a poner el icono referente al email, lo he dejado a parte para ponerlo de otra forma distinta pero también válida y quizás más fácil que la anterior. Básicamente consiste en usar nuestro propio blog para obtener la URL de la imagen en lugar de Tinypic.

En esta ocasión, es una imagen obtenida de la red, pero igual puede ser un dibujo hecho por vosotros o cualquier otra imagen, basta con guardarlo en vuestro PC como archivo jpg o png. Igual que hemos hecho con los otros iconos, necesitamos tener la URL de la imagen, pero para ello vamos a usar nuestro propio blog.

Nos vamos a Entradas-Añadir nueva y le damos a añadir objeto, subimos la imagen como lo hacemos siempre, y una vez la tenemos en la entrada, nos vamos a la pestaña texto.

Una vez en la pestaña texto, lo que he rodeado con el círculo azul, es la URL de la imagen.

Ese enlace (el rodeado con el cículo azul), junto con vuestra dirección de email ( ojo, tenéis que poner mailto:dirección) y el nombre de la red social, lo modificamos en el siguiente código que os dejo. (no os olvidéis de borrar la entrada)

Al ser una imagen obtenida de internet o bien hecha por nosotros mismos, no viene con un tamaño determinado (aunque estos parámetros los podéis modificar al subirla a la entrada), añadiendo width=150px, podéis ir modificando el tamaño hasta que quede como os guste. También podéis añadir el atributo <div aling=”center”> tal y como veis para que la imagen quede centrada. (en los iconos también se puede añadir este atributo center al principio de todo para que también queden centrados).

Y bueno, este es el resultado…tenéis que probar si funcional realmente pinchando sobre ellos.

Pues hasta aquí Tecnomamablogger de hoy. No ha sido tan difícil, verdad!!??

Os recuerdo que no soy ninguna experta, me limito a contar lo que yo misma hago aquí en mi blog, así que si veis algún error,  tenéis alguna aclaración o una mejor forma de proceder, os ruego lo compartáis con todos en un comentario. Aun así espero que os sirva de ayuda.

Ahora, al contratar a través de este blog cualquier producto Webempresa, desde este banner de aquí arriba o desde el banner de la columna lateral derecha, tendréis un 20% de descuento con el código Gracias20…¿a qué estáis esperando? ¡¡da el salto con mamá ríe!!