Botones de Compartir en Redes Sociales: Instalar y Personalizar

Añade los botones compartir en redes sociales en tu blog de Blogger y WordPress, es totalmente GRATIS, fácil de instalar y personalizar.

¡Hola! Bienvenido a Peengler. A continuación te recomiendo usar los siguientes botones, hasta ahora no me han dado ningún problema y lo mejor de todo es que estos botones son responsive, es decir, se adaptan a cualquier dispositivo.

Sin más que decir ¡Empecemos!

botones compartir en redes sociales

Clic en la imagen para ver el vídeo ↑ en YouTube

Crear una cuenta en ShareThis

En primer lugar, debes registrarte a la página sharethis.com. Si quieres regístrate iniciando sesión con tu cuenta de Google o Facebook

botones de compartir en redes sociales con sharethis

Esta página te da 4 maneras de añadir los botones de compartir en tu sitio.

Botones de Compartir en redes sociales Embebidos

Los puedes añadir al final de tu post, me encantan porque se adaptan al ancho de tu sitio, en el caso de que los botones que has seleccionado no tengan suficiente espacio, solo se mostrara el icono.

Barra de Botones de Compartir en Redes Sociales

Botones de compartir en imágenes

Con esta opción, al pasar el cursor sobre tus imágenes van aparecer los iconos de las redes sociales en la parte superior. La verdad es que me parece muy bueno, aunque pienso que esto sería muy útil en sitios tipo galería.

Botones de Compartir en Redes Sociales sobre las imágenes

Botones de vídeo compartido

Aquí los botones aparecen en la parte inferior de tus videos. Si por alguna razón no quieres que se muestren en videos con alguna clase en particular. Se puede hacer esta configuración.

Botones de Compartir en Redes Sociales en los vídeos

Botones de Compartir Pegadizos

Este es uno de los más usados y muy recomendados, tendrás los botones de compartir fijos, es decir, al deslizar siempre se van a mantener en esa posición y lo mejor, es que puedes ocultarlo cuando el visitante este viendo tu sitio en su celular.

Botones de Compartir en Redes Sociales versión para ordenador y móvil

Pero si quieres lo dejas activo para móviles, ya que esa barra pasara a la parte inferior de la pantalla. Pienso que es mejor mostrarlo para el ordenador y ocultarlo con los dispositivos móviles

¿Por qué? Pues normalmente suele salir el aviso de cookies y la verdad lo vería muy cargado. Ahora es tu decisión decidir.

¿Cómo instalar los Botones de Compartir en Redes Sociales en mi blog?

Una vez que estés registrado en sharethis.com, inicias sesión y luego debes registrar tu sitio.

Para eso, te vas a la parte superior y clic en agregar nuevo dominio:

agregar nuevo sitio en sharethis

Luego ingresas el dominio o subdominio.

Ejemplo: peengler.com o peengler.blogspot.com

Clic en agregar nuevo dominio.

aviso de agregar nuevo dominio

Debes añadir un código a tu blog que tendrá los estilos de los botones y también para que funcionen.

Le das clic al botón Código de activación.

instalar codigo en sharethis

Instalar botones compartir en redes sociales en Blogger:

Te vas a: Tema > HTML > y ahora pegas el código después de <Head>

Añadir código después del Head

Quizás te salga un error, en ese caso vas añadir antes de cms esto: &amp;

Error en Blogger para Instalar un script

Guardas.

Vuelves a la página de los botones sociales. Clic en activar.

activar codigo en sharethis

Botones Compartir en Redes Sociales en WordPress

Necesitaras un plugin para añadir el código en el header de tu tema.

Buscaras e instalaras el siguiente plugin:

Plugin para Insertar codigo en la cabecera en y el footer

Luego te vas a Ajustes > Insert Headers and Footers y donde dice Código en la cabecera, pegas el código y guardas el cambio:

Botones de Compartir en Redes Sociales con plugin

Vuelves a la página de los botones > Clic en Código de activación

activar codigo en sharethis

Personalizar los botones de compartir en las redes sociales

Como mencione antes hay 4 maneras de mostrar estos botones, primero debes elegir uno de esos botones. Luego le das clic en Personalizar.

Te saldrá una vista previa del botón y más abajo están las siguientes opciones:

personalizar botones compartir en redes sociales

En esta parte puedes:

  • Seleccionar los botones que quieras mostrar y deseleccionar los que no quieres.
  • Además de que puedes arrastrar los botones, es decir, ubicarlo donde más te gusten.

Cuando estés satisfecho clic en actualizar.

¡Y listo! Actualiza tu sitio y veras la magia 😉

Solución con los Botones de Compartir Embebidos

Si has elegido usar: Botones de Compartir Embebidos y te sucede lo siguiente:

Botones de Compartir en Redes Sociales error en Blogger

Debes añadir en tus estilos CSS lo siguiente:

CSS

#st-1 .st-btn > img {
    top: 7px;
    background: transparent;
    border: none;
    box-shadow: none;
}

En Blogger te vas a: TEMA > HTML > CTRL + F y buscas ]]></b:skin> Encima de estas pegas el código que mencione.

En WordPress: Necesitaras el plugin Code Snippets Instálalo y actívalo

Luego te vas a Fragmento de código > todos los fragmentos > Ejemplo de fragmento de código en CSS > clic en editar

Botones de Compartir en Redes Sociales en WordPress

Y pegas el código CSS que mencione:

Cómo añadir los Botones de Redes Sociales en WordPress

En conclusión:

Los botones de compartir en redes sociales, son buenísimos para que puedas hacer conocer tu sitio en las redes y gracias a sharethis que nos facilita esta tarea de manera sencilla y eficaz.

No se puede pedir más. Esperemos que no cambien 😊

Recomiendo no llenar todo tu sitio con los botones de compartir normalmente se suele usar el vertical deslizante y el horizontal al final de cada post.

Cualquier duda o problema dejarlo en los comentarios.

¿Te gusto el post?
¡Compártelo!
Gabriela Laya

Gabriela Laya

Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"