Cómo incrustar tweets/publicaciones de X en tu sitio web (para principiantes)
Inicio Blog Cómo incrustar tweets/publicaciones de X en tu sitio web (para principiantes)

Cómo incrustar tweets/publicaciones de X en tu sitio web (para principiantes)

Cómo incrustar Tweets en su sitio web

¿Está pensando en incluir tweets en su sitio web WordPress pero no sabe por dónde empezar?

Incrustar tweets o publicaciones de X te permite mostrar conversaciones reales, compartir testimonios y mantener el contenido de tu sitio web actualizado y atractivo.

También es una forma eficaz de conectar con tu público y animar a más seguidores en X (Twitter).

Cuando probé por primera vez a añadir tuits a mi sitio web, me pareció que las herramientas de incrustación estándar de X podían resultar confusas. Especialmente si estás empezando.

En Smash Balloon, hemos ayudado a millones de usuarios de WordPress a mostrar sin problemas los feeds de las redes sociales, facilitando así que cualquiera pueda añadir contenido de Twitter a su sitio web.

En este artículo, te guiaré a través de un proceso fácil para principiantes para incrustar tweets en tu sitio.

Lo mejor de todo es que aprenderás a incrustar tweets en tu sitio web en unos sencillos pasos, incluso si no eres un experto en tecnología.

En este artículo

¿Por qué incrustar Tweets en su sitio web?

X (Twitter) es una de las plataformas de redes sociales más grandes que existen y un lugar popular para las marcas que desean promocionar su negocio.

Con más de 237 millones de usuarios de X, allí podrás encontrar montones de clientes potenciales para tu negocio.

Pero hay tantos profesionales del marketing que ya utilizan X cada día que puede resultar difícil aumentar tu propio número de seguidores.

¿La solución? Puedes añadir contenido de redes sociales de X a tu sitio web y convertir el tráfico del sitio en interacciones y seguidores.

Además de aumentar tu presencia en las redes sociales, aquí tienes otras formas en las que incrustar tweets puede ayudar a tu marca:

Como puedes ver, puedes aumentar fácilmente tus seguidores en Twitter, llegar a más clientes, impulsar tus ventas, hacer crecer tu marca y ganar dinero con Twitter.

Dicho esto, veamos cómo puedes empezar a integrar Twitter en tu sitio web.

2 maneras de incrustar un tweet en su sitio web WordPress

Si desea incrustar tweets en su sitio web WordPress, hay 2 maneras de hacerlo:

  • Manual: Generar un código de inserción de Twitter para los tweets, modificar ese código y luego insertarlo manualmente en su sitio web.
  • Automático: Utiliza un plugin de WordPress que pueda incrustar automáticamente el contenido de Twitter por ti

Si optas por el primer método, tendrás que lidiar con un montón de complejos códigos HTML. Además, puede llevar mucho más tiempo incrustar feeds de Twitter de forma manual.

Y si algo sale mal mientras insertas ese código en tu sitio, no tendrás un equipo de soporte que te ayude.

En definitiva, la forma manual puede ser un reto para muchos usuarios.

¿Cuál es la forma más fácil de incrustar tuits en tu sitio web?

Por otro lado, si optas por la opción automática, puedes utilizar simplemente un complemento de Twitter para incrustar todos los tuits con facilidad, sin necesidad de programar.

Y el mejor complemento de Twitter que puedes utilizar es Smash Balloon Twitter Feed Pro.

smash balloon twitter feed pro página de inicio

Este plugin viene con un sencillo flujo guiado de 3 pasos que te llevará a través de todo el proceso de creación, personalización e incrustación de feeds de contenido de Twitter en tu sitio web.

Además, dispones de un montón de opciones en cuanto al tipo de contenido de Twitter que deseas incrustar.

Puede mostrar los tweets de un perfil específico, mostrar los resultados de búsqueda de Twitter, mostrar los hashtags de Twitter que haya elegido, incrustar sus menciones de Twitter, mostrar sus retweets y mucho más.

Además de entradas de texto y fotos, puedes incrustar un vídeo de Twitter en tu sitio web utilizando este plugin y mantener a tus visitantes enganchados durante mucho más tiempo.

Twitter Feed Pro también le da un control total sobre cómo aparecen los tweets en su sitio web.

Puedes optar por importar una bonita plantilla y luego utilizar un personalizador de feeds en vivo para cambiar el diseño de tu feed de Twitter con unos simples clics.

editor de noticias en directo para twitter

Como se puede ver, Twitter Feed Pro es la opción # 1 si desea agregar tweets a su sitio web con facilidad. También me gusta el hecho de que puedo utilizar este plugin de Twitter para incrustar tweets en mi sitio web Divi.

Con todas estas increíbles funciones, el plugin tiene una puntuación de 4,9/5 estrellas de más de 150.000 usuarios activos.

opiniones de usuarios custom twitter feeds pro

Ahora, vamos a ver cómo se puede utilizar este plugin para incrustar contenido de Twitter en su sitio web en unos pocos clics.

¿Listo para añadir tus tweets a tu sitio web, aunque no seas un experto en tecnología?

Empieza a utilizar Twitter Feed Pro hoy mismo.

Cómo incrustar tweets en su sitio web (de forma sencilla)

Para empezar a incrustar tweets en su sitio web con facilidad, sólo tiene que seguir las instrucciones paso a paso que se indican a continuación.

Paso 1: Instalar y activar Smash Balloon Twitter Feed Pro

En primer lugar, vaya y obtenga su copia del plugin Twitter Feed Pro desde aquí. A continuación, sólo tiene que instalar y activar el plugin en su sitio web.

Si no está seguro de cómo hacerlo, consulte esta guía paso a paso sobre cómo instalar plugins de WordPress

Con eso, puedes ir al paso 2 y empezar a usar el plugin para crear feeds de Twitter.

Paso 2: Crear un nuevo feed de Twitter

Utilizando un feed de Twitter, puede empezar a mostrar tweets en su sitio web con facilidad.

Para crear tu feed, navega hasta el menú Twitter Feed " Todos los feeds desde tu panel de administración y haz clic en Añadir nuevo.

añadir nuevo feed personalizado de twitter

A continuación, puede utilizar Twitter Feed Pro para elegir qué tipo de feed de Twitter desea mostrar en su sitio web. Hay 6 opciones entre las que puedes elegir:

  • Cronología de usuarios: Elige una cuenta de Twitter y muestra los tweets realizados por ese usuario
  • Hashtag: Mostrar todos los tweets que tienen sus hashtags de Twitter elegidos.
  • Inicio Timeline: Muestra los tweets de tu propia línea de tiempo de Twitter
  • Buscar: Elige términos de búsqueda e incrusta tuits con esos términos
  • Menciones: Incrusta tuits que mencionen tu cuenta de Twitter
  • Listas: Incrusta listas específicas de X (Twitter) en tu sitio web.

¿Quieres utilizar más de un tipo de feed de Twitter? Puedes seleccionar varias opciones y combinar tipos de feed aquí.

Después de elegir el tipo de feed de Twitter, haz clic en Siguiente para continuar.

elegir hashtag twitter feed

Utilizaremos el tipo de feed hashtag cuando mostremos un ejemplo de feed de Twitter en un sitio web.

Ahora que has creado un feed de Twitter, es el momento de conectar este feed a Twitter en el paso 3.

Paso 3: Conecte su cuenta de Twitter

Al conectar tu cuenta de Twitter, tu nuevo feed puede obtener contenidos de Twitter y mostrarlos en tu sitio.

En primer lugar, haz clic en el botón Conectar de la ventana emergente.

conectar la cuenta de twitter a wordpress

Al hacerlo, se abrirá el sitio web de Twitter, donde el complemento te pedirá acceso de sólo lectura a tu cuenta.

Twitter Feed Pro utilizará este acceso para ver el contenido en Twitter y no hará ningún cambio en tu cuenta. Por lo tanto, el plugin es seguro de usar.

Para continuar, haga clic aquí en el botón Autorizar aplicación .

autorizar twitter acceso solo lectura.jpg

Después de eso, Twitter Feed Pro le enviará de vuelta a su sitio web para que pueda terminar de añadir la fuente de su feed de Twitter.

Esta fuente puede ser un perfil de Twitter, un hashtag, un término de búsqueda, una lista de Twitter, etc., en función del tipo de fuente.

Sólo tienes que introducir la fuente en la ventana emergente y hacer clic en Siguiente.

seleccione los hashtags de su feed de twitter

Dado que estamos creando un hashtag de Twitter, utilizaremos el hashtag "KEEB_PD" como fuente.

Ahora puede pasar al siguiente paso y personalizar cómo aparecen los tweets en su sitio web.

Paso 4: Personaliza tus Tweets

Para personalizar tu feed de Twitter con facilidad, puedes elegir una plantilla de feed que puedes importar con un solo clic.

Tienes 7 plantillas de alimentación con diseños únicos para que elijas:

  • Por defecto
  • Albañilería
  • Carrusel simple
  • Tarjetas sencillas
  • Carrusel de escaparates
  • Últimos tweets
  • Widget

Sólo tienes que seleccionar la plantilla de Twitter que prefieras y hacer clic en Siguiente.

elija una plantilla de alimentación

Ahora puedes utilizar el personalizador de feeds en directo para cambiar el diseño de tu feed de Twitter con unos pocos clics.

Utilizando las opciones de la izquierda, puedes elegir el diseño de tu feed, el diseño de la cabecera, la opción de lightbox, la combinación de colores y mucho más.

Y a la derecha, tienes una vista previa en directo de tu feed de Twitter para ayudarte a seguir tus cambios.

live feed editor twitter feed pro visual preview

¿Listo para personalizar tus tweets?

Busque la opción Feed Layout a la izquierda y haga clic en ella para iniciar la personalización.

elija la opción de diseño de feed crear feed de twitter

Aquí puede elegir entre diferentes diseños de feed para controlar cómo aparecen los tweets en su sitio de WordPress.

Hay 3 diseños: lista, carrusel y mampostería.

feed layout options agregador twitter

Con el diseño de lista , tus tweets aparecerán en una sola columna, como en el sitio web oficial de Twitter.

Además, tus tweets serán más visibles.

diseño de lista twitter feed pro

A continuación, puede elegir el diseño de mampostería , que muestra los tweets utilizando diferentes columnas.

Como resultado, puedes incrustar toneladas de tweets en tu sitio a la vez.

distribución de mampostería twitter feed

Por último, tienes el diseño carrusel , que convierte tus tweets en un carrusel o deslizador de Twitter.

De este modo, puede hacer que su sitio web sea más atractivo e interactivo.

diseño carrusel twitter

Después de elegir la opción de diseño de la fuente, haz clic en el botón Guardar de la parte superior.

Una vez hecho esto, haga clic en el botón Personalizar para volver a las opciones principales de personalización.

volver al menú principal live feed editor

A partir de aquí, puedes seguir cambiando el diseño de tu feed de Twitter.

Para editar los colores de tus tweets, haz clic en la opción Esquema de colores de la izquierda.

elija la opción de combinación de colores twitter feed

Aquí puedes ver los 4 esquemas de color que puedes elegir para tus tweets:

  • Heredar del tema: Utilice los mismos colores que su tema de WordPress
  • Claro: Muestra un fondo claro y un color de fuente oscuro
  • Oscuro: elija un color de fuente claro junto con un fondo oscuro
  • Personalizados: Elige manualmente todos los colores
opciones de combinación de colores para tu feed de twitter

Elige la combinación de colores que prefieras de la lista y haz clic en Guardar.

Ahora puedes utilizar el resto de opciones de personalización para elegir el diseño de tus tweets. Puedes configurar el estilo de la cabecera, el diseño de los botones, limitar el número de tweets, el tamaño del feed y mucho más.

Por último, haz clic en el botón Guardar cuando estés satisfecho con el diseño de tu feed de Twitter.

Después de eso, es hora de pasar al último paso y añadir estos tweets a su sitio web.

Paso 5: Insertar Tweets en su sitio web

Usando Twitter Feed Pro, hay 2 maneras para que usted pueda incrustar sus tweets en su sitio web:

  • Insertar tweets en una página web
  • Insertar tweets en la barra lateral o en el pie de página de un sitio web

Insertar Tweets en una página web

Con el editor de feeds en directo, puedes incrustar tus tweets en unos pocos clics, sin necesidad de tocar ni una sola línea de código.

Haz clic en el botón "Incrustar" de la parte superior para empezar.

live feed editor embed button twitter

A continuación, verás una ventana emergente que contiene todas las opciones para incrustar tu feed de Twitter.

Para continuar, haga clic aquí en Añadir a una página .

añadir a una página

La ventana emergente le mostrará una lista de todas las páginas de WordPress que tiene en su sitio web.

Sólo tiene que seleccionar la página en la que desea mostrar los tweets y, a continuación, hacer clic en Añadir.

añadir el feed de twitter a una nueva página

Al hacerlo, se abrirá la página en el editor de WordPress.

A partir de ahí, puede añadir un nuevo bloque de contenido haciendo clic en el icono más (+).

añadir nuevo bloque wordpress

Aquí, utiliza la barra de búsqueda de la parte superior para buscar el bloque "twitter feed".

Por último, haz clic en el bloque de Twitter de abajo para incrustar tus tweets.

incrustar twitter feed en su sitio wordpress

Para confirmar los cambios, haz clic en el botón Actualizar de la parte superior y ¡listo!

Ahora sigue adelante y abre tu sitio web, y podrás ver cómo se ven los tweets.

ejemplo de feed de twitter en un sitio web

Veamos ahora la siguiente forma de incrustar tweets en tu sitio web.

Además de añadir tweets a tu página, también puedes mostrar los tweets en tu barra lateral o pie de página como widget de Twitter.

Al igual que antes, puedes utilizar el editor de live feed para incrustar los tweets.

Para volver a abrir su feed de Twitter en el editor de feeds en directo, vaya al menú Twitter Feed " All Feeds desde su panel de control de WordPress.

A continuación, haz clic en el feed de Twitter que quieras incrustar.

hashtag abierto en twitter

Ahora puedes volver a ver tus tweets en el editor de live feed.

Para continuar, haga clic en el botón Incrustar de la parte superior, igual que antes.

live feed editor embed button twitter

En la ventana emergente, puedes elegir dónde quieres incrustar tus tweets.

Esta vez, haga clic en el botón Añadir a un widget para continuar.

añadir feed de twitter al widget

Al hacerlo, se abrirá la página de widgets de tu sitio de WordPress para que puedas incrustar tu nuevo widget de Twitter.

Para añadir tus tweets a tu barra lateral, haz clic en el panel Barra lateral .

abrir el panel de la barra lateral

Si desea mostrar los tweets en el pie de página, haga clic en el panel Pie de página .

Utilizaremos la barra lateral de WordPress para este ejemplo de Twitter.

abrir panel de pie de página

Haz clic en el icono más (+) de la parte inferior para añadir un nuevo widget a tu barra lateral o pie de página.

A continuación, haz clic en Twitter Feed para incrustar tu nuevo feed de Twitter.

añade un widget de twitter a wordpress

Por último, haz clic en el botón Actualizar para confirmar tu nuevo widget de Twitter y listo.

Ahora puede abrir su sitio web para ver sus tweets mostrados en el área de widgets.

incrustar twitter feed en la barra lateral de wordpress

¡Y ya está!

Ahora ya sabes cómo incrustar tweets en tu sitio web de forma sencilla. De este modo, podrás aumentar fácilmente tus seguidores en Twitter, atraer a tus visitantes y aumentar tus ventas.

¿Y lo mejor? Puedes utilizar el plugin Twitter Feed Pro para hacer todo eso con unos simples clics, sin necesidad de tocar ni una sola línea de código.

¿Quieres empezar a incrustar tweets? Consigue tu copia de Twitter Feed Pro aquí.

Mientras estás aquí, también puedes consultar nuestra lista de las mejores formas de aumentar tu participación en Twitter.

Si este artículo te ha sido útil, síguenos en X (Twitter) y Facebook, y permanece atento a más consejos y trucos sobre marketing en redes sociales.

avatar de autor
Sajjan Sharma Redactor jefe
Sajjan lleva más de 10 años escribiendo sobre WordPress, marketing en redes sociales y negocios online. Sus intereses profesionales se extienden al marketing de influencers, la curación de contenidos y las estrategias de marketing digital.

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.