En este post vamos a aprender a instalar botones iconos de Redes Sociales, incluso los iconos que has diseñado tú misma, en tu blog o web y también colocarlos al final de cada entrada.
Trabajé mucho hasta encontrar esta manera de instalar botones iconos de Redes Sociales al final de nuestras entradas en Blogger porque no había encontrado esta información en ningún otro post.
Siempre diré que si trabajar el código NO es lo tuyo pero quieres de verdad profesionalizar la imagen de tu blog o web porque no es «solo un hobbie» contrates los servicios de profesionales y te centres en tu emprendimiento, en tu proyecto y en hacer lo que amas.
Pero si solo es un hobbie, quieres aprender código y tienes todo el tiempo del mundo: ¡Sigamos!
Lo primero es entrar en Add to any justamente en este enlace anterior que te facilito. Encontraremos todo en inglés pero no pasa nada, yo te guiaré para saber lo que tienes que hacer.
Podemos ver que nos aportan una serie de códigos que “crean” los iconos que nos enseñan debajo de cada código. Si nos gusta alguno, perfecto, nos quedaríamos con el que elijamos, y lo copiamos entero (fíjate bien de copiarlo entero, es importante)
Sin embargo si lo que queremos es usar nuestra propia imagen o nuestro propio diseño de botón o de cada icono o incluso los iconos de Font Awesome, entonces tendremos que copiar solamente este
Si entendemos tan solo un poquito de HTML en esto de Blogger por lo menos, sabremos identificar el famoso código HTML que nos ofrece la posibilidad de insertar una imagen en ese div (explicado un poco de andar por casa 🙂 y el código en cuestión es, para quien no lo sepa, este:
<img src=
Una vez tenemos esto claro y el código de Add to any copiado vamos a pegarlo en nuestro Bloc de Notas para hacer anotaciones rápidas.
Una vez guardado ya el código en nuestro Bloc de Notas, necesitamos subir nuestras imágenes a un servidor de internet.
Dropbox, es un buen ejemplo, pero personalmente yo recomiendo subirlas a una entrada del blog o de la web que no se publicará nunca, porque resulta más cómodo para hacerse con la URL de la imagen.
Tú haz como mejor te resulte para copiar la URL de la imagen.
Abrimos la nota donde pegamos el código y cambiamos lo que hay entre las comillas , justo después del código que os comenté antes, por la URL de la imagen que coincida con la red social a la que pertenezca ese código.
* Si no sabes cómo copiar la URL de imagen mira este el vídeo anterior.
Os hago un croquis 🙂
Debemos sustituir la url que subrayo en amarillo por la URL de tu imagen icono personalizado de Facebook, en este caso.
Atención porque tenemos que darle al botón derecho del ratón sobre la imagen (si la tenemos en una entrada de nuestro blog que no se publicará) y darle a Copiar dirección de enlace tal y como explico en el vídeo.
Repetimos con cada red social y tendremos nuestro código listo.
Para un blog o web en WordPress usamos el mismo código.
Añadir iconos de redes sociales en nuestro blog de Font Awesome
Antes debes instalar Font Awesome en tu plantilla. Es sencillo, solo tienes que poner el un código similar al siguiente antes de el </head> de tu plantilla.
<script src="https://kit.fontawesome.com/9204d0a34d.js" crossorigin="anonymous"></script
Aquí tienes información para adquirir tu código. Solo tienes que registrarte y te comparten tu código.
Una vez instalado Font Awesome en nuestra plantilla y retomando nuestra personalización, en el caso de querer añadir los iconos de Font Awesome, hay que eliminar el código entero de <img , toda esa línea y luego pegar el código que Font Awesome nos da para esa red social.
Lo sustituímos en este caso por
<i class=»fab fa-facebook-square»></i>
Y así con el resto de redes sociales.
Último paso para personalizar los iconos de redes sociales de nuestro blog o web en Blogger
Ahora tenemos que pegar este código nuevo que hemos creado en nuestra plantilla HTML. Antes de toquetear nada nos aseguraremos de guardar todo bien, haciendo una copia de seguridad de nuestra plantilla.
Una vez que estamos en nuestra plantilla HTML vamos a pulsar sobre la ventana de código CTRL+F para que nos aparezca un buscador interno arriba a la derecha. Ahí vamos a copiar el siguiente código:
<div class='post-footer'>
y le damos a enter, dos veces, porque nos interesa el segundo. Y justo debajo del código pegamos el que tenemos preparado en nuestra nota. (Para ponernos debajo solo tenemos que dar un par de enter al final del codigo anterior)
Hacemos una vista previa para ver cómo ha quedado y listo¡
Si queremos que quede centradito, solo tenemos que añadir <center> al principio del código y </center> al final del código de las redes sociales , antes de este otro;
<script src='//static.addtoany.com/menu/page.js' type='text/javascript'/>
HECHO¡ Solo hay un problema y es que cuando se le da a compartir sobre esos iconos, solo comparte la página en la que está, con lo cual para que se comparta concretamente esa entrada vuestro lector tendría que estar en la página de la entrada, solamente. Bueno, con esto se ha terminado por hoy.
Te dejo como ayuda extra el vídeo del tutorial Personaliza pie de entradas, porque ahí comento cómo modificar el código añadiendo el código URL de tus imágenes.
