¿Por qué es importante tener botones de rede sociales en tus propriedades web? Alentar a que tus clientes y fans compartan tu contenido puede ser una gran manera de extender tu alcance en línea. Pero nadie va a compartir tu contenido si es un fastidio hacerlo.
Olvídate de hacer que las personas copien y peguen enlaces. Con un simple código, tu puedes añadir botones de redes sociales que permitan a los usuarios compartir tu contenido a través de redes con solo un par de clics.
Tabla de contenidos
Tipos de botones de redes sociales
Botones de redes sociales para Facebook
Botones de redes sociales para Instagram
Botones de redes sociales para LinkedIn
Botones de redes sociales para Twitter
Botones de redes sociales para YouTube
Botones de redes sociales para Pinterest
Botones de redes sociales para Hootsuite
Tipos de botones de redes sociales
Los tipos más comunes de botones de redes sociales ofrecen funciones de compartir, Gustar, y seguir. Cada una sirve para un propósito diferente, y la forma en que funcionan varía en algún tanto entre redes. Pero generalmente cada tipo hace lo que su nombre implica:
- Botones de compartir permite a los usuarios compartir tu contenido con seguidores y amigos
- Botones de Gustar les permite darle a tu publicación un pulgar arriba virtual
- Botones de Seguir los suscribirán a tus actualizaciones en una red social específica
Todos los botones de redes sociales en esta publicación están activos, así que tú puedes interactuar con ellos a ver exactamente cómo funcionan. Los hemos creado usando las herramientas indicadas abajo para cada red social.
Botones de redes sociales para Facebook
Facebook ofrece diversos botones de redes sociales: Compartir, Seguir, Gusta, guardar, y enviar.
Botón de compartir de Facebook
Cómo funciona
Añadir un botón de compartir de Facebook a tu sitio web, no sorpresivamente, permitirá a los visitantes que compartan tu contenido con sus amigos y seguidores en Facebook. Ellos pueden elegir si comparten tu contenido en su muro, en un grupo, o e hasta en un mensaje privado usando Facebook Messenger. Los usuarios pueden además añadir sus propios mensajes personalizados al contenido compartido antes de publicarlo.
Cómo añadir el botón de compartir
Usa el configurador de botón de compartir de Facebook para crear un código de botón que puedas pegar en el HTML de tu página .
Opciones del botón de compartir de Facebook
Cuando incluyas un botón de compartir de Facebook en tu sitio, puedes elegir si mostrar el número de veces que tu página ya ha sido compartida (cómo lo hicimos en el botón de arriba). Si tu página recibe una gran cantidad de “compartidos” sociales, este número puede proporcionar una gran prueba social del valor de tu contenido.
Botón de seguir de Facebook
Cómo funciona
El botón de seguir permite a los usuarios suscribirse a actualizaciones públicas de relevantes Páginas de Facebook.
Cómo añadir el botón de seguir de Facebook
Usa la Interfaz del botón de seguir de Facebook para crear un código que puedas copiar y pegar en tu HTML.
Opciones del botón de seguir de Facebook
Puedes elegir mostrar el número de personas que ya siguen tu página al seleccionar las opciones de “caja de recuento” o “botón de recuento.” Para personalizar la prueba social, puede elegir mostrar a los visitantes cuáles de sus amigos de Facebook ya siguen tu página, y además mostrar la cara de esos seguidores, al seleccionar la opción “estándar” y dando clic a la caja de Mostrar Cara.
Botón de Gustar en Facebook
Cómo funciona
Dándole Clic al botón de “Me Gusta” en tu página web tiene el mismo efecto que darle clic a una de tus publicaciones de Facebook. El contenido que fue gustado se mostrará en el muro del usuario en Facebook, y podría aparecer en las noticias de sus amigos.
Cómo añadir el botón de “Me Gusta” de Facebook
Ve al configurador de botón de “Me Gusta” de Facebook para crear el código para copiar y pegar en tu HTML.
Opciones del botón de “Me Gusta” de Facebook
Como con los otros botones de Facebook, puedes elegir mostrar el número de veces que tu página ha sido gustada. También puedes proveer de botones personalizados mostrando cuáles de los amigos de Facebook del visitador ya han gustado la página.
Una extra opción interesante es que tú puedas escoger para que el botón diga “Recomendar” en lugar de “Me Gusta.”
Botón de Guardar de Facebook
Cómo funciona
El botón de Salvar de Facebook funciona igual que la opción de Salvar en las publicaciones de Facebook. Salva los enlaces a una lista privada del usuario para que pueda ser revisada en otro momento; esencialmente agrégalo dentro de Facebook y facilita que sea compartido después.
Cómo añadir un botón de Salvar de Facebook
Utiliza el configurador de botón de Salvar de Facebook para crear el código para pegar dentro de tu HTML.
Botón de Enviar de Facebook
Cómo funciona
El botón de enviar de Facebook permite a los usuarios enviar contenido desde tu sitio web directamente a sus amigos a través de un mensaje privado en Facebook Messenger, una forma de compartir en la obscuridad social.
Cómo añadir un botón de enviar de Facebook
Lo has adivinado, Facebook tiene un configurador de botón de enviar que te provee con un código que necesitas pegar en tu HTML.
Botones de redes sociales para Instagram
Instagram no ofrece botones de Compartir o Gustar, lo que tiene sentido, desde que su naturaleza es de una plataforma móvil que comparte fotos y videos, lo cual no lo hace adecuado para Gustar y compartir contenido web.
En lugar de eso, Instagram usaba ofrecer insignias que podrías utilizar para mandar personas de tu sitio web directamente a tu muro en Instagram, pero esas insignias ya no están disponibles. Cambios en el API de Instagram de igual manera han hecho difícil que los proveedores de terceros creen botones e insignias funcionales de Instagram.
Esto significa que te quedas con muy pocas opciones en términos de botones para compartir para Instagram. Pero hay una solución alternativa, y es sencilla: Incorpora una publicación de Instagram.
Adicionalmente a la foto, la incorporación de la publicación incluye un botón de seguir que permitirá que los usuarios sigan tu cuenta sin irse de tu sitio web. Hasta podrías publicar una foto en Instagram que específicamente utilices para este propósito; una clase de publicación verde que destaquen el valor de tu cuenta de Instagram.
O podrías crear una publicación en Instagram que directamente relacione el contenido de una página en específico. Obviamente tu no quieres hacer esto en cada una de tus páginas web, pero incorporar una relevante foto en Instagram puede ser una gran opción en publicaciones de blog.
Cómo incorporar una publicación en Instagram con un botón de seguir
- Navega a la específica publicación que quieras incorporar, o ve a tu perfil de Instagram y baja hasta encontrar una opción relevante
- Dale clic a la publicación
- Dale clic en el botón de más (…) en la parte inferior
- Selecciona Incorporar
- Elige si quieres incluir el título y luego dale clic en Copie el código insertado Copiar el código insertado
- Publica tu código dentro de tu HTML.
Botones de redes sociales para LinkedIn
LinkedIn ofrece códigos personalizados JavaScript para ambos compartir y seguir
Botón de compartir de LinkedIn
El botón de compartir de LinkedIn combina las funciones de los botones de Facebook de compartir y enviar. Permite a los usuarios compartir tu contenido en LinkedIn en diversas maneras, En su perfil público, con sus contactos, en un grupo, o en un mensaje a uno o más individuos. Darle clic en el botón abre una ventana que provee la opción de añadir un mensaje personal a la publicación, además de las opciones de compartir.
Cómo añadir un botón de compartir
Ve a la página de generador plugin de compartir de LinkedIn para crear códigos JavaScript que puedas pegar dentro de tu HTML.
Opciones del botón de compartir de LinkedIn
Puedes elegir si quieres mostrar el número de veces que tu contenido ha sido compartido en LinkedIn.
Botón de seguir en LinkedIn
Darle clic en el botón de seguir de LinkedIn permite a los usuarios que sigan a tu compañía en LinkedIn sin tener que dejar tu sitio Web.
Cómo añadir el botón de seguir de LinkedIn
Usa el generador de plugin de seguir a la compañía de LinkedIn para crear un código que puedas pegar dentro de tu HTML.
Opciones del botón de seguir de LinkedIn
Tal como con el botón de compartir de LinkedIn, tu puedes mostrar el número de personas que ya han seguido a tu compañía en LinkedIn como parte del botón.
Pero también hay una opción más interesante que explorar. El plugin de perfil de la compañía funciona de la misma manera que un simple botón de seguir, pero proporciona más información sobre tu empresa con el simple desplazamiento del ratón.
Botones de redes sociales para Twitter
Adicionalmente a los botones estándar de compartir y seguir, Twitter ofrece botones para hacer un tuit con un particular hashtag, o para mencionar-@ a alguien con un clic de tu ratón. También hay un botón que permite enviar un mensaje privado en Twitter.
Botón de compartir de Twitter
Cómo funciona
Cuando un usuario hace clic en el botón de tuit, una ventana se abre con un tuit conteniendo un pequeño título de la página y su URL, o un URL personalizado. Un URL personalizado te permite incluir parámetros UTM para checar cuánto tráfico obtienes de tu botón de compartir de Twitter. El usuario puede añadir más texto si lo desea antes de enviar el tuit.
Cómo añadir el botón de compartir de Twitter
- Ve a publish.twitter.com, desplázate hacia abajo, y dale clic a Botones de Twitter
- Clic en Botón de Compartir
- Arriba de la caja de código, dale clic a establecer opciones personalizadas
- Entra tus preferencias para opciones de tuit y tamaño del botón, luego dale clic a Actualizar
- Copia y pega el código proporcionado dentro de tu HTML
Opciones del botón de compartir de Twitter
Usar la opción de personalizar, podrás elegir incluir un hashtag y un usuario “vía,” que asegurara que tu recibas tanto crédito como la fuente de tu gran contenido. También puedes optar por previamente llenar algún texto.
Botón de seguir de Twitter
Cómo funciona
El botón de seguir de Twitter no es tan eficiente como el botón de seguir de Facebook, ya que requiere dos clics del usuario. Al darle clic al botón abrirá una ventana con una vista previa de tu perfil de Twitter. El usuario tiene que dar clic a Seguir nuevamente en esa ventana para complementar el proceso.
Cómo añadir el botón de seguir de Twitter
- Ve a publish.twitter.com, desplázate hacia abajo, y dale clic a Botones de Twitter
- Clic en Botón de Seguir
- Ingresa tu usuario de Twitter, incluyendo el símbolo @ (ej., @Hootsuite)
- Dale clic en Vista Previa
- Arriba de la caja de código, dale clic a establecer opciones personalizadas
- Entra tus preferencias para opciones de tuit y tamaño del botón, luego dale clic a Actualizar
- Copia y pega el código proporcionado dentro de tu HTML
Opciones del botón de seguir de Twitter
Puedes elegir si enseñas u ocultas tu usuario en el botón, y si te gustaría que el botón fuera pequeño o grande. También puedes escoger el lenguaje en el que se mostrará tu botón.
Botón de mención de Twitter
Cómo funciona
Cuando alguien le da clic al botón de mención de Twitter en tu página web, una ventana aparecerá con un tuit en blanco empezando con una mención-@ de tu usuario. Esto puede ser una gran forma de hacer que los lectores interactúen con tu equipo en Twitter, o para fomentar las consultas de servicio al cliente a través de la red.
Cómo añadir el botón de mención de Twitter
- Ve a publish.twitter.com, desplázate hacia abajo, y dale clic a Botones de Twitter
- Clic en Botón de Mención
- Ingresa tu usuario de Twitter, incluyendo el símbolo @ (ej., @Hootsuite)
- Dale clic en Vista Previa
- Arriba de la caja de código, dale clic a establecer opciones personalizadas
- Entra tus preferencias para opciones de tuit y tamaño del botón, luego dale clic a Actualizar
- Copia y pega el código proporcionado dentro de tu HTML
Opciones del botón de mención de Twitter
Puedes optar por previamente llenar algún texto en el Tuit, lo que puede ser una buena idea si estas usando el botón para una página de servicio al cliente. También puedes elegir si te gustaría que el botón fuera grande o pequeño, y el lenguaje en el que se mostrará el texto del botón.
Botón de Hashtag de Twitter
Cómo funciona
Cuando alguien le da clic a un botón de hashtag de Twitter en tu página web, una ventana aparecerá con un tuit que contiene el hashtag seleccionado. Esta es una gran manera de incentivar a las personas a compartir tu hashtag de marca, o motivarlos a participar en un chat de twitter.
Cómo añadir el botón de hashtag de Twitter
- Ve a publish.twitter.com, desplázate hacia abajo, y dale clic a Botones de Twitter
- Clic en Botón de Hashtag
- Ingresa tu usuario de Twitter, incluyendo el símbolo @ (ej., @Hootsuite)
- Dale clic en Vista Previa
- Arriba de la caja de código, dale clic a establecer opciones personalizadas
- Entra tus preferencias para opciones de tuit y tamaño del botón, luego dale clic a Actualizar
- Copia y pega el código proporcionado dentro de tu HTML
Opciones del botón de hashtag de twitter
Como con el botón de mención, tú puedes optar por previamente llenar algún texto, elegir el tamaño del botón, y especificar el lenguaje en el que se mostrará el texto del botón. También puedes optar por incluir un URL específico, que puede funcionar correctamente si tu archivas tus conversaciones de Twitter o recopilas contenido generado por el usuario en una página específica. Además, puedes también escoger una página de destino relevante para una campaña específica de hashtag.
Botón de mensaje de Twitter
Cómo funciona
El botón de mensajes de twitter permite a los usuarios enviarte un mensaje directo privado en Twitter. Es importante que te des cuenta de que esta función es diferente a la del botón de enviar de Facebook, el cual permite a los usuarios enviar contenido en mensaje privado a cualquier persona con la que estén conectados. Con el botón de mensaje de Twitter, el usuario solo te puede contactar a ti, a nadie más en Twitter. Mientras que esto no te ayudará a expandir tu alcance social, puede ser una gran manera de incentivar a las personas a que contacten tu servicio al cliente y equipo de ventas a través de Twitter.
El botón de mensaje de Twitter trabajará mejor si tú ya tienes tu cuenta establecida para permitir mensajes directos de cualquier. Si no, las personas que no te sigan no podrán mandarte mensajes, y podrías terminar ocasionando frustración a en tu marca.
Cómo añadir el botón de mensaje de Twitter
- Inicia sesión en tu cuenta de Twitter
- En la columna de la izquierda, da clic en Privacidad y Seguridad
- Baja hasta Mensajes Directos y selecciónala caja a lado de Recibir Mensajes Directos de Cualquier Persona
- En la columna de la izquierda, da clic en Tus datos de Twitter. Tal vez necesitas poner tu contraseña para acceder a esta pantalla.
- Selecciona y copia tu ID de usuario, que aparece dentro de tu usuario
- Ve a publish.twitter.com, desplázate hacia abajo, y dale clic a Botones de Twitter
- Clic en Botón de Mensaje
- Ingresa tu usuario de Twitter, incluyendo el símbolo @ (ej., @Hootsuite)
- Pega tu ID de usuario dentro de la caja inferior
- Dale clic en Vista Previa
- Arriba de la caja de código, dale clic a establecer opciones personalizadas
- Entra tus preferencias para opciones de tuit y tamaño del botón, luego dale clic a Actualizar
- Copia y pega el código proporcionado dentro de tu HTML
Opciones del botón de mensajes de Twitter
Puedes optar por previamente llenar algún texto, lo que podría funcionar muy bien si el botón está en una página donde las personas estén dispuestas a contactarte acerca de un producto en específico, problemas en el servicio al cliente, o promociones. También puedes elegir si quieres mostrar tu usuario en el botón, el tamaño del botón, y el lenguaje que se mostrará en el texto del botón.
Botones de redes sociales para YouTube
YouTube solo ofrece un botón de redes sociales, el cual permite a los usuarios que se suscriban a un canal de YouTube.
Botón de suscripción de YouTube
Cómo funciona
Cómo el botón de seguir de Twitter, el botón de suscripción de YouTube requiere dos clics. Primero, cuando alguien de clic en tu botón de suscribir, tu canal de YouTube se abrirá en una nueva ventana, con una caja de confirmación de suscripción. Luego el usuario tendrá que dar clic en suscribir de nuevo para que la suscripción tenga efecto.
Cómo añadir un botón de suscripción de YouTube
Usa en la para crear el código que necesitas para pegar en tu HTML.
Opciones del botón de suscripción de YouTube
Tienes pocas opciones cuando configures tu botón de suscripción de YouTube. Tienes la opción de incluir tu imagen de perfil de YouTube, un fondo oscuro detrás del botón, y si quieres puedes mostrar el número de suscriptores existentes. Como con otras redes, resaltar un gran número de suscriptores existentes puede ser una gran señal de prueba social.
Botones de Redes sociales para Pinterest
Botón de guardar de Pinterest
Cómo funciona
El botón de guardar de Pinterest es equivalente al botón de compartir de otras redes en el que guardar tu contenido a un tablero de Pinterest extenderá tu alcance. Puesto que Pinterest es una plataforma basada en imágenes para mantener el control de la información y las ideas, funciona un poco diferente de los botones de compartir de otras redes. Hay tres diferentes formas en las que puedes configurar tu botón de guardar en tu sitio:
- Imagen flotante: En lugar de poner un botón independiente de Pinterest en tu sitio web, esta crea un código que lleva un botón Pin It cuando alguien pasa el ratón sobre cualquier imagen de tu página. Esta es la opción más recomendada por Pinterest.
- Cualquier imagen: Con esta opción, tú pones un botón de Pinterest en tu página web. Al darle clic le da al usuario la opción de guardar cualquiera de las imágenes de tu sitio a su tablero de Pinterest.
- Una imagen: En este caso, el botón de guardar solo aplica a una única imagen en tu página. Esta es la opción más complicada en término de códigos.
Cómo añadir un botón de guardar de Pinterest, Imagen flotante o Cualquier imagen
- Ve al creador de widgets de Pinterest y da clic en Guardar Botón
- Elige que tipo de botón quieres usar: Imagen flotante o cualquier imagen
- Selecciona tu opción preferida para cualquier tamaño y figura
- Pasa tu ratón sobre cualquier imagen simple para ver tu botón
- Copia el código del botón y pégalo dentro de tu HTML
- Para la opción de cualquier imagen, copia y pega el script pint.js del fondo de la página de creador de widgets dentro de tu HTML, justo arriba de la etiqueta
Cómo añadir un botón de guardar de Pinterest, estilo una imagen
- Ve al creador de widgets de Pinterest y da clic en Guardar Botón
- Selecciona tu opción preferida para el tamaño del botón y figura
- En una nueva ventana de tu buscador, ve a la página de tu sitio web donde la imagen con la que quieres trabajar aparece
- Copia y pega el URL de esa página web dentro de la caja de URL en el creador de widget
- En tu página web, dale clic derecho a la imagen con la que quieres trabajar, y selecciona Copiar URL de Imagen
- Pega tu URL dentro de la caja de Imagen en el creador de widget
- Pon una descripción de la imagen en la caja de Descripción en el creador de widget. Esto aparecerá debajo de tu imagen cuando alguien la guarde en Pinterest
- Haz clic en el botón Pin It en el creador de widget para probar tu botón
- Copia el código de botón y pégalo dentro de tu HTML
- Copia y pega el script pint.js desde la parte inferior de la página de creador de widgets dentro de tu HTML, justo encima de la etiqueta
Opciones del botón de guardar de Pinterest
Además de elegir qué tipo de botón utilizar, puedes personalizar la forma de tu botón (Redondo o rectangular), tamaño (pequeño o largo), y su lenguaje. También puedes escoger si deseas mostrar tu número de Pin existentes para tu imagen.
Botón de seguir de Pinterest
Cómo funciona
Cuando alguien hace clic en el botón de seguir de Pinterest en tu sitio web, una ventana de vista previa aparece para mostrarte tus últimos pins. Luego, ellos hacen clic en el botón de Seguir dentro de la vista previa para empezar a seguir tu cuenta de Pinterest.
Cómo añadir el botón de seguir de Pinterest
- Ve al creador de widgets de Pinterest y haz clic en Seguir
- Ingresa tu URL de tu perfil de Pinterest
- Introduce el nombre de tu empresa como desees que aparezca en el botón
- Copia el código del botón y pégalo dentro de tu HTML
- Copia y pega el script pint.js desde la parte inferior de la página de creador de widgets dentro de tu HTML, justo encima de la etiqueta
Opciones del botón de seguir de Pinterest
Tu única opción con el botón de seguir de Pinterest es cómo mostrar el nombre de tu negocio. Es posible que quieras usar tu nombre de usuario de Pinterest, o el nombre completo de tu negocio. En cualquier caso, quédate con algo sencillo para que los usuarios lo entiendan
Botones de redes sociales para Hootsuite
Hootsuite ofrece un botón de redes sociales que permite a los usuarios compartir tu contenido a cualquiera de las redes a las que tu tablero de Hootsuite esté conectado.
Botón de compartir de Hootsuite
Cómo funciona
Cuando el usuario le da clic al botón de Hootsuite en tu página web, abrirá una ventana con una interfaz que contiene un enlace a tu contenido. El usuario puede escoger a que red social se lo compartirá: Twitter, Facebook, LinkedIn, Google+, o todas las anteriores. Pueden añadirle un mensaje personal antes de compartirlo, y decidir si publicarlo de inmediato, programarlo para algún tiempo en el futuro, o usar la característica de Hootsuite de programación automática.
Cómo añadir el botón de compartir de Hootsuite
Ve a hootsuite.com/social-share, ingresa tu URL, y copia y pega el código dentro de tu HTML.
Opciones del botón de compartir de Hootsuite
Puedes elegir de varios diversos estilos de botón.
Lleva tus habilidades de redes sociales al siguiente nivel con el entrenamiento gratuito en línea y videos de Hootsuite Academy
