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

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.

iconos redes socialesPara 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.

JaviEN

Informático de profesión, llevo años escribiendo sobre SEO, monetización de webs, publicidad, herramientas para blogs y redes sociales tanto en Monetizados como en otros blogs. Ahora también me he propuesto el reto de participar como coordinador nacional en el proyecto Iron Blogger que deberíais visitar si tienes un blog :-)

Descubre más artículos relacionados

19 Comentarios

  1. alvaro says:

    Gracias por ayudarme.

    • JaviEN
      Twitter: monetizados
      says:

      Hola Alvaro,

      Por email me has preguntado si sería igual para Blogger. Te he contestado a tu email pero pongo también la respuesta aquí por si le sirve a más gente:

      ¿CÓMO SE INSERTARÍAN LOS ICONOS EN BLOGGER?

      Para Blogger lo puedes hacer también directamente. Lo único que tienes que hacer es insertar en la pantalla de “diseño” del blog un nuevo elemento “Html/Javascript” o usar alguno de los que ya tengas.

      Ahí copia los código que he puesto en el artículo y los pegas directamente (modificando lo que sea oportuno tal y como indico en el artículo).

      En el caso de blogger sole tendrás que insertarlo en un único archivo, no hace falta que sea en varios como en WordPress. He hecho pruebas con un blog en blogger que tengo y ha funcionado.

      Si tienes cualquier problema avísame.

      Saludos!

  2. Carlos says:

    Que tal necesito una ayuda no se ven los iconos que mencionas en mi wordpress de prueba que tengo. Este es el site—> carlosochoa.site50.net me pueden escribir al charles0658@gmail.com y bueno seguí todos los pasos. Otra cosa por qué en la dirección de los iconos la precede mi dirección Web.
    Gracias por su ayuda.

    • JaviEN
      Twitter: monetizados
      says:

      Hola! He visto que ya has conseguido que se muestren no? qué es lo que te fallaba? a lo mejor tu experiencia para arreglarlo le puede servir a otros. Un saludo y gracias por comentar.

  3. aplicaciones ipad
    Twitter: tecnoconsejos
    says:

    Tengo un plug in horrible en mi sitio http://aplicacionesipadgratis.com, no saben como puedo hacer para pasarlos todo a la derecha? otra pregunta? pierdo pagerank teniendo el botón en cada página?
    salufos

    • JaviEN
      Twitter: monetizados
      says:

      Hola! A qué “plugin horrible” te refieres? He entrado en tu blog y no he visto nada que me parezca así, por tanto no sé si lo habrás quitado ya. Tampoco entiendo a qué te refieres con lo del Pagerank. Si quieres danos un poco más de detalles e intentaremos ayudarte entre todos! Saludos y gracias por comentar!

  4. aplicaciones ipad
    Twitter: tecnoconsejos
    says:

    Hola! Ya lo quité, y puse otro que tambpoco me mola mucho pero da el pego. Lo que me refiero a pagerank es que en todas las páginas y entradas hay 3 enlaces más, unos para twitter, otro para facebook y potro para Google +. Estos enlaces son enlaces saliente, verdad? no ayudan para el PR. Es así? o no influyen?
    GRACIAS!

    • JaviEN
      Twitter: monetizados
      says:

      Si, eso se considerarían como enlaces salientes… En el caso de Google+ no lo tengo muy claro ya que no sabemos el código interno del enlace ya que se añade mediante una etiqueta propia de Google. En el caso de Twitter y Facebook sí que es un enlace como tal, por tanto el PR de tu página se propagaría a esas páginas. Si fueran otro blog o web sería así, pero en el caso de ser páginas de Twitter y Facebook tampoco tengo claro si existe algún tipo de propagación de PR que otorgue más autoridad a dichos sitios. ¿Alguien sabe algo al respecto??
      Saludos!

  5. evelin says:

    gracias por al info, buen aporte!

  6. Noche says:

    Hola, muy util tu tutorial, queria saber si podrias ayudarme con algo:

    Deseo colocar los iconos de las redes sociales pero en el area de la cabecera del blog, la tipica vista de estos iconos arriba y a la derecha por encima del banner,sin que se muevan con el scroll, pareciera algo relativamente sencillo colocarlos alli, pero no consigo mucha información al respecto.

    Estare altamente agradecida por tu asesoria.!!

    • JaviEN
      Twitter: monetizados
      says:

      Hola Noche,

      Puedes colocar los iconos de la forma que deseas jugando con los parámetros scrollTop y scrollLeft del segundo bloque de código que he puesto.

      También es importante definir bien la posición en el tercer bloque de código que irá dentro del fichero de estilos. En tu caso sería “Top: 0″ posiblemente y en vez de “left:0″ pondrías “right: “.

      No sé hasta que punto tienes conocimientos de insertar código para el blog, por tanto si no lo ves claro, puedes escribirte a través del formulario de contacto y te guiaré a través del email.

      Saludos y suerte!

  7. May says:

    Buenas noches!! He seguido al pie de la letra las instrucciones y no hay manera, se me colocan donde les da la gana, estropeando el resto de cosas! No se en qué parte del header ponerlo y si va todo el codigo seguido, he probado en todos los sitios habidos y por haber jeje, no te puedo dar la direccion del blog porque aún está en local, lo que si te puedo decir es que mi plantilla (los angeles) tiene muchos archivos php, igual no es el header lo que hay que tocar… Ando desesperada!! Puedes echarme una mano? Gracias!!

  8. MARIA ELENA RODRIGUEZ BELTRAN
    Twitter: malenarb33333
    says:

    Quiero inscribirme seguir participando pero a veces no puedo entrar a uchas paginas

  9. RT @dinerofacilxati: Cómo insertar iconos de redes sociales que se queden fijos en un blog sin necesidad de plugins? http://t.co/8yFMOLiA #pluginsfree

  10. RT @dinerofacilxati: Cómo insertar iconos de redes sociales en un blog sin necesidad de plugins? http://t.co/Elp3NECv #Tutoriales

  11. RT @dinerofacilxati: Cómo insertar iconos de redes sociales en un blog sin necesidad de plugins? http://t.co/Elp3NECv #Tutoriales

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">