Cómo cambiar los iconos de compartir en redes sociales (versión web)

miércoles, 20 de mayo de 2015


Hola artistas! Hoy os ofrecemos un tutorial muy especial, ya que sabemos que es un tema que nos interesa mucho a todos: cómo cambiar los iconos para compartir contenido en las redes sociales.




Vamos a poner iconos sociales para compartir SIN usar una web externa, sinó que vamos a usar un pequeño script en nuestro código.

De modo que nuestro blog cargará más rápido y además podremos personalizar al 100% nuestros iconos... ¿a que mola? :D

En esta ocasión vamos a ver cómo cambiar los iconos en la versión web, pero si también te interesa saber cómo se cambian en la versión para móvil, don't worry! Aquí tienes el tutorial para customizarlo en dispositivos móviles ;)


1. Primero de todo tienes que ir al apartado de Diseño ➡ Entradas del blog ➡ Editar (Haz siempre una copia de seguridad de la plantilla para no perder nada si no sale bien la cosa). Y una vez en la ventana de edición de las entradas, debes desmarcar la casilla Mostrar botones para compartir.



2. Luego nos vamos a Plantilla ➡ Editar HTMLDentro del recuadro de código debes pulsar CTRL+F (en caso de que tengas Windows) o CMD + F (en caso de que tengas un Mac) para que se te abra el buscador. En él debes introducir <div class='post-footer'> para encontrar la parte de código que se encarga de editar el pie de los posts.

IMPORTANTE: hay dos líneas de código con ese nombre, debes buscar la segunda línea, ¡sinó no se te verán los iconos! 

Una vez en la segunda línea de <div class='post-footer'> debes buscar post-footer-line-1, y justo después pegar el siguiente código:

<!-- INICIO de iconos para compartir en redes sociales -->
   <center> <!-- Si queréis que los botones estén centrados, sinó quitais esta línea -->
   <div class='addthis_toolbox'>
   <div class='custom_images'>
   <a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='https://lh4.googleusercontent.com/-pUITKMNRbDg/VVu0z4G2DxI/AAAAAAAAAnM/xM3R91AgIfU/s162-no/fb-azul.png' width='30'/></a>
   <a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='https://lh4.googleusercontent.com/-P8a_JjAv1kQ/VVu01IP0HkI/AAAAAAAAAnQ/rUQc0Xp6e4k/s162-no/tt-azul.png' width='30'/></a>
   <a class='addthis_button_email'><img alt='Email This' border='0' height='30' src='https://lh4.googleusercontent.com/-y6rXPkaLBMc/VVu00PgAJII/AAAAAAAAAm0/zKzcUm53pP0/s162-no/mail-azul.png' width='30'/></a>
   <a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='https://lh6.googleusercontent.com/-W7VxaKKP5K8/VVu00ueaqmI/AAAAAAAAAnA/WhjlvlJktE0/s162-no/pin-azul.png' width='30'/></a>
   <a class='addthis_button_google_plusone_share at300b'><img alt='Share This' border='0' height='30' src='https://lh4.googleusercontent.com/-Xg2NKziUJj8/VVu0z4gG93I/AAAAAAAAAms/xw2bHa9FC4s/s162-no/google-azul.png' width='30'/></a>
   </div>
   </div>
   <script type='text/javascript'>var addthis_config = {"data_track_addressbar":false};</script>
   <script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
   </center> <!-- Si queréis que los botones estén centrados, sinó quitais esta línea -->

<!-- FINAL de iconos para compartir en redes sociales -->


Si lo has hecho todo bien, deberá quedarte así:



Si te gustan estos iconos y quieres tenerlos en tu propio alojamiento, ¡puedes descargártelos! Los tienes en diferentes colores para que elijas el que más se adapte a tu blog :D



Si por el contario quieres cambiarlos por otros que tienes fichados por ahí o tienes los tuyos propios, solo deberás cambiar la URL de las imágenes que están en color azul por la URL de las imágenes que quieras tu.

Yo siempre me guardo las imágenes que uso para el blog y así me aseguro de no perderlas con el tiempo. Si quieres saber cómo guardar las imágenes en tu propio sitio mira este otro tutorial, verás qué fácil es :)

Y esto ha sido todo por hoy... ¿te ha gustado el tutorial? Espero que te haya sido útil!

Así que ya sabes, si te ha servido me encantaría que lo compartieras con tus redes, un abrazo fuerte!! 

Laia

10 comentarios:

  1. Hola! Te he conocido por la fiesta de enlaces y me gusta mucho como explicas estos tutoriales que me vienen muy bien. Mi pregunta es ¿ quedan del mismo tamaño que tienes aquí? ¿ como se pone comparte este post como lo,tienes tu? ¡ me encanta! Y en la versión móvil ¿ quedan del mismo tamaño ?
    Gracias y te sigo ! Besotes

    ResponderEliminar
    Respuestas
    1. Hola Aida! Muchas gracias por tu comentario guapa!

      Los iconos sociales que tenemos puestos en Hora Mágica son distintos a los que he puesto en este tutorial, pero el tamaño es prácticamente el mismo :) Y en la versión para móvil se ven un poco más pequeños de forma proporcionada. Si quieres modificar su tamaño, sólo tienes que cambiar los valores de "height" y "width".

      En breve voy a hacer un tutorial para explicar cómo poner el texto de "Comparte este post" encima de los iconos sociales. Con vuestras preguntas me ayudáis a ver qué temas os interesa saber, y me dáis ideas para nuevos tutoriales :D

      Gracias por seguirnos!!! Un abrazo fuerte!!

      Eliminar
  2. Esta es una de la cosas que ando buscando hace tiempo. Yo también tengo lo botones en la versión web así. Pero si lo pongo para que sean visibles en la versión móvil, salen enormes. Habria que ajustarlos aplicando CSS pero no doy con el código adecuado. Con tu tuto tampoco se adaptan....un saludo.

    ResponderEliminar
  3. Hola! He seguido tus pasos a la hora de insertar el código html para que aparezcan los iconos de compartir en las redes, pero con otros iconos que tenía preparados. El caso es que no aparece nada. Todo sigue igual, y no sé dónde está el fallo.
    Aquí te dejo una captura de pantalla de la edición html de la plantilla donde he realizado los cambios.
    Gracias, y un saludo.
    http://i.imgur.com/Dh1nXcy.jpg

    ResponderEliminar
  4. Hola!
    Que guías tan increíbles, de verdad que ayudan mucho!
    Sin embargo tengo una pregunta, en el caso de que quiera crear una nueva página en mi blog quisiera que está apareciera totalmente en blanco, pero me aparece el comparte este post al final.. que podria hacer en ese caso para que en esas paginas nuevas no me aparezcan las redes sociales?

    ResponderEliminar
  5. Muchas gracias;v; me moría por ponerlo y no encontraba ningún tutorial.
    Eres increíble;w; ~

    ResponderEliminar
  6. Hola muchas gracias, me ha servido bastante el tutorial, mi pregunta es, si quiero poner los que yo tengo, al cambriar el URL quiere decir que ¿tengo que subirlos a la nube y copiar ese link y colocaarlo donde dice "src"?

    ResponderEliminar
  7. hola! Muchas gracias por el tutorial. Tengo un problema, diseñe mis propios botones y ya los subí a google fotos tal como en el otro tutorial, cuando quiero pegar la url no se me ve, ¿alguna solucion? Gracias!

    ResponderEliminar