Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo agregar una barra flotante para compartir en redes sociales en WordPress

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.

Agregar una barra flotante para compartir en redes sociales en WordPress

¿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

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.

Haga clic en Usar fragmento para el fragmento de iconos flotantes de redes sociales

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.

Personalizar la barra flotante para compartir en redes sociales

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.

Activar la actualización del fragmento de código

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.

GIF de barra flotante para compartir en redes sociales

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.

Elimine los iconos innecesarios activando el interruptor

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.

Agregar una barra flotante para compartir en redes sociales en WordPress

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.

GIF para la barra flotante para compartir en redes sociales

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.

Sitio web de OptinMonster

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’.

Conecta tu 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.

Seleccionar plantilla de barra de seguimiento en redes sociales

El constructor de arrastrar y soltar de OptinMonster se iniciará en tu pantalla.

Aquí es donde puedes diseñar tu barra flotante.

Personaliza la barra social a tu gusto

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.

Agrega las URLs de tus páginas y perfiles de redes sociales

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.

Barra flotante de redes sociales en WordPress

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.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

123 CommentsLeave a Reply

  1. 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!

  2. 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

  3. 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.)

  4. ¿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.

  5. Hola, buen plugin. Sin embargo, tengo un problema, cuando uso el botón "pin it", recorta la foto. ¿Cómo puedo evitar eso?

  6. 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!

  7. ¿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?

  8. 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!

  9. Gran plugin, pero desafortunadamente consume muchos recursos. El plugin P3 muestra que consume el 51% de todos mis plugins (tengo 12 plugins).

    • 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

  10. 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?

  11. ¡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!

  12. ¡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.

  13. Mucha gente como yo tiene problemas con que tu barra flotante no funcione. ¿Revisas los comentarios de soporte? Supongo que la única opción es asumir que, dado que no abordas las razones por las que tu barra flotante no funciona, debe estar rota y debo buscar otra solución. (Cara triste)

  14. Hola, gracias por compartir este plugin. Cada vez que hago clic en 'Me gusta' en la barra social flotante, me aparece una ventana para compartir con mis amigos. Pero la ventana está cortada, solo se ve el lado izquierdo. Solo sucede con el botón Me gusta de Facebook y no con G+. ¿Sabes cómo arreglar esto?

    • Brian, intenta agregar esto a tu hoja de estilos o a la caja de CSS personalizado de tu tema:

      /* para corregir el recorte de la ventana emergente tipo publicación de fb */
      .fb-like iframe {
      max-width: inherit !important;
      }

      Yo tenía el mismo problema y ¡esto funcionó de inmediato!

  15. Me encantó este plugin. Hice algunos cambios yo mismo para mejorarlo para mi blog.

    También estoy usando Sticky Header de ThematoSoup. Así que cuando el encabezado fijo se desplaza hacia abajo, la barra social flotante se superpone perfectamente.

    El problema es el fondo de la barra y la imagen fsb-sprite.
    Así que edité el css de este plugin para eliminar el color de fondo de la barra y eliminé el fondo de la imagen fsb-sprite.

    Puedes ver eso funcionando en cualquier publicación de mi blog. Mi blog: Techpingo[punto]com.

    Mi pregunta: En la versión gratuita se usa una imagen como botones y los contadores se colocan correctamente. Pero, ¿cómo puedo usar una versión personalizada con botones reales como los tuyos en el blog “wpbeginner.com” y el blog hermano “list25.com”?

    Por favor, dime cómo hacerlo, pero no me digas que no.

  16. Hola,

    Solo quería saber si la barra se puede deshabilitar para dispositivos móviles, ya que compartir en redes sociales es nativo en iOS, etc. Si es así, ¿cómo?

    Disculpas, si ya abordaste la pregunta en conversaciones anteriores, le di un vistazo rápido y no encontré a nadie sobre esto.

    Gracias

  17. Hola, lo he instalado en mi sitio web y está funcionando muy bien. Quiero cambiar el color de fondo de la barra de compartir para que coincida con el color de fondo de mi blog. Lo he intentado en el archivo CSS pero no he tenido éxito. ¿Alguien puede ayudarme a hacerlo? Gracias

    • Muhammad, podrías intentar crear tu propio archivo fsb-sprite.png con un fondo transparente. Este archivo se encuentra en la carpeta de imágenes del tema y actualmente las imágenes de los botones tienen un fondo blanco. Necesitarás un programa de edición de imágenes que admita un lienzo transparente, como Adobe Fireworks.

  18. Hola, estamos teniendo un bucle de redireccionamiento en el botón de Pinterest, todos los demás parecen funcionar bien. ¿Alguna idea de qué podríamos estar haciendo mal?

    • Está funcionando bien en nuestro sitio de prueba. Por favor, intente deshabilitar otros plugins de redes sociales y vea si esto funciona. Si funciona, por favor notifíquenos sobre el plugin que estaba en conflicto.

      Administrador

      • Hola, gracias. ¿El botón de Pinterest en nuestro sitio funciona para usted? – http://digitalvillas.com/portfolio/dvr43-modern-fantasy-villa/

        El único otro plugin social en ese tema es el 'Facebook Social Plugin Widgets', así que hemos agregado el plugin a un nuevo sitio de demostración que estamos creando para probarlo, este sitio usa un tema diferente y no tiene ningún otro plugin de redes sociales, está en el mismo hosting. Obtenemos la misma respuesta del botón de Pinterest.

        En esta página no tiene Pinterest, así que no podemos probarlo, ¿hay algún otro sitio en el que lo tenga que podamos probar por favor?

        Muchas gracias.

  19. ¿Gran información sobre cómo agregar una barra flotante para compartir en redes sociales en WordPress?
    Estaba buscando la información y obtuve la respuesta.

  20. Hola, tengo una pregunta sobre el "me gusta" de Facebook. Cuando abres esto, aparece un cuadro para compartir en Facebook, como se esperaba. Pero si tienes varias páginas de Facebook, ¿cómo puedes dirigir la publicación a una página específica, es decir, a la página personal o a la página de negocios? Este es un tema recurrente con las publicaciones y los "me gusta" de Facebook. ¿Alguna idea?
    Gracias
    Paul

  21. I have a question. Let’s say you enable this new floating social bar, what happens to all those prior posts you have out in the world or in your blog, enabled with jetpack social sharing. Do those social buttons disappear from those posts?

  22. I would like to use the new plugin, BUT

    is it alright to install it on a wordpress site that has been customized with different/unique graphics and “navigational icons” were added to the sub header??? *
    (I had someone do this for me)*

    Any kind of info or help on this would be greatly appreciated!

  23. Hola,

    Gracias wpbeginner por crear un plugin tan increíble. Lo instalé y me di cuenta de que no flotaba, desactivé casi todos los plugins y encontré los culpables al activarlos uno por uno. Dos plugins que entran en conflicto con este son: Facebook TrafficPop™ for WordPress y Wordpress Like Locker; mismo autor de codecanyon.net. ¿Tienen alguna idea de cómo solucionarlo?

  24. Buen plugin

    Una observación: deberías eliminar el fondo blanco del sprite.png para que podamos ajustar el fondo sin tener un borde blanco vergonzoso alrededor de los elementos.

    Por lo demás, nada que decir, gran trabajo

  25. Gracias por este hermoso plugin. Tengo un problema: si activo el plugin, al hacer clic en una publicación, recibo un mensaje de acceso denegado de mi htaccess (protegí el directorio /wp-admin/). Si no ingreso credenciales y hago clic en cancelar, la página y el plugin se cargan y todo parece normal. ¿Tu plugin requiere acceso a la carpeta /wp-admin?

  26. Hello , great work with this plugin and in general
    I have a question .
    Is there a way to add my post rating php code in the bar , so it will float with the social buttons too .
    It will be a nice future :)

  27. ¡Perfecto! Acabo de eliminar un plugin de compartir en redes sociales que me estaba causando serios problemas de rastreo e indexación. Muchas gracias. Las mejores cosas de la vida realmente son gratis. Me complace hacer una donación y estaré revisando sus otros productos y servicios de pago en el futuro... ¡eres genial!

  28. Hola,

    Las instrucciones en esta página dicen:

    "A continuación, agrega tu ID de Twitter en el campo con el siguiente formato: @wpbeginner."

    Las instrucciones en la página de Configuración del plugin dicen:

    "Tu nombre de usuario de Twitter cuando los visitantes retuiteen tus publicaciones (sin el símbolo @)."

    Gracias de antemano por aclarar esto.

    – Greg

  29. Gracias por este plugin. Siempre aprecié que tu barra social no cubriera el texto de la publicación mientras leía en un iPad, mientras que muchos otros plugins sí lo hacen. También aprecio todos tus muchos tutoriales; cuando necesito saber cómo hacer algo con WordPress, tu sitio suele ser el primer sitio que busco, incluso antes de una búsqueda general en Google.

  30. Are there any plans to create an option to disable the number of shares display? For now I’m not activating it because of the big fat zeros. Will activate when there’s an option or I have decent numbers. ;-)

  31. Este plugin es exactamente lo que necesito para mi blog recién lanzado. Desafortunadamente, la fila de 0 acciones es deprimente. ¿Hay alguna idea para hacer que los contadores sean una opción?

  32. Is there a way to customize it so it looks just like the way you have it on here? I installed it, but the font is different, it’s more spaced out between the buttons, and there isn’t the line dividers :)

    • La personalización en este sitio se realiza para que coincida con nuestro diseño. Usamos una fuente llamada Oswald que debe cargarse primero en el diseño antes de que la barra pueda usarla. No tiene sentido cargar una fuente externa que no coincida con el diseño del sitio para miles de usuarios que utilizan este complemento.

      En resumen, si desea hacer eso, puede anular los estilos CSS del complemento.

      Administrador

      • Gracias, chicos. Este es un complemento increíble. ¿Pueden informarnos cómo agregar los divisores de línea como el de su página aquí y cambiar la fuente en CSS? Soy un novato y no sé CSS, pero estoy dispuesto a intentarlo. ¿Qué línea en CSS se debe cambiar para agregar los divisores de línea y cambiar las fuentes?

        Gracias de antemano y gracias por el mejor complemento de redes sociales que existe.

  33. ¿Hay algún lugar donde pueda ver un ejemplo de cómo se ve y cómo funciona?

    He probado todos los demás y ninguno funcionó a nuestra satisfacción. Nos encantaría ver si este es el adecuado para nosotros.

Deja una respuesta

Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO será publicada. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.