Cómo agregar botones para compartir y retuitear de Twitter en WordPress

No hay nada más frustrante que publicar un gran artículo y que reciba poca atención en línea.

A lo largo de los años de crecimiento de WPBeginner, hemos aprendido que cuanto más fácil les resulte a las personas compartir su contenido, más lo harán.

Twitter (X) sigue siendo una de las plataformas más efectivas para difundir su contenido y aumentar su visibilidad.

Es por eso que el equipo de WPBeginner está activo en Twitter y nos aseguramos de que nuestro contenido sea fácil de compartir. En esta guía, te mostraré dos formas sencillas y sin código para agregar botones para compartir y retuitear en Twitter a tu sitio de WordPress para fomentar el intercambio social en tus propias publicaciones. 🤳

¿Por qué agregar botones de compartir y retuitear en Twitter en WordPress?

Según una investigación reciente sobre estadísticas de marketing, Twitter (X) tiene más de 250 millones de usuarios activos mensuales. Eso lo convierte en un excelente lugar para promocionar tu sitio web.

Sin embargo, compartir tu contenido en redes sociales solo llega a los usuarios que ya siguen tu cuenta. Si quieres llegar a una nueva audiencia, necesitas que la gente comparta y retuitee tu contenido.

Esto puede aumentar el tráfico de tu blog al presentar tu marca a personas que quizás no conocían tu sitio web. Volver a publicar tu contenido también es una forma poderosa de prueba social. Cuando alguien comparte una publicación o un tuit con sus seguidores, a menudo se ve como una aprobación.

Dicho esto, veamos qué tan fácil es agregar botones para compartir y retuitear en X en WordPress. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:

• Method 1: Add a Twitter Share Button With Novashare (Straightforward)
  • Paso 1: Instalar y Activar Novashare
  • Paso 2: Crea tu botón para compartir en Twitter
  • Paso 3: Personalizar la apariencia del botón para compartir
• Method 2: Let Users Retweet Your Tweets With Smash Balloon (Feature-Rich Option)
  • Paso 1: Configurar Twitter Feed Pro
  • Paso 2: Crear un feed de Twitter en vivo para WordPress
  • Paso 3: Personaliza tu fuente de Twitter de WordPress
  • Paso 4: Agrega tu feed de Twitter a WordPress
• Descubre más formas de usar Twitter en WordPress

Método 1: Cómo agregar un botón para compartir en Twitter en WordPress con Novashare

En mi experiencia, la forma más fácil de agregar un botón para compartir en Twitter (X) a WordPress es usando el plugin Novashare. Es uno de los mejores plugins de redes sociales para WordPress que te permite agregar todo tipo de botones para compartir a tu sitio. Esto incluye LinkedIn, Facebook y X.

💡 Nota: El equipo de WPBeginner realizó una investigación exhaustiva sobre este plugin y puede encontrar toda la información en nuestra completa reseña de Novashare.

A diferencia de otros plugins voluminosos, Novashare está enfocado en el rendimiento y funciona muy bien con muchos temas populares de WordPress. Esto lo hace perfecto para propietarios de sitios que se preocupan por la velocidad de página, el estilo y la simplicidad.

Paso 1: Instalar y Activar Novashare

El primer paso es instalar y activar el plugin.

Necesitará comprar el plugin Novashare en el sitio web oficial de Novashare.

Después de eso, simplemente puede seguir el proceso de pago para llegar a su panel de Novashare.

Luego, verá la confirmación de su compra, donde puede encontrar la clave de licencia de Novashare, así como el archivo .zip.

Simplemente descargue el archivo, copie su clave de licencia y guárdela en un lugar seguro.

A continuación, en su área de administración de WordPress, vaya a Plugins » Añadir nuevo para instalar el plugin.

Puedes subir el archivo .zip de Novashare y hacer clic en ‘Instalar ahora’ para iniciar el proceso, seguido de ‘Activar’. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Al activar, querrás activar tu clave de licencia. Puedes hacerlo yendo a Ajustes » Novashare.

En la siguiente pantalla, puedes hacer clic en ‘Licencia’.

Después de eso, simplemente ingresa tu clave en el campo y haz clic en ‘Guardar licencia’.

Con eso hecho, estás listo para crear tu botón para compartir en Twitter con Novashare.

Paso 2: Crea tu botón para compartir en Twitter

Para crear botones para compartir en redes sociales en Novashare, puedes trabajar en el submenú ‘Contenido en línea’ o ‘Barra flotante’.

¿Te preguntas qué significa eso? Aquí están las principales diferencias:

• Contenido en línea: Por defecto, estos usan el tamaño mediano y muestran el botón en la parte superior o inferior (o ambos), dependiendo de lo que elijas. También puedes colocarlos en cualquier lugar de tu página usando un bloque o shortcode.

• Barra flotante: Estos aparecen en el lado izquierdo de la pantalla en escritorio y se fijan en la parte inferior en móvil. Usan el tamaño de botón pequeño por defecto, pero la ubicación puede cambiar un poco dependiendo del tamaño de tu pantalla.

Para esta guía, usaré el estilo ‘Contenido en línea’, así que cambiaré el interruptor para habilitarlo.

Alternativamente, puedes ir a la pestaña Barra flotante y habilitarla.

Una vez que hayas activado tu botón para compartir preferido, busca la sección ‘Redes sociales’ debajo de él. Aquí, haz clic en el icono de X para seleccionarlo.

¡Eso es todo! Pero antes de guardar esta configuración, querrás personalizar tu botón para compartir en Twitter.

Paso 3: Personalizar la apariencia del botón para compartir

Si te desplazas hacia abajo en la pestaña ‘Contenido en línea’, encontrarás varias opciones para personalizar cómo se ve tu botón para compartir de Twitter (X) y dónde aparece en tu sitio.

En la sección ‘Mostrar’, puedes elegir qué tipos de publicación mostrarán el botón para compartir de Twitter. Simplemente marca las casillas que desees. Por ejemplo, para este tutorial, lo habilitaré para ‘Entradas’.

A continuación, puedes decidir dónde aparece el botón: arriba del contenido, abajo del contenido o arriba y abajo del contenido.

La función ‘Mostrar en Feeds’ te permite mostrar botones también dentro de los feeds RSS.

Luego, ‘Punto de interrupción móvil’ establece cuándo se activa el estilo móvil, por ejemplo, 1200px. Mientras tanto, la configuración ‘Ocultar punto de interrupción arriba/abajo’ controla la visibilidad del botón según el tamaño de la pantalla.

Más abajo en la página, encontrarás la subsección ‘Diseño’. Esto es lo que puedes personalizar:

• Estilo del botón: Sólido, Inverso, Etiqueta con borde, Botón con borde, Etiqueta mínima, Mínimo
• Diseño del botón: Ancho automático, 1-6 columna(s)
• Alineación del botón: Izquierda, Derecha, Centro
• Tamaño del botón: Pequeño, Mediano, Grande
• Forma del botón: Cuadrado, Redondeado, Circular

Después de eso, es posible que desees cambiar el color del botón. Si es así, simplemente mueve la herramienta de selección de color para elegir un color.

Para este tutorial, he habilitado la función ‘Invertir al pasar el cursor’ para que el botón se sienta más interactivo. Esto agrega un efecto al pasar el cursor, donde los colores del botón se invierten cuando alguien pasa el cursor sobre él, lo que le da a los usuarios una señal visual de que es clicable.

Para hacerlo aún más interesante, puedes elegir el color del botón al pasar el cursor usando la herramienta de selección de color. También hay configuraciones para ajustar el margen del botón y la visualización de la etiqueta.

Justo debajo de la subsección ‘Diseño’, encontrarás ‘Contadores de compartidos’.

Aquí, puedes mostrar el número total de compartidos en todas las redes. Y luego, podrías querer cambiar dónde aparece, como antes o después de los botones. También puedes ajustar el color para que coincida con tu sitio de WordPress.

¿Quieres mostrar también los compartidos por plataforma? Siéntete libre de habilitar 'Recuentos de compartidos por red'.

Dicho esto, ten en cuenta que algunas plataformas de redes sociales ya no admiten datos de recuento de compartidos. Por lo tanto, es posible que no muestren un número.

Por último, encontrarás la subsección de 'Llamada a la acción'.

Te permite agregar una etiqueta de texto corta para guiar a los lectores sobre lo que hace el botón, como “Comparte esta publicación” o “Tuitea ahora”.

También puedes personalizar el tamaño y el color de la fuente para que coincidan con el estilo de tu sitio.

Después de hacer tus ajustes, puedes hacer clic en el botón 'Guardar cambios'.

¡Y eso es todo! Novashare mostrará inmediatamente el botón de compartir de Twitter (X) en tus publicaciones. Aquí tienes un ejemplo de mi sitio web de prueba:

Método 2: Cómo permitir que los usuarios retuiteen tus tuits en WordPress con Smash Balloon

Si quieres agregar un botón de compartir simple a una página o publicación, Novashare es una buena opción. Sin embargo, también podrías querer animar a los visitantes a retuitear tus tuits recientes. Esto puede generar más interacción y difundir tu contenido aún más.

La mejor manera de obtener más retuits es usando Smash Balloon Twitter Feed Pro. Este plugin de feed de Twitter te permite agregar tu feed completo de Twitter (X) a cualquier página, publicación o área lista para widgets.

💡 Nota: Para obtener más información sobre el plugin, consulta la reseña completa de Smash Balloon del equipo de WPBeginner.

Cada tuit tiene su propio menú para acciones de Twitter.

Esto significa que los visitantes pueden simplemente republicar un tuit haciendo clic en su botón de 'retuitear'.

Aún mejor, el feed se actualiza automáticamente, por lo que siempre hay tuits nuevos para que los visitantes interactúen. Esto puede ayudar a mantener tu sitio fresco e interesante, incluso para los visitantes frecuentes.

Paso 1: Configurar Twitter Feed Pro

Primero, necesitarás crear una cuenta de SmashBalloon en su sitio web. Simplemente haz clic en el botón 'Comenzar', elige un plan y sigue las instrucciones en pantalla para completar el proceso.

Al completar el registro, obtendrás tu propio panel de Smash Balloon y una clave de licencia. Desde aquí, puedes mantener la pestaña abierta o copiar tu clave de licencia en un lugar seguro. La necesitarás en breve.

Con eso hecho, es hora de instalar y activar Smash Balloon’s Twitter Feed Pro.

Desde tu panel de administración de WordPress, vamos a Plugins » Añadir Nuevo Plugin.

En la siguiente pantalla, usemos la barra de búsqueda para encontrar rápidamente el plugin Smash Balloon Twitter Feed.

En el resultado de la búsqueda, haz clic en 'Instalar ahora' y luego en 'Activar'.

Si necesitas ayuda, consulta la guía de WPBeginner sobre cómo instalar un plugin de WordPress.

Después de haber instalado el plugin, dirígete a Twitter Feed » Settings. Ahora puedes ingresar tu clave de licencia de Smash Balloon en el campo 'License Key'.

Puedes encontrar esta información en el correo electrónico de confirmación que recibiste al comprar Smash Balloon y en tu cuenta de Smash Balloon.

Después de agregar tu clave de licencia, haz clic en el botón 'Activate'.

Paso 2: Crear un feed de Twitter en vivo para WordPress

Una vez que hayas hecho eso, estarás listo para crear un feed personalizado de Twitter. Para empezar, ve a Twitter Feed » All Feeds y luego haz clic en el botón ‘Add New’.

Si esta es la primera vez que agregas un feed de Twitter con Smash Balloon, se te pedirá que verifiques tu dirección de correo electrónico.

Simplemente haz clic en el botón ‘Connect’ para hacerlo y sigue las instrucciones en pantalla.

Una vez hecho esto, regresarás a la página del plugin. Smash Balloon ahora mostrará todos los diferentes tipos de feeds de Twitter que puedes crear.

Como quieres más retweets, simplemente selecciona ‘User Timeline’ y haz clic en ‘Next.’

En la siguiente pantalla, debes escribir el símbolo @ seguido del nombre de tu cuenta de Twitter (X).

Cuando estés listo, haz clic en ‘Next’ para abrir el editor principal de Smash Balloon.

A continuación, puedes elegir la plantilla que deseas usar en tu feed de Twitter.

Por ejemplo, podrías mostrar tus tuits en un carrusel adaptable seleccionando 'Carrusel simple'. Si solo quieres promocionar tu tuit más reciente, entonces puedes seleccionar la plantilla 'Último tuit' en su lugar.

Usaré la plantilla 'Predeterminada' para este tutorial, pero puedes elegir la que quieras.

Después de tomar tu decisión, haz clic en 'Siguiente'.

Smash Balloon ahora mostrará una vista previa de la fuente de redes sociales, lista para que la personalices.

Paso 3: Personaliza tu fuente de Twitter de WordPress

¿No estás contento con cómo se ve la plantilla? Para cambiarla, simplemente selecciona 'Plantilla' en el menú de la izquierda.

Luego puedes hacer clic en el botón 'Cambiar'.

Esto abre una ventana emergente donde puedes elegir un nuevo diseño.

Simplemente selecciona una nueva plantilla y luego haz clic en 'Actualizar'.

Hecho esto, necesitas hacer clic en el enlace 'Personalizar'.

Esto te llevará de regreso a la configuración principal de Smash Balloon.

La siguiente opción en el menú de la izquierda es 'Diseño de la fuente', así que haz clic en ella.

Aquí, puedes cambiar la altura de la fuente de Twitter y el número de tuits que el visitante ve inicialmente. También puedes alternar entre un diseño de Cuadrícula, Mampostería o Carrusel.

A medida que realices cambios, la vista previa se actualizará automáticamente, para que puedas probar diferentes configuraciones y ver qué se ve mejor.

Dependiendo del diseño que estés utilizando, es posible que puedas cambiar cuántas columnas muestra Smash Balloon en dispositivos de escritorio, tabletas y móviles.

Los smartphones y las tabletas suelen tener pantallas más pequeñas y menos potencia de procesamiento, por lo que es posible que desees mostrar menos columnas en los dispositivos móviles. Esto puede ayudarte a mantener tu sitio amigable para móviles.

Para personalizar esto según el dispositivo, simplemente usa los menús desplegables en la sección ‘Columnas’.

Cuando estés satisfecho con la configuración del diseño del feed, haz clic en el enlace ‘Personalizar’ nuevamente para regresar a la pantalla principal de configuración.

Aquí, puedes hacer clic en ‘Esquema de color’.

Por defecto, Smash Balloon utiliza los colores heredados de tu tema de WordPress, pero puedes cambiar a un esquema de color ‘Claro’ o ‘Oscuro‘ en su lugar.

Otra opción es crear tu propio esquema de color seleccionando ‘Personalizado’ y luego usando los controles para cambiar el color de fondo, el color del texto y más.

Cuando estés satisfecho con tus cambios, haz clic en el enlace ‘Personalizar’ una vez más. De vuelta en la pantalla principal de configuración, necesitas hacer clic en ‘Encabezado’.

Por defecto, Smash Balloon agrega un encabezado ‘Estándar’ al feed, que muestra un botón de ‘Seguir’ y tu biografía de Twitter, si está disponible.

Si deseas ocultar la biografía de Twitter, haz clic para desactivar el interruptor ‘Mostrar biografía’.

Otra opción es seleccionar 'Texto', que agrega un encabezado 'Estamos en Twitter' a la fuente.

Puedes reemplazar esto con tu propio mensaje escribiéndolo en el cuadro ‘Texto’.

Cuando estés satisfecho con los mensajes, puedes cambiar el tamaño y el color del encabezado.

Después de eso, regresa a la pantalla principal de configuración de Smash Balloon y selecciona ‘Tweets’. Aquí, puedes elegir entre ‘Estilo de Tweet’ y ‘Editar elementos individuales’.

Si seleccionas 'Estilo de Tuit', entonces puedes elegir entre diseños en caja y regulares.

Si eliges ‘Enmarcado’, entonces puedes crear un fondo de color para cada tweet. También puedes hacer que el radio del borde sea más grande para crear esquinas curvas o agregar una sombra de caja.

Si eliges ‘Normal’, entonces puedes cambiar el grosor y el color de la línea que separa tus diferentes publicaciones de redes sociales.

Cuando estés satisfecho con tus cambios, simplemente haz clic en ‘Tweets’.

Esto te regresa a la pantalla anterior.

Esta vez, puedes hacer clic en ‘Editar elementos individuales’.

Ahora verá todo el contenido que Twitter Feed Pro incluye en cada tuit, como el autor, el texto del tuit, el logo de Twitter y más.

Para obtener la mayor cantidad de retuits posible, es una buena idea hacer que el ícono de retuit destaque. Para hacer esto, haga clic en la flecha junto a ‘Acciones del tuit’.

Aquí, puede hacer que las acciones del tuit sean más grandes usando el menú desplegable ‘Tamaño’ y cambiar el color.

Solo tenga en cuenta que Smash Balloon aplicará estos cambios a todas las acciones del tuit y no solo al ícono de ‘retuit’.

Cuando esté satisfecho con la apariencia de las acciones del tuit, simplemente haga clic en el texto ‘Elementos’.

Esto lo llevará de regreso a la pantalla anterior.

Simplemente repita este proceso para personalizar cualquiera de los otros elementos individuales.

También puede ocultar un elemento desmarcando su casilla.

Ocultar contenido innecesario es otro truco que puede ayudar a que la acción de retuit destaque.

Cuando esté satisfecho con la apariencia de los tuits, puede regresar a la pantalla principal de configuración de Smash Balloon y seleccionar ‘Botón Cargar más’.

Dado que es un botón tan importante, es posible que desees personalizarlo cambiando su color de fondo, estado al pasar el cursor, etiqueta y más para que coincida con el diseño de tu sitio.

También puede reemplazar el texto predeterminado de ‘Cargar más’ con su propio mensaje escribiéndolo en el campo ‘Texto’.

Otra opción es habilitar un desplazamiento infinito para que los nuevos tuits aparezcan automáticamente cuando los visitantes lleguen al final del feed. Esto anima a los visitantes a explorar más de sus tuits y puede conseguirle algunos retuits adicionales.

Para habilitar esta función, simplemente haga clic en el control deslizante ‘Desplazamiento infinito’ para que cambie de gris (deshabilitado) a azul (habilitado).

También puede cambiar la ‘Distancia de activación’, que le dice a Smash Balloon cuándo cargar nuevos tuits. Sin embargo, la configuración predeterminada debería funcionar bien para la mayoría de los sitios web de WordPress.

Después de eso, la última opción en la pantalla principal de configuración de Smash Balloon es ‘Lightbox’.

Por defecto, Twitter Feed Pro permite a los visitantes desplazarse por las imágenes y videos del feed en una ventana emergente tipo lightbox.

Esto puede generar algunos retweets adicionales, ya que los visitantes pueden ver de cerca las imágenes del feed y ver tus videos sin salir del sitio web.

Teniendo esto en cuenta, recomiendo dejar activada la lightbox.

Sin embargo, si deseas desactivar esta función, simplemente haz clic en el interruptor azul ‘Enable’ para que se ponga gris.

Cuando estés satisfecho con la apariencia del feed de Twitter, no olvides hacer clic en ‘Save’. Después de eso, estarás listo para incrustar el feed de Twitter y los botones de retweet en tu sitio web de WordPress.

Paso 4: Agrega tu feed de Twitter a WordPress

Puedes agregar el feed de Twitter a tu sitio web usando un shortcode o el bloque de Feed de Twitter. Dado que es el método más fácil, veamos primero cómo puedes agregar el feed a cualquier página o publicación usando el bloque Smash Balloon.

Si has creado más de un feed, entonces necesitarás encontrar el código del feed que deseas incrustar.

Para obtener esta información, ve a Twitter Feeds » All Feeds y copia el código en la columna ‘Shortcode’. Necesitarás agregar este código a tu sitio, así que anótalo.

En la siguiente imagen, necesitarás usar [custom-twitter-feeds feed=2]

Después de eso, simplemente abre la página o publicación donde deseas incrustar el feed de Twitter. Luego, haz clic en el ícono ‘+’ para agregar un nuevo bloque y comienza a escribir ‘Twitter Feed’.

Cuando aparezca el bloque correcto, haz clic para agregarlo a la entrada del blog.

El bloque mostrará uno de tus feeds de Twitter por defecto. Si deseas usar un feed diferente, busca ‘Shortcode Settings’ en el menú del lado derecho.

Aquí, simplemente agrega el shortcode y luego haz clic en ‘Aplicar Cambios’.

El bloque ahora mostrará tu feed de Twitter, y simplemente puedes publicar o actualizar la publicación para que esté en vivo en tu sitio web.

Otra opción es agregar el feed a cualquier área lista para widgets o elemento de diseño en todo el sitio, como la barra lateral. Esto permite a los visitantes retuitear tus últimas publicaciones desde cualquier página de tu sitio web.

Si estás usando un tema de bloques, puedes agregar el bloque de Feed de Twitter directamente a una de tus Plantillas o Partes de Plantilla en el Editor de Sitio Completo, usando el mismo enfoque que mostré para una página o publicación.

Para obtener instrucciones detalladas sobre cómo hacer esto, consulta nuestra guía para principiantes sobre la edición completa del sitio en WordPress.

Si no estás utilizando un tema de bloques, deberás ir a Apariencia » Widgets en el panel de WordPress y luego hacer clic en el botón azul '+'.

Una vez que hayas hecho eso, necesitas escribir 'Twitter Feed' para encontrar el widget correcto.

Luego, simplemente arrástralo al área donde deseas mostrar el feed y los botones de retuiteo.

El widget mostrará uno de los feeds que creaste usando Smash Balloon.

Para mostrar un feed de Twitter diferente en su lugar, escribe el código del feed en el cuadro 'Configuración de shortcode' y luego haz clic en 'Aplicar cambios'.

Ahora puedes hacer clic en el botón ‘Actualizar’ para que el widget esté en vivo. Para más información, por favor consulta nuestra guía paso a paso sobre cómo agregar y usar widgets en WordPress.

Finalmente, puedes incrustar el feed y los botones de retuiteo en cualquier página, publicación o área lista para widgets usando un shortcode.

Simplemente ve a Twitter Feed » Todos los Feeds y copia el código en la columna 'Shortcode'. Ahora puedes agregar el shortcode a cualquier área lista para widgets en tu sitio.

Para más información, por favor consulta nuestra guía detallada sobre cómo agregar un shortcode en WordPress.

Descubre más formas de usar Twitter en WordPress

Espero que este artículo te haya ayudado a agregar botones para compartir y retuitear en Twitter en WordPress.

¿Quieres sacar el máximo provecho de tu perfil de Twitter (X) para promocionar tu sitio web de WordPress? ¿O quizás quieres agregar más contenido de Twitter a tu sitio?

Consulta estas guías a continuación:

• Guía para principiantes sobre cómo agregar tarjetas de Twitter en WordPress
• Cómo Arreglar Imágenes Rotas de Tarjetas de Twitter en WordPress
• Cómo Promocionar tu Página de Twitter en WordPress con una Ventana Emergente
• Cómo mostrar el recuento de seguidores de Twitter y más en WordPress
• Cómo Agregar un Botón de Pagar con un Tweet para Descargas de Archivos en WordPress

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.