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.

Dibujo1Antes 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.

Dibujo2A 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)

Dibujo3Se 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.

Dibujo4Ahora 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)…

Dibujo5…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.

Dibujo6Se 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.

Dibujo7Ahora, 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).

Dibujo8Para 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.

Dibujo9Cuando 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)

Dibujo10En 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.

Dibujo11¿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.

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

Dibujo13Ahora 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).

Dibujo14Una 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.

Dibujo15Arrastramos 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…

Dibujo16…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.

Dibujo17Bueno, 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.

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

Dibujo21Ese 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)

Dibujo22Al 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.

Dibujo19Pues 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.

alojamiento wordpress

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!!

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

  1. Pues yo los míos no los he puesto… tengo miniaturas de la red social, pero no iconos. De momento creo que me gusta cómo está, pero ya sé que en tecnomamáblogger lo puedo encontrar si me decido en el futuro 🙂

      • Pues hija ha sido leer tu post esta mañana y he dicho, pues ale me voy a buscar unos social media icons chulísimos para me blog, y he encontrado unas cosas super bonitas. Ya verás.
        Ahora me queda ponerlos bien en el blog.
        Ya me he decidido a hacer lo de la migración asi que voy a ver si lo hago en este finde porque estoy con lumbago recluida en casa y a ver si por lo menos ya que no puedo moverme mucho, aprovecho y hago algo util.
        Otra vez muchas gracias por tu tutorial, no sabeis cuanto ayudais.
        Un abrazote.

  2. Madre mia si que sabes! Yo en blogger los puse también y lo hice sola, pero debe ser WP porque no recuerdo que fuera así como lo explicas hoy.
    Creo que puse imagen y enlace a la red social correspondiente. …
    Ya dudo. ..luego lo pruebo. .jajaja
    Un beso!

    • No te creas que no se nada y tu lo sabes bien jejejejeje!!! Pues esta es la forma como lo puse en blogger también, no se, seguro que hay otra forma más fácil, pero ya sabéis que lo mío es complicarme la vida jajajajaj
      Lo de Tinypic, se puede hacer de otra forma, subiendo las imágenes al propio blog, pero creo que así nos liamos menos y por eso además he puesto ya los código hechos, solo para cabiar los enlaces.

      Prueba prueba…y me dices!!!

  3. Jajajajajaja, mi tutorial!!!! Como se nota que es para mi, con sus circulitos para que no me pierda y todo.
    Muchiiiiisimas gracias, de verdad! No sabes como te lo agradezco. Muakkkk

Deja un comentario