Cómo insertar iconos de redes sociales en un blog sin necesidad de plugins?

Bienvenido! Si encuentras esta página interesante te invito a que te registres gratuitamente para recibir las entradas cómodamente en tu email:

Hace unos días recibí un correo de uno de los lectores de monetizados.com en el que me preguntaba cómo hacía para que aparecieran los iconos de Facebook, Twitter y de la suscripción por mail en la parte izquierda de mi blog. Además podéis ver que esos iconos se mantienen de forma fija aunque se haga scroll hacía abajo de la página.

Por esta razón he decidido escribir este nuevo artículo para explicaros cómo conseguir poner unos iconos fijos en la parte derecha, izquierda, superior o inferior del blog con lo que queráis. La diferencia con otros artículos que te proponen conseguir lo mismo será que en este caso no usaremos ningún plugin. De esta forma nos ahorraremos carga en el blog dando mayor fluidez a la carga de las páginas del mismo.

Para comenzar he de avisar que deberás tener unos mínimos conocimientos de programación o por lo menos no tener miedo para añadir los códigos que os daré dentro de los archivos que componen tu blog.

La explicación la voy a dar para un blog en wordpress. Si el vuestro en un blog en blogger también podréis hacerlo de una forma parecida. Si necesitaís ayuda con eso, podéis decírmelos en los comentarios y os intentaré ayudar si tu blog no está en WordPress.

Para poder realizar estos cambios tendrás que tener posibilidad de acceder a los archivos que, como sabréis componen los blogs en WordPress. Para ello deberéis tener acceso al hosting donde lo tengáis alojado el blog, o sino remitir este artículo al administrador que se encargue de los cambios en vuestro blog.

Estos archivos serán los que pintan cada una de los componentes del blog. Habrá un archivo para la página de home, otro para cada uno de los artículos, otro para las páginas, otro para los resultados de las búsqueda, para los artículos de unas categorías en concreto, etc… Todos estos serán archivos que terminan en “.php”. Además encontraremos un archivo “.css” que será el que definirá los estilos de todo lo que se muestra en el blog.

En este caso los cambios los realizaremos sobre el archivos “header.php” que es el encargado de pintar la cabecera del blog, y el style.css que es el que define los estilos.

Modificaciones en el archivo header.php.

El primer paso será añadir el siguiente código dentro de tu archivo header.php.

<div id=”capafija_redessociales”>

<a href=”http://www.URL_que_quieras.com” target=”_blank”>

<img src=”http://imagen_que_quieras.jpg” alt=”facebook monetizados.com” width=”40″ border=”0″></a>

<br>

<a href=”http://www.URL_que_quieras.com” target=”_blank”><img src=”http://imagen_que_quieras.jpg” alt=”twitter monetizados.com” width=”40″ border=”0″></a>

<br>

<a href=”www.URL_que_quieras.com” target=”_blank”><img src=”http://imagen_que_quieras.jpg” alt=”lectores monetizados.com” width=”40″ border=”0″></a> <br>

</div>

Como veréis tendréis que reemplazar donde pongo “www.URL_que_quieras.com” por cada una de las direcciones donde quieras apuntar e “imagenen_que_quieras.jpg” con la URL de la imagen del icono que represente a esa dirección donde quieras que vayan los lectores.

Este código lo podéis colocar donde queráis dentro de este archivo header.php ya que en el archivo de estilos diremos donde querremos que aparezcan esos elementos. De todas formas para dejar más ordenado el código, recomiendo ponerlo al final del mismo.

Con esto que hemos insertado podremos dibujar los iconos que queramos enlazando a la dirección que elijamos.

Ahora lo siguiente será decirle al navegador que cuando cargue la página llame a ese componente, en este caso a la capa que hemos llamado “capafija_redessociales“. Para ello añadiremos el siguiente código javascript también en el archivo header.php:

<script type=”text/javascript”>

window.onload=function() {

if(navigator.appName.indexOf(‘xplore’)!=-1)

document.getElementById(‘capafija_redessociales’).style.position=’absolute’;

window.onscroll=function(){

document.getElementById(‘capafija_redessociales’).style.top=document.body.scrollTop+10+’px’;

document.getElementById(‘capafija_redessociales’).style.left=document.body.scrollLeft+15+’px’;

}

}

}

</script>

En este código es importante resaltar las palabras “scrollLeft” y “scrollTop”. Lo que estamos diciendo con esas líneas es que cuando se haga scroll los iconos se muevan 10 y 15 pixeles en esa dirección. Este ejemplo es para el caso exacto de mi blog en el que los iconos están a la izquierda. Si quieres cambiarlos de posición podrás jugar con esos valores o cambiarlos por “scrollBottom” o “scrollRight”.

Modificaciones en el archivo style.css.

En este archivo lo que vamos a hacer es dar el estilo a la capa capafija_redessociales que acabamos de definir en el header.php. Para un resultado igual que el de mi blog, el código que tendréis que añadir es el siguiente:

#capafija_redessociales {position:fixed; top:200px; left:0px;
}

Con esto le estoy diciendo que quiero que la capa con los iconos de las redes sociales aparezcan a 200 píxeles del margen superior de la página y a 0 del margen izquierdo. Es por eso que aparecen más o menos a mitad de altura y a la izquierda de la página. Estos valores se podrían cambiar por una referencia al “bottom” en vez de al “top” si se quiere contar los pixeles desde el fonde de la página o con “right” en vez de “left” si se quiere que los iconos aparezcan a la derecha de la misma.

Estos son los pasos necesarios para poder añadir los iconos de las redes sociales tal y como aparecen en mi blog en todas las páginas.

Si a alguien le parece interesante y le gustaría implementarlo en su blog pero no se siente con los conocimientos necesarios para hacerlo siguiendo estos pasos, que no dude en ponerse en contacto conmigo mediante cualquiera de las vías de comunicación que ofrezco e intentaré ayudarle.

Espero que os sirva de utilidad este truco para blogs.

¿Te ha gustado el artículo? Te invito a que lo compartas: Gracias!

Te ha gustado este artículo?

Suscríbete gratis y recibe las novedades por mail. Solo por suscribirte, te enviaré un EBOOK GRATIS con consejos avanzados que uso para conseguir más referidos y ventas.