Añadir una barra flotante para compartir en redes sociales puede mejorar mucho la visibilidad de su contenido y animar a los lectores a promocionarlo en los medios sociales. Una barra flotante acompaña al usuario en su desplazamiento, lo que facilita compartir el contenido en cualquier momento.
Al gestionar nuestros propios sitios, hemos comprobado el efecto de las barras flotantes de participación en redes sociales a la hora de impulsar la participación y aumentar el tráfico. Al añadir estratégicamente esta característica a nuestros sitios web, hemos observado un notable aumento de las comparticiones sociales y un mayor alcance de nuestros contenidos.
Tanto si tiene un blog como una empresa, añadir una barra flotante para compartir en redes sociales puede ser una forma sencilla de fomentar la participación y ampliar su presencia en Internet.
En este artículo, le guiaremos a través del proceso de añadir una barra flotante para compartir en redes sociales a su sitio WordPress. Nuestras instrucciones paso a paso hacen que sea sencillo incluso para los principiantes.
¿Por qué añadir una barra flotante para compartir en redes sociales en WordPress?
Añadir una barra para compartir en redes sociales facilita a los visitantes compartir su contenido en plataformas de medios sociales como Instagram, Facebook y Twitter. Al mantener esta barra visible mientras se desplaza por la página, ofrece a los usuarios una forma cómoda de compartir su contenido en cualquier momento.
Esto puede aumentar la participació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.
Además, una barra flotante para compartir en redes sociales puede mejorar indirectamente la clasificación de su sitio web al aumentar las señales sociales. Cuando los usuarios comparten su contenido en los medios sociales, se generan vínculos de retroceso a su sitio web, lo que puede influir positivamente en su posicionamiento en los motores de búsqueda.
Dicho esto, echemos un vistazo a cómo añadir fácilmente una barra flotante para compartir en redes sociales en WordPress. En este tutorial, vamos a discutir un método de código y plugin. Puede utilizar los siguientes enlaces para saltar al método de su elección:
Método 1: Añadir una barra flotante para compartir en redes sociales con WPCode
Si usted está buscando una manera personalizable y fácil de añadir una barra de compartir social flotante en WordPress, entonces este método es para usted.
Para este enfoque, vamos a utilizar WPCode porque es el mejor plugin de fragmentos de código de WordPress en el mercado. Para más información sobre esta herramienta, comprueba nuestra reseña completa de WPCode.
WPCode cuenta con una amplia biblioteca de fragmentos de código prediseñados, incluida una solución lista para usar para añadir una barra flotante para compartir en redes sociales. Esto elimina la necesidad de código personalizado y hace que sea fácil de implementar esta característica en su 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á el plan pro del plugin.
Una vez activado, diríjase a la página Fragmentos de código ” + Añadir fragmento desde el escritorio de WordPress y utilice el cuadro de búsqueda para localizar el fragmento “Iconos flotantes de medios sociales”.
Una vez hecho esto, basta con hacer clic en el botón “Usar fragmento de código” situado debajo.
Se abrirá la página “Editar fragmento de código” en su pantalla. Observará que el fragmento de código de la barra flotante para compartir en redes sociales, con enlaces a Facebook, Instagram, Twitter y LinkedIn, ya se ha añadido al cuadro “Vista previa del código”.
Ahora puede utilizar el fragmento de código tal cual o desplazarse hacia abajo y cambiar la posición, el margen, la anchura, el color de fondo, la altura y el radio del borde de los iconos.
Por ejemplo, el color de fondo de estos iconos de medios sociales es negro por defecto. Sin embargo, puedes sustituirlo por el código hexadecimal de un color que encaje mejor con tu marca.
A continuación, desplázate hasta la parte superior y activa el conmutador “Inactivo”.
A continuación, haz clic en el botón “Actualizar” para guardar tus ajustes y añadir una barra flotante para compartir en redes sociales.
Ahora puede visitar su sitio web para ver los iconos de los medios sociales en acción.
Así se ve en nuestro sitio web de demostración.
Método 2: Añadir una barra flotante para compartir en redes sociales con un plugin
Si no desea utilizar código personalizado en su sitio web, entonces este método es para usted. Dicho esto, tenga en cuenta que no tendrá tantas opciones de personalización con este método.
En primer lugar, debes instalar y activar el plugin Floating Social Share Icons. Para más detalles, consulte nuestro tutorial sobre cómo instalar un plugin de WordPress.
Una vez activado, visita la página Enlaces flotantes e iconos sociales desde el escritorio de WordPress. Por defecto, el plugin añadirá automáticamente iconos flotantes que permiten a los usuarios visitar la página de inicio, la siguiente entrada, la entrada anterior, la parte superior de la página y la parte inferior de la página y copiar la URL actual.
Sin embargo, si no necesitas ninguna de estas funciones, puedes desactivar el conmutador de estas opciones. Una vez hecho esto, los cambios se sincronizarán automáticamente.
A continuación, diríjase a la página Enlaces flotantes e iconos sociales ” Iconos sociales desde la barra lateral de administración.
Para personalizar su barra flotante de redes sociales, sólo tiene que conmutar el interruptor situado junto a la plataforma de medios sociales que desee. Esto hará que los iconos correspondientes aparezcan en su barra, permitiendo a los visitantes compartir fácilmente su contenido.
Tus ajustes se guardarán automáticamente en cuanto realices los cambios.
A continuación, puede visitar su sitio de WordPress para ver la barra flotante para compartir en redes sociales en acción.
Bonificación: Añadir una barra social flotante en WordPress
Si lo desea, también puede añadir una barra social flotante con botones de seguimiento en WordPress.
Esto permite a los visitantes conectarse fácilmente con sus perfiles en los medios sociales y mantenerse actualizados sobre sus últimas noticias y eventos. Si facilita a los usuarios seguirle en los medios sociales, podrá ampliar su alcance y fomentar una comunidad dedicada.
Para ello, necesitará OptinMonster, que es la mejor herramienta de generación de clientes potenciales del mercado. Además, viene con una plantilla prediseñada para crear una barra social flotante.
En primer lugar, visite el sitio web de OptinMonster y acceda a una cuenta. Recuerde que tendrá que adquirir el plan Básico porque incluye el tipo de campaña Barra Flotante.
A continuación, dirígete a tu escritorio 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.
Una vez activado, verá la pantalla de bienvenida y el asistente de configuración. Sigue adelante y haz clic en el botón “Conectar tu cuenta existente”.
A continuación, puede seguir las indicaciones en pantalla para conectar su cuenta de OptinMonster con WordPress.
Una vez hecho esto, diríjase a la página “Plantillas” de OptinMonster desde el escritorio de WordPress y seleccione “Barra flotante” como tipo de campaña.
A continuación, haz clic en el botón “Usar plantilla” de la plantilla “Seguir en medios sociales”. Se abrirá una indicación en la que deberá añadir un nombre para la campaña que está a punto de crear.
El maquetador de arrastrar y soltar de OptinMonster se iniciará ahora en su pantalla.
Aquí es donde puede diseñar su barra flotante.
El plugin ofrece diferentes bloques que puedes arrastrar y soltar en la plantilla. Por ejemplo, puedes añadir una imagen, un texto, un botón y mucho más a tu barra de medios sociales.
Para obtener más información, consulte nuestro tutorial sobre cómo añadir una barra de alertas en WordPress.
A continuación, haz clic en los botones de seguimiento de medios sociales de la barra flotante. Se abrirán nuevos ajustes en la columna de la izquierda.
Aquí puedes añadir la URL de tus páginas de Facebook, Instagram y Twitter.
Una vez que haya terminado, cambie a la pestaña “Publicar” de la parte superior y cambie el estado de la campaña a “Publicar”. A continuación, tendrás que hacer clic en el botón “Guardar” y cerrar el maquetador visual.
Ahora puede visitar su sitio WordPress para ver la barra social flotante en acción.
Esperamos que este artículo le haya ayudado a aprender cómo añadir una barra flotante para compartir en redes sociales en WordPress. También puede consultar nuestra guía para principiantes sobre cómo añadir botones para compartir en redes sociales en WordPress y nuestra selección de los mejores plugins de medios sociales para hacer crecer su sitio.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
zak
What social media plugin do you use on this site? Because it looks different from you floating social share bar?
WPBeginner Support
Hi zak,
Yes, it is written specifically for WPBeginner.
Administrador
Stephanie
How do you add the sharing buttons to the bottom of the post instead of the top?
Thanks
Ralph Eastwood
I’ve just installed the plugin. Looks nice. Is there a way to have to bar at the bottom of the post? It seems better sense to have it there. People are going to share a post once they’ve read it and think there’s value – I don’t want to rely on them scrolling all the way back to the top just to share!
Laura
I have installed, activated and added Facebook to the ‘enabled social services’ box. I don’t have a Twitter user account so left that part blank. I saved the settings but the Facebook tab does not appear on my website! Did I miss something? Thanks
sham
My social count is back to zero after migrate to HTTPS. How to fix this?
Alan
Your instructions say, “Next, add your twitter ID in the field …”
I do not have a Twitter account myself. Can I not use this plugin without joining Twitter? (I am on Facebook and LinkedIn.)
Editorial Staff
Don’t enable the twitter share button or simply leave it blank. It allows you to get more followers if you enter the twitter ID there.
Administrador
Siska
I would like to use this pluging, but i can´t find a way to change the bakground colour…Mi web it´s not white.
Siska
I would like to use this pluging, but i can´t find a way to change the bakground colour…Mi web it´s not white
WPBeginner Support
Try adding this in your theme’s stylesheet:
#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
Thanks for this! How would you go about to tracking the shares as a goal in Google Analytics?
Elisa
Error when pressing the button google +1. I get a red triangle and not resolve it.
Help !!!
Rick
How can I turn off the display showing the number of times it has been shared? I do not want the count of shares to be shown.
Rebecca
Hi, nice plugin. I’m having an issue though, when I use the “pin it” button, it crops the photo. How can I avoid that?
Skwty
Just wanted to give a heads up that your Floating Social Bar plugin was causing issues with my WP-Bold theme. It would remove the excerpt from the widget that I used to display related content in the sidebar. The title was there, but only on the single.php would the excerpt disappear. Solostream support mentioned that I should say something. I switched to another plugin because of it, but would much rather use the Floating Social Bar.
Thanks!
Zomi Daily
Can you please include Facebook Share button, please?
Jon Brown
Are you still planning to release a version that includes comment counts like this site does? Even if not ready for release is that code public?
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
Great plugin, but unfortunately it consumes lots of resources. P3 plugin shows that it consumes 51% of all my plugins (I have 12 plugins).
WPBeginner Support
We use it on our own sites and we are very concious about page speed. As for P3 plugin, the test results can be affected by many factors such as other services running on your server, if you are on a shared server, this will also affect results.
Administrador
Urmet
Great plugin – I would like to know one thing – can I have it this way that the counter loads immediately – like you have it on your own page – sharing numbers are visible even if I am not hovering over the plugin.
Haider
Great Plugin Indeed!
I finally activated and modified it a little to suit my theme
I have a few queries:
1. Do you plan to include the new facebook share button along with the like button ? Please consider this.
2. Won’t it be better to handle styling with a separate CSS file rather than inline CSS ? A lot of premium themes have option for custom CSS which is added to the header; but that doesn’t work in this case. I had to modify the plugin file to change the styles.
Thank you so much for such an awesome product!
Jenn Marie
Hi there! From one high-quality person to another: I see you. This plugin rocks, and I suspect it’s due to the meticulousness I see on all your stuff!
One question: any idea why the bar is not sticky for me on iPhone (iOS7)? I’m using Point, a responsive theme. Have tried disabling other social plugins.