Cómo añadir un feed de X (Twitter) a tu sitio web de WordPress con Divi
Inicio Blog Cómo añadir un feed de X (Twitter) a tu sitio web de WordPress con Divi

Cómo añadir un feed de X (Twitter) a tu sitio web de WordPress con Divi

Cómo añadir un feed de Twitter a tu Divi WordPress

¿Alguna vez has querido añadir un feed de X (Twitter) a tu página web de Divi?

Una vez que hayas creado una página web atractiva con Divi, una forma sencilla de hacerla más interesante es añadir un feed de X (Twitter).

De este modo, podrás mostrar contenido relevante de X (Twitter) para captar la atención de tus visitantes, aumentar tu número de seguidores en las redes sociales e incluso impulsar las conversiones.

Y para que puedas empezar de inmediato, te mostraremos la forma más sencilla de añadir contenido de X (Twitter) a Divi.

Antes de eso, veamos cómo puede resultarte útil mostrar contenido de X (Twitter) en tu sitio web de Divi.

O bien, puedes seguir esta sencilla guía para mostrar el feed de X (Twitter) en WordPress.

¿Por qué añadir feeds de X (Twitter) a una página web de Divi?

Divi es un popular constructor de páginas para WordPress que puede utilizar para crear un hermoso sitio web con facilidad.

Pero puede que no baste con tener un sitio web bonito. Al fin y al cabo, la mayoría de sus visitantes abandonarán el sitio para no volver jamás.

"He aquí un dato preocupante: el 95% de los visitantes que llegan a su sitio web no volverán nunca más.Eso no es un agujero del tamaño de un cuarto en su cubo, es un cráter".

- Josh Sturgeon, cofundador de EmberTribe

josh sturgeon

Una forma estupenda de captar la atención de tus visitantes es mostrar contenido de X (Twitter) en tu página web. De esta forma, podrás mostrar contenido interesante y conseguir que los usuarios permanezcan en tu página. 

  • Con un contenido atractivo en las redes sociales, puede hacer que la gente pase más tiempo en su sitio. De ese modo, su sitio puede obtener un mejor SEO y llegar a aún más personas con facilidad.
  • Incrusta publicaciones de X de tu propia cuenta y convierte el tráfico de tu página web en interacción y nuevos seguidores en X (Twitter) con facilidad.
  • Con un feed de Twitter, puede mostrar sus últimos lanzamientos de productos, noticias, anuncios, ventas y mucho más de una manera llamativa.
  • Puedes incluir reseñas y testimonios de X (Twitter) en las páginas de tus productos. Con esta prueba social, te resultará mucho más fácil convertir a los visitantes en clientes.

Una forma sencilla de mostrar el feed de X (Twitter) en WordPress

Para añadir manualmente un feed de X (Twitter) a Divi, tendrás que generar los códigos de inserción, modificar el código y, a continuación, añadirlo a tu página web.

Además, el contenido de X (Twitter) no reproducirá el diseño de tu página web si utilizas este método, y las publicaciones de X pueden incluso entrar en conflicto con tu imagen de marca.

¿La buena noticia?

Hay una forma mucho mejor de mostrar las publicaciones de X (Twitter) sin tener que tocar ni una sola línea de código. Además, no hace falta que busques entre las extensiones del Divi Marketplace.

Solo tienes que utilizar el plugin X (Twitter) Feed Pro.

embed twitter feed plugin

Con X (Twitter) Feed Pro, es muy fácil mostrar feeds de X (Twitter) en tu página web y mantener el interés de los visitantes, incluso si eres un experto en WordPress.

Este complemento incluye un montón de funciones pensadas para que te resulte más fácil que nunca integrar feeds de X (Twitter) en tu sitio web:

  • Solo tienes que seguir el proceso guiado de tres pasos que te llevará a través de todo el proceso de creación, personalización e integración de feeds de X (Twitter), sin necesidad de programar.
  • Una vez que crees tus feeds de X (Twitter), heredarán automáticamente el diseño de tu página web de Divi y quedarán fantásticos desde el primer momento.
  • Puedes importar una plantilla prediseñada o utilizar el editor de feeds en tiempo real para modificar el diseño, la combinación de colores, el encabezado, el recuadro de publicaciones X, el tamaño del feed y mucho más.
  • ¿Y lo mejor? Con este plugin dispones de un equipo de expertos en WordPress. Si alguna vez necesita ayuda o tiene alguna pregunta, puede simplemente llegar a ellos para obtener ayuda.
  • Todos los feeds de X (Twitter) que crees serán ligeros y rapidísimos. Además, una página web más rápida también supone un mejor posicionamiento SEO para tu sitio web.
twitter feed pro ejemplo

En definitiva, X (Twitter) Feed Pro es el mejor plugin de feed de X (Twitter) del mercado y una opción excelente para los negocios online. Además, cuenta con el respaldo de un reconocido equipo de atención al cliente formado por expertos en WordPress.

¿Estás listo para crear feeds de X (Twitter) atractivos para tu página web? ¡Consigue hoy mismo tu copia de X (Twitter) Feed Pro!

Cómo añadir un feed de X (Twitter) a Divi (paso a paso)

Lo único que tienes que hacer es seguir los sencillos pasos que te indicamos a continuación y podrás integrar feeds de X (Twitter) en tu sitio de WordPress. ¡Empecemos!

Paso 1: Descarga el complemento X (Twitter) Feed Pro

En primer lugar, descárgate el complemento «X (Twitter) Feed Pro» desde aquí y, a continuación, guárdalo en tu ordenador.

A continuación, puedes instalar y activar X (Twitter) Feed Pro en tu sitio de WordPress.

Si no estás seguro de cómo hacerlo, echa un vistazo a este tutorial sobre cómo instalar plugins de WordPress para principiantes.

Paso 2: Crear un canal X (Twitter)

Con este complemento, puedes crear tu feed de X (Twitter) siguiendo los pasos que te indica la guía.

En primer lugar, ve al panel de control de WordPress y, a continuación, abre el menú «X (Twitter) Feed» » «All Feeds ».

En la nueva página, haga clic en el botón Añadir nuevo para empezar.

añadir nuevo feed personalizado de twitter

A continuación, el plugin te preguntará qué tipo de feed de X (Twitter) quieres incluir en tu página web de Divi. Aquí puedes elegir entre tres opciones:

  • Cronología del usuario: Selecciona una cronología de X (Twitter) y muestra las últimas publicaciones de X.
  • Hashtag: Muestra un feed basado en los hashtags específicos de X (Twitter) que elijas.
  • Búsqueda: Mostrar los resultados de una búsqueda avanzada en X (Twitter).

Para continuar, elija un tipo de alimentación y haga clic en Siguiente.

tipos de feed twitter feed pro

En este ejemplo, me adelanté y elegí una línea de tiempo de usuario para el sitio web Divi.

Paso 3: Conecta tu cuenta X (Twitter)

Para que tu feed de X (Twitter) muestre las publicaciones de X en tu página web de Divi, solo tienes que vincularlo a tu cuenta de X (Twitter).

Para empezar, haz clic en el botón Conectar .

conectar la cuenta de twitter a wordpress

A continuación, el complemento abrirá X (Twitter) en tu navegador web para que puedas conceder acceso de solo lectura a X (Twitter) Feed Pro.

Gracias a este acceso, tus feeds pueden obtener información de X (Twitter) y, a continuación, mostrar las publicaciones de X en tu página web. El plugin no podrá realizar ningún tipo de cambio, por lo que su uso es totalmente seguro.

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

autorizar twitter acceso solo lectura.jpg

Una vez hecho esto, el plugin volverá a abrir tu página web. Aquí podrás elegir la fuente de tu feed de Divi X (Twitter).

Como vamos a insertar la cronología de un usuario, añadiremos aquí el nombre de usuario «@starbucks» de X (Twitter).

Después de añadir la fuente, haga clic en Siguiente para continuar.

embed twitter feed user timeline

Paso 4: Personaliza tu feed de X (Twitter)

Dado que el plugin copiará automáticamente el diseño de su sitio web Divi, sus fuentes se verán hermosas desde el primer momento.

Además, también podrás personalizar el diseño de tu feed de X (Twitter).

Para ayudarte a empezar rápidamente, puedes elegir entre 7 plantillas de feeds diferentes con diseños predefinidos:

  • Por defecto
  • Tarjetas de albañilería
  • Carrusel simple
  • Tarjetas sencillas
  • Carrusel de escaparates
  • Última publicación de X
  • Widget

Una vez que hayas seleccionado la plantilla de Divi para tu feed de X (Twitter), haz clic en «Siguiente».

elija una plantilla de alimentación

A continuación, el plugin abrirá el editor de feeds en tiempo real para que puedas personalizar tu feed de X (Twitter) al detalle. De este modo, podrás asegurarte de que el diseño combine a la perfección con tu tema Divi.

A la izquierda, puedes encontrar el panel de personalización con opciones para configurar el diseño, los colores, el tamaño, el diseño del encabezado y mucho más de tu feed de redes sociales Divi.

live feed editor twitter

Cuando personalices tu feed de X (Twitter), puedes utilizar la vista previa en directo que aparece a la derecha para seguir fácilmente los cambios que vayas realizando.

Para empezar, suelo cambiar la disposición de las X entradas. Es una forma estupenda de modificar la forma en que los visitantes interactúan con el feed.

En primer lugar, haz clic en «Diseño del feed» para configurar el diseño de las X entradas de tu página web de Divi.

feed layout option twitter

X (Twitter) Feed Pro ofrece tres opciones en cuanto al diseño del feed: «Lista», «Masonry» y «Carrusel ».

Veamos a continuación cada uno de estos diseños.

elige un diseño de feed twitter

En primer lugar, tienes el diseño de lista, que puedes utilizar para mostrar X publicaciones en una sola columna, como en la página web oficial de X (Twitter).

lista twitter feed layout

¿Quieres mostrar muchas publicaciones de X a la vez?

Puedes seleccionar la disposición en mosaico, que muestra X publicaciones en varias columnas a la vez.

ejemplo mamposteria twitter feed wordpress

Si, por el contrario, eliges el diseño de carrusel, podrás convertir tu feed de Divi X (Twitter) en una bonita presentación de diapositivas.

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

carrusel twitter feed

Después de seleccionar un diseño de alimentación, haga clic en el botón Guardar de la parte superior.

Para personalizar más tu feed, puedes hacer clic en el botón Personalizar de la esquina superior izquierda.

volver a opciones de personalización twitter

A continuación, puedes utilizar el editor de feeds en directo para configurar los colores de tu feed de X (Twitter).

Para ello, haga clic en la opción Combinación de colores .

opción de combinación de colores twitter feed pro

A continuación, el plugin te mostrará esquemas de color que puedes utilizar para seleccionar los colores de tu feed social con facilidad.

Todo lo que tienes que hacer es elegir entre 4 esquemas de color diferentes:

  • Heredar del tema: Utilice los mismos colores que su sitio web Divi
  • Claro: Muestra un fondo claro con un color de fuente oscuro
  • Oscuro: Mostrar un fondo oscuro junto con una fuente de color claro.
  • Personalizado: Seleccionar manualmente todos los colores

Una vez elegida la combinación de colores, vuelve a hacer clic en Guardar para confirmar los cambios.

elegir combinación de colores twitter

Ahora, puedes utilizar el resto de las opciones para cambiar el aspecto de tu nuevo feed. Con el editor de feeds en vivo es muy fácil cambiar el tamaño del feed, el botón de cargar más, las opciones de lightbox, el estilo de la cabecera y mucho más.

Recuerda hacer clic en Guardar al final para confirmar los cambios.

Paso 5: Insertar el feed de X (Twitter) en una página web de Divi

Para empezar a incrustar tu feed, lo más fácil es utilizar el editor de feeds en directo.

Desde tu editor en directo, haz clic en el botón Incrustar de la parte superior.

incrustar tu feed de twitter

A continuación, verás una ventana emergente con todas las opciones de incrustación para tu nuevo feed.

Para incrustar el feed en su sitio web Divi, puede hacer clic en el botón Copiar aquí.

copiar el shortcode de twitter feed

A continuación, ve al menú «Páginas» » «Añadir nueva» desde el panel de control para crear una página para tu feed de X (Twitter).

Para continuar, haga clic en el botón Usar el Constructor Divi en el editor de WordPress.

añadir nueva página en divi

Para utilizar una entrada de WordPress en su lugar, abre el menú Entradas " Añadir nueva desde el panel de control.

Ahora haga clic en Usar el Constructor Divi para abrir la página en el editor Divi.

añadir nuevo post en divi

Desde el constructor Divi, puedes elegir entre 3 formas diferentes de diseñar tu página o post.

  • Empezar a construir: Empezar a construir a partir de una plantilla en blanco
  • Examinar diseños: Importar un diseño preestablecido
  • Elija Página: Duplicar una página y utilizar su diseño

Aquí puede seleccionar la opción que prefiera.

elija la opción divi builder

Si eliges la opción Empezar a crear, podrás empezar a diseñar tu página o entrada desde una página en blanco.

empieza a construir con divi editor

Pero si, en cambio, seleccionas la opción Examinar diseños, podrás consultar una colección de diseños prediseñados.

Para continuar, haga clic en el diseño que prefiera.

cargar paquete de diseño de la biblioteca divi

La ventana emergente le mostrará más detalles sobre el diseño elegido. Si desea una vista previa rápida, haga clic en Ver demostración en vivo.

Si está satisfecho con el diseño, haga clic en el botón Utilizar este diseño.

importar diseño para divi

Con la opción Elegir Página , puedes revisar todas las páginas que has creado usando Divi.

Para continuar, sólo tiene que hacer clic en la página que desee clonar.

cargar desde biblioteca tema divi

A continuación, ya puedes empezar a añadir contenido a tu página de Divi o, si lo prefieres, empezar por ahí. Así que voy a añadir rápidamente un módulo de cronología de X (Twitter) en esta página.

Para ello, primero haga clic en el icono verde de más (+) y, a continuación, elija el tipo de fila que desee.

insertar fila en sitio web divi

Ahora que has creado espacio para tu nuevo feed, haz clic en el icono negro del signo más (+) para empezar a añadir contenido.

A continuación, escriba "código" en la barra de búsqueda y haga clic en el módulo Código.

módulo de código para el tema divi

A la izquierda, encontrarás las opciones del módulo de código. Allí, busca el campo de código y luego pega el shortcode.

Por último, haz clic en el icono de la marca de verificación para finalizar la incorporación de tu feed de X (Twitter) a Divi.

añadir twitter feed shortcode a divi

A continuación, haz clic en el botón «Publicar» y tu nuevo módulo de feed de X (Twitter) estará disponible en tu sitio web de Divi.

Para ver cómo se ve el feed, puede abrir su sitio web y comprobarlo usted mismo.

ejemplo de feed de twitter en el sitio web de divi

¡Y ya está!

Como puedes ver, añadir un feed de X (Twitter) a las páginas web de Divi es muy fácil si utilizas la herramienta adecuada. Y con X (Twitter) Feed Pro, integrar X (Twitter) en tu página web es más fácil que nunca.

En definitiva, es sin duda el mejor plugin de WordPress para integrar X (Twitter) en tu página web. Así de fácil, podrás potenciar fácilmente tu estrategia de marketing en X (Twitter).

¿Quieres añadir fácilmente publicaciones de X (Twitter) a Divi? ¡Consigue aquí tu copia de X (Twitter) Feed Pro!

Si quieres utilizar X (Twitter) para tu negocio, puedes consultar nuestra lista de las mejores herramientas de marketing de X (Twitter).

Otras guías y consejos sobre marketing en redes sociales

Si este artículo te ha resultado útil, síguenos en X (Twitter) y en Facebook, y no te pierdas 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.