Agregar una barra flotante para compartir en redes sociales puede mejorar enormemente la visibilidad de tu contenido y animar a los lectores a promocionarlo en redes sociales. Una barra flotante acompaña al usuario mientras se desplaza, facilitando compartir contenido en cualquier momento.
Al administrar nuestros propios sitios, hemos visto el impacto de las barras flotantes para compartir en redes sociales en la generación de interacción y el aumento del tráfico. Al agregar estratégicamente esta función a nuestros sitios web, hemos observado un impulso notable en las veces que se comparte en redes sociales y un mayor alcance para nuestro contenido.
Ya sea que administres un blog o un negocio, agregar una barra flotante para compartir en redes sociales puede ser una forma sencilla de fomentar la interacción y expandir tu presencia en línea.
En este artículo, te guiaremos a través del proceso de agregar una barra flotante para compartir en redes sociales a tu sitio de WordPress. Nuestras instrucciones paso a paso lo hacen sencillo incluso para principiantes.
¿Por qué agregar una barra flotante para compartir en redes sociales en WordPress?
Agregar una barra destacada para compartir en redes sociales facilita que los visitantes compartan tu contenido en plataformas de redes sociales como Instagram, Facebook y Twitter. Al mantener esta barra visible mientras se desplaza, proporcionas una forma conveniente para que los usuarios compartan tu contenido en cualquier momento.
Esto puede generar un aumento en la interacción, el tráfico y el conocimiento de la marca. Además, puede motivar a los usuarios a dejar comentarios y me gusta o a seguir tus actualizaciones.
Aparte de eso, una barra flotante para compartir en redes sociales puede mejorar indirectamente el posicionamiento de tu sitio web al aumentar las señales sociales. Cuando los usuarios comparten tu contenido en redes sociales, genera backlinks a tu sitio web, lo que puede impactar positivamente en tu posicionamiento en motores de búsqueda.
Dicho esto, veamos cómo agregar fácilmente una barra flotante para compartir en redes sociales en WordPress. En este tutorial, discutiremos un método con código y otro con plugin. Puedes usar los enlaces a continuación para saltar al enfoque de tu elección:
- Método 1: Agregar una barra flotante para compartir en redes sociales con WPCode
- Método 2: Agregar una barra flotante para compartir en redes sociales con un plugin
- Extra: Agregar una barra flotante para compartir en redes sociales en WordPress
Método 1: Agregar una barra flotante para compartir en redes sociales con WPCode
Si buscas una forma personalizable y fácil de agregar una barra flotante para compartir en redes sociales en WordPress, entonces este método es para ti.
Para este enfoque, usaremos WPCode porque es el mejor plugin de fragmentos de código para WordPress del mercado. Para más información sobre esta herramienta, consulta nuestra reseña completa de WPCode.
WPCode tiene una extensa biblioteca de fragmentos de código prefabricados, incluida una solución lista para usar para agregar una barra flotante para compartir en redes sociales. Esto elimina la necesidad de codificación personalizada y facilita la implementación de esta función en tu sitio web.
Primero, necesitas instalar y activar el plugin WPCode. Para más información, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Nota: WPCode tiene una versión gratuita. Sin embargo, para desbloquear la biblioteca de fragmentos de código, necesitarás el plan pro del plugin.
Al activarlo, dirígete a la página Fragmentos de código » + Añadir fragmento desde el panel de WordPress y utiliza el cuadro de búsqueda para localizar el fragmento de ‘Iconos flotantes de redes sociales’.
Una vez que lo hagas, simplemente haz clic en el botón ‘Usar fragmento’ debajo de él.
Esto abrirá la página ‘Editar fragmento’ en tu pantalla. Notarás que el fragmento de código para la barra flotante de redes sociales, con enlaces a Facebook, Instagram, Twitter y LinkedIn, ya ha sido añadido al cuadro ‘Vista previa del código’.
Ahora puedes usar el fragmento de código tal como está o desplazarte hacia abajo y cambiar la posición, el margen, el ancho, el color de fondo, la altura y el radio del borde de los iconos.
Por ejemplo, el color de fondo de estos iconos de redes sociales es negro por defecto. Sin embargo, puedes reemplazarlo con el código hexadecimal de un color que coincida mejor con tu marca.
Después de eso, desplázate hacia arriba y cambia el interruptor de ‘Inactivo’ a ‘Activo’.
Luego, haz clic en el botón ‘Actualizar’ para guardar tu configuración y agregar una barra flotante para compartir en redes sociales.
Ahora puedes visitar tu sitio web para ver los íconos de redes sociales en acción.
Así es como se veía en nuestro sitio web de demostración.
Método 2: Agregar una barra flotante para compartir en redes sociales con un plugin
Si no quieres usar código personalizado en tu sitio web, entonces este método es para ti. Dicho esto, ten en cuenta que no obtendrás tantas opciones de personalización con este enfoque.
Primero, necesitas instalar y activar el plugin Floating Social Share Icons. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.
Tras la activación, visita la página Floating Links & Social Icons desde el panel de WordPress. Por defecto, el plugin agregará automáticamente íconos flotantes que permiten a los usuarios visitar la página de inicio, la siguiente publicación, la publicación anterior, la parte superior de la página, la parte inferior de la página y copiar la URL actual.
Sin embargo, si no necesitas ninguna de estas funcionalidades, puedes desactivar el interruptor para esas opciones. Una vez que lo hagas, tus cambios se sincronizarán automáticamente.
Después de eso, dirígete a la página Floating Links & Social Icons » Social Icons desde la barra lateral del administrador.
Para personalizar tu barra flotante para compartir en redes sociales, simplemente activa el interruptor junto a las plataformas de redes sociales deseadas. Esto hará que los íconos correspondientes aparezcan en tu barra, permitiendo a los visitantes compartir fácilmente tu contenido.
Tu configuración se guardará automáticamente una vez que realices los cambios.
Luego, puedes visitar tu sitio de WordPress para ver la barra flotante para compartir en redes sociales en acción.
Extra: Agregar una barra flotante para compartir en redes sociales en WordPress
Si lo deseas, también puedes agregar una barra flotante con botones para seguir en WordPress.
Esto permite a los visitantes conectarse fácilmente con tus perfiles de redes sociales y mantenerse al día con tus últimas noticias y eventos. Al hacer que sea conveniente para los usuarios seguirte en redes sociales, puedes ampliar tu alcance y fomentar una comunidad dedicada.
Para hacer esto, necesitarás OptinMonster, que es la mejor herramienta de generación de leads del mercado. Además, viene con una plantilla prediseñada para crear una barra social flotante.
Primero, visita el sitio web de OptinMonster y regístrate para obtener una cuenta. Recuerda que necesitarás comprar el plan Básico porque incluye el tipo de campaña Barra Flotante.
Luego, dirígete a tu panel de WordPress para instalar y activar el plugin conector de OptinMonster. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.
Al activarse, verá la pantalla de bienvenida y el asistente de configuración. Haga clic en el botón ‘Conectar su cuenta existente’.
Luego, puedes seguir las instrucciones en pantalla para conectar tu cuenta de OptinMonster con WordPress.
Una vez hecho esto, dirígete a la página OptinMonster » Plantillas desde el panel de WordPress y selecciona 'Barra Flotante' como tipo de campaña.
A continuación, haz clic en el botón 'Usar plantilla' para la plantilla 'Seguir en Redes Sociales'. Esto abrirá un cuadro donde debes agregar un nombre para la campaña que estás a punto de crear.
El constructor de arrastrar y soltar de OptinMonster se iniciará en tu pantalla.
Aquí es donde puedes diseñar tu barra flotante.
El plugin ofrece diferentes bloques que puedes simplemente arrastrar y soltar en la plantilla. Por ejemplo, puedes agregar una imagen, texto, botón y más a tu barra de redes sociales.
Para obtener más información, consulta nuestro tutorial sobre cómo agregar una barra de alertas en WordPress.
Después de eso, haz clic en los botones de seguimiento de redes sociales dentro de la barra flotante. Esto abrirá algunas configuraciones nuevas en la columna izquierda.
Aquí, puedes agregar la URL de tus páginas de Facebook, Instagram y Twitter según corresponda.
Una vez que hayas terminado, cambia a la pestaña 'Publicar' desde la parte superior y cambia el estado de la campaña a 'Publicar'. Luego, deberás hacer clic en el botón 'Guardar' y cerrar el constructor visual.
Ahora puedes visitar tu sitio de WordPress para ver la barra social flotante en acción.
Esperamos que este artículo te haya ayudado a aprender cómo agregar una barra flotante de compartir en redes sociales en WordPress. También te puede interesar nuestra guía para principiantes sobre cómo agregar botones para compartir en redes sociales en WordPress y nuestras mejores selecciones de los mejores plugins de redes sociales para hacer crecer tu sitio.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
zak
¿Qué plugin de redes sociales usas en este sitio? ¿Porque se ve diferente a tu barra flotante para compartir en redes sociales?
Soporte de WPBeginner
Hola zak,
Sí, está escrito específicamente para WPBeginner.
Administrador
Stephanie
¿Cómo agregas los botones para compartir al final de la publicación en lugar de al principio?
Gracias
Ralph Eastwood
Acabo de instalar el plugin. Se ve bien. ¿Hay alguna forma de tener la barra en la parte inferior de la publicación? Parece tener más sentido tenerla allí. Las personas van a compartir una publicación una vez que la hayan leído y piensen que tiene valor; ¡no quiero depender de que se desplacen hasta arriba solo para compartir!
Laura
He instalado, activado y agregado Facebook a la casilla de 'servicios sociales habilitados'. No tengo una cuenta de usuario de Twitter, así que dejé esa parte en blanco. Guardé la configuración, ¡pero la pestaña de Facebook no aparece en mi sitio web! ¿Me perdí algo? Gracias
sham
Mi contador social ha vuelto a cero después de migrar a HTTPS. ¿Cómo soluciono esto?
Alan
Tus instrucciones dicen: “A continuación, agrega tu ID de Twitter en el campo…”
Yo no tengo cuenta de Twitter. ¿No puedo usar este plugin sin unirme a Twitter? (Estoy en Facebook y LinkedIn.)
Personal editorial
No habilites el botón para compartir de Twitter o simplemente déjalo en blanco. Te permite obtener más seguidores si ingresas tu ID de Twitter allí.
Administrador
Siska
Me gustaría usar este plugin, pero no encuentro la manera de cambiar el color de fondo… Mi web no es blanca.
Siska
Me gustaría usar este plugin, pero no encuentro la manera de cambiar el color de fondo… Mi web no es blanca.
Soporte de WPBeginner
Intenta agregar esto en la hoja de estilos de tu tema:
#fsb-social-bar { border-bottom: 1px solid #f1f1f1; border-top: 1px solid #f1f1f1; padding: 10px 0; margin: 0px 0 20px 0; float: left; background: #222; position: relative; clear: both; }1-click Use in WordPress
Administrador
Jean
¡Gracias por esto! ¿Cómo harías para rastrear las comparticiones como un objetivo en Google Analytics?
Elisa
Error al presionar el botón de Google +1. Me aparece un triángulo rojo y no lo resuelvo.
¡¡¡Ayuda!!!
Rick
¿Cómo puedo desactivar la pantalla que muestra el número de veces que se ha compartido? No quiero que se muestre el recuento de las veces que se ha compartido.
Rebecca
Hola, buen plugin. Sin embargo, tengo un problema, cuando uso el botón "pin it", recorta la foto. ¿Cómo puedo evitar eso?
Skwty
Solo quería avisarles que su plugin Floating Social Bar estaba causando problemas con mi tema WP-Bold. Eliminaba el extracto del widget que usaba para mostrar contenido relacionado en la barra lateral. El título estaba ahí, pero solo en single.php desaparecía el extracto. El soporte de Solostream mencionó que debería decir algo. Cambié a otro plugin por eso, pero preferiría usar Floating Social Bar.
¡Gracias!
Zomi Daily
¿Podrías incluir el botón de compartir de Facebook, por favor?
Jon Brown
¿Todavía planeas lanzar una versión que incluya los recuentos de comentarios como lo hace este sitio? Incluso si no está lista para su lanzamiento, ¿ese código es público?
Jorge
Hi! Thanks for the great plugin. I have some questions when people press like or +1 do they share the post in my blog too? How can people share my content from the social bar? What is the capital of North Dakota
Thanks again!
Julius
Gran plugin, pero desafortunadamente consume muchos recursos. El plugin P3 muestra que consume el 51% de todos mis plugins (tengo 12 plugins).
Soporte de WPBeginner
Lo usamos en nuestros propios sitios y somos muy conscientes de la velocidad de la página. En cuanto al plugin P3, los resultados de las pruebas pueden verse afectados por muchos factores, como otros servicios que se ejecutan en su servidor; si está en un servidor compartido, esto también afectará los resultados.
Administrador
Urmet
Gran plugin, pero me gustaría saber una cosa: ¿puedo hacer que el contador se cargue inmediatamente, como lo tienen en su propia página, donde los números de compartir son visibles incluso si no estoy pasando el cursor sobre el plugin?
Haider
¡Gran plugin, de verdad!
I finally activated and modified it a little to suit my theme
Tengo algunas preguntas:
1. ¿Planean incluir el nuevo botón de compartir de Facebook junto con el botón de "Me gusta"? Por favor, consideren esto.
2. ¿No sería mejor manejar el estilo con un archivo CSS separado en lugar de CSS en línea? Muchos temas premium tienen la opción de CSS personalizado que se agrega al encabezado; pero eso no funciona en este caso. Tuve que modificar el archivo del plugin para cambiar los estilos.
¡Muchas gracias por un producto tan increíble!
Jenn Marie
¡Hola! De una persona de alta calidad a otra: Te veo. Este plugin es genial, ¡y sospecho que se debe a la meticulosidad que veo en todo tu trabajo!
Una pregunta: ¿tienes idea de por qué la barra no es fija para mí en iPhone (iOS7)? Estoy usando Point, un tema adaptable. He intentado deshabilitar otros plugins sociales.