¿Cómo añadir un Social Share Button a tu sitio web? (Tutorial)

En este artículo aprenderás por qué y cómo implementar un Social Share Button en tu sitio web en cuestión de minutos.

¿Por qué un Social Share Button en la página de tu blog?

Deberías tener un Social Share Button por las siguientes razones:

• Los Social Shares son una "señal de posicionamiento SEO", es decir, cuanto más se comparte tu blog, mejor se encuentra;
• **Más exposición de marca. ** Sencillo: cuanta más gente vea tu marca, antes querrá comprar tus productos / contratar tus servicios.
• Mejora la experiencia del cliente. Si los clientes quieren compartir tu blog, ¡ayúdales!
• Más visitantes. También es lógico: cuanto más se comparte algo, más gente visitará la página.

¿Por qué no deberías tener un Social Share Button?

Teniendo en cuenta lo descrito arriba, parece una decisión obvia. Los Social Share buttons solo tienen ventajas, en realidad. Pero ¿es realmente así? Se ha investigado el comportamiento de los visitantes a la hora de compartir (véase, por ejemplo, esta publicación de Seattlewebdesign), y resulta que los social share buttons casi no se usan.

Y si casi no se usan, ¿qué sentido tiene un social share button?

Buena pregunta. Si resulta que tu social share button no se usa, nuestro consejo es: quita el botón.

Por otro lado, quizá se deba a otra cosa. ¿Podría ser que tu Social Share Button no destaque lo suficiente porque los botones tienen el mismo aspecto que en todos los sitios web? ¿Quizá por eso no invita en absoluto a hacer clic?

Entonces prueba con un Social Share Button único. A continuación te explicamos cómo implementar tu propio Social Share Button en 5 minutos.

¿Cómo añadir un Social Share Button?

El primer paso es encontrar un Social Share Button único. Nosotros hemos tomado un diseño público de internet, creado originalmente por un tal Nate. Al fin y al cabo, no siempre hay que reinventar la rueda.

HTML

La primera pregunta que debes hacerte es dónde quieres colocar el Social Share Button. Nosotros hemos optado por colocarlo en una posición "fixed" de la pantalla (abajo a la izquierda). Así el botón siempre está visible. Pega el siguiente código en el body HTML de tu página. published

Código HTML para el Social Share Button

**Atención: **

• Necesitas fontawesome para los iconos.
• Por supuesto, puedes cambiar los enlaces a RentVisie por tu propia URL.

Al final del artículo encontrarás un enlace a un codepen, donde puedes copiar el código directamente (incluido el acceso a Fontawesome).

SCSS

Uno de los aspectos más importantes: el estilo. El botón tiene que verse bien, por supuesto. A continuación encontrarás nuestro código. Fíjate en que usamos la propiedad position: fixed para fijar el botón en la parte inferior izquierda de la pantalla. published

Estilo: CSS para el Social Share Button

Atención: hemos escrito el estilo en SCSS. El código original es CSS y también puedes usarlo.

Javascript

Y por último, solo un poco de Javascript vanilla para darle al botón sus efectos de movimiento tan chulos.

Código Javascript para el Social Share Button

Haz clic aquí para ver el código original de Nate completo y después implementarlo en tu propio sitio web.

Comentario final

En este blog te hemos mostrado cómo implementar un Social Share Button en tu sitio web en 5 minutos. Si prefieres otro botón, puedes hacer lo mismo que nosotros. Busca en internet un botón que te guste (por ejemplo aquí) y usa la base de ese código para implementar tu propio social share button único en tu página.