Botones de Compartir en Redes Sociales: Instalar y Personalizar

Añade los Botones de Compartir en Redes Sociales en Blogger o WordPress ✔ Botón de Compartir en Facebook, Twitter, LinkedIn y mucho más ✔ Totalmente GRATIS y sin necesidad de tocar código y lo mejor de todo es GRATIS.

¡Hola! Bienvenido a Peengler, soy Gabriela. Te enseñare a Cómo instalar y personalizar los botones de compartir en redes sociales, de manera sencilla y lo mejor de todo es que estos botones son responsive, es decir, se adaptan a cualquier dispositivo.



En primer lugar, debes registrarte a la página sharethis.com. Si quieres registrate 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.

4 formas de añadir los Botones de Compartir en Redes Sociales en tu blog

Botones de Compartir 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 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 video 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 debes registrar tu sitio.

Para eso, te vas a la parte superior derecho y clic en configurar una nueva:

Configuración de la cuenta en sharethis

Luego ingresas el dominio o subdominio ejemplo: peengler.com o peengler.blogspot.com

Clic en Agregar y luego a cancelar.

Añadir la dirección del blog

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 Obtener el código.

Aviso para instalar los Botones de Compartir en Redes Sociales

Te saldrá esta ventana, copias el código y ahora te vas a tu blog.

Copiar código de sharethis,js en el blog

Botones de Compartir en Redes Sociales en Blogger:

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 verificar manualmente, escribes el dominio o subdominio de tu sitio y luego clic a verificar.

Instalar los Botones de Compartir en Redes Sociales

Esperas un ratito y luego clic en cancelar.

Botones de 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 allí y guardas el cambio:

Botones de Compartir en Redes Sociales con plugin

Vuelves a la página de los botones. Clic en verificar manualmente, escribes el dominio de tu sitio y luego clic a verificar.

Instalar Botones de Compartir en Redes Sociales

Esperas un rato y luego clic en cancelar.

Personalizar los botones de compartir en mi blog

Como mencione antes hay 4 maneras de mostrar estos botones por ahora te explico cómo colocar los Botones de Compartir Pegadizos. Si puedes añadir este, podrás añadir cualquiera de los 4.

Instalar Botones de Compartir en Redes Sociales

Para eso vas directorio > seleccionas donde dice pegadizo.

Como veras sale una vista previa de tu sitio, como se vería en el ordenador y en el móvil, además de que sale un icono verde “significa que esta opción esta activa”.

Personalizar Botones de 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.

Esta es la parte de la configuración:

personalizar Botones de Compartir en Redes Sociales

Puedes configurar si lo quieres a la derecha o izquierda, el color, el idioma, etc. Cuando estés satisfecho clic en actualizar.

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

EXTRA

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

Guardar cambios y ¡listo!

EXTRA 2

Recuerda activar el que desees mostrar porque sino van a parecer todos los botones tanto horizontal como vertical, en tus imágenes y en vídeos.

Botones de Compartir en Redes Sociales

En conclusión:

Con estos Botones de Compartir en Redes Sociales es necesario colocarlos para que puedas hacer conocer tu sitio en las redes y gracias a sharethis.com 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!

☑ Puede que también te interese:

en Facebook NO APARECE la IMAGEN al Compartir el Post
medidas de las imagenes en facebook
medidas de las imagenes en youtube

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Joanna:

Muy útil. Gracias por la información.

Besos

Responder
Asunción Artal:

Son básicos, gracias por compartirlo

Responder
Djangkaru Bumi:

Thank you
Nice artikel

Responder
Rocío:

Muchas gracias por el tutorial. Muy útil, como siempre.
Un abrazo.

Responder
Maria Eugenia ARIAS LOZANO:

Genial, me encanta como lo explicas. Bs.

Responder
Miguel Pina:

Otra utilidad estupenda Gabriela. Cualquier cosa que sirva para poder compartir con mayor facilidad es fundamental. En lo personal suelo ir con mucho cuidado al cambiar cualquier código html por miedo a meter la pata.
Saludos y gracias por la info!

Responder
Canal como se hace:

Muy buenos consejos, hay que tener a mano, un beset

Responder
Ani:

Muchas gracias por este gran tutorial.
Besitos y abrazos cariñosos bonita.

Responder
Pasando Página Blog:

Hola, Gabriela 👌
La verdad es que me sorprende mucho la cantidad de información que compartes y que aún así no me desespere ni me aburra leyendo. Y aunque no soy fan de los botones creo que lo voy a tener en cuenta porque ya me empezó a rondar la cabeza cambiar la presentación del blog. Nomás que mi talento es INEXISTENTE 😂 Un beso grande.

Responder
yo leo Novela:

Geniales consejillos. Me los apunto. 😉

Responder
marigem:

Hola.
Muchísimas gracias por la información, está todo muy bien explicado.
Soy un desastre con las redes sociales y eso hay que arreglarlo.
Feliz día.

Responder
Ash Tailor:

¡Hola, hola! La verdad que esto es muy útil, ¡gracias por la entrada!

¡Nos leemos!

XX ASH XX

Responder
Vanesa Gascon:

Muchas gracias por compartir estos consejos, me van a venir muy bien para mi web, yo la gestionos a traves de worpress y esto me va genial. Saludos

Responder
Miss Bridgerton:

Hola,
Gracias por la información.
Besos desde Promesas de Amor, nos leemos.

Responder
Adriana:

Muchas gracias, me encanto este artículo. Me encanta aprender sobre todo lo relacionado a los blogs y sitios web, y estos botones para compartir redes sociales están muy prácticos y fáciles de instalar.

Responder
Mauge:

woow! que buena informacion, muchas gracias!!

Responder
Citu:

Gracias por el tutorial te mando un beso

Responder
Serena Miles:

hola,
muchas gracias por la entrada, mira, esto si que lo sabia hacer jejeje
Besotesssssssssssssssss
#yaquedamenos

Responder
Nayade:

Uy pues he cogido varias ideas de este post para probar a ver cual me interesa más
Muchas gracias por compartirlo
besos ♥

– – El Mundo de Naya – –

Responder
Lecturas de Annie:

Ains!! Este post era todo lo que necesitaba. Para compartir los botones ya me vienen predeterminados con el tema, pero voy a ver si puedo cambiar los que están abajo de mi perfil.
Un besote♥

Responder
Sakuya Aikawa:

(ノ◕ヮ◕)ノ*:・゚✧ Holaaa!!!
Lo intente y no me resulto ni con lo primero ni con lo segundo, me plantilla no me dejo guardar con ninguno de los 2 códigos :c

Visita mi blog ♥ 穛 S4Ku SEK4i®

Responder
    Gabriela Laya:

    ¡Hola!
    y ¿que plantilla usas? se que es de Blogger pero ¿como se llama el tema?
    y así intento instalarlo 🙂

    Responder
Elrincondemonica05:

Hola guapa, muchas gracias por el tutorial, nada más tenga un ratito lo pongo en practica para añadir botones a mi blog. Besitoss

Responder