Cómo integrar widgets adaptativos de X (Twitter) en tu página web

Has pegado el código de incrustación de Twitter en tu página web. En el ordenador se ve muy bien. Pero luego lo compruebas en el móvil.

Ahora es un desastre. El feed se sale de la pantalla o queda encajonado en un recuadro estrecho de 500 píxeles con espacio en blanco por todas partes. Así que intentas arreglarlo rápidamente con CSS. Funciona un día, pero luego vuelve a fallar.

Si esto te suena, no eres el único. Es uno de los problemas más habituales con los vídeos incrustados de Twitter (ahora X), y la mayoría de las «soluciones» que se encuentran en Internet son trucos poco fiables de 2012 que dejaron de funcionar hace años.

He rebuscado en los foros de desarrolladores, he probado las soluciones alternativas con CSS y he averiguado por qué siguen fallando. Resulta que el propio JavaScript de Twitter te pone trabas. Hay una forma mucho más sencilla de evitar toda esta lucha.

A continuación te presento dos formas de hacer que un feed de Twitter se adapte a diferentes tamaños de pantalla. En primer lugar, el método manual con CSS. Y, a continuación, el método con plugin, que ya viene adaptado de serie, no requiere código y no dejará de funcionar con la próxima actualización de X.

En este artículo:

• Respuesta rápida: Cómo insertar un feed de Twitter adaptativo
  • ¿Por qué no se aplican los cambios de ancho en tu CSS?
• La forma más rápida de hacer que las incrustaciones de X (Twitter) se adapten a diferentes tamaños de pantalla
• Cómo integrar widgets adaptables de X (Twitter) en tu página web (método sencillo)
  • Paso 1: Instalar el plugin Twitter Feed Pro
  • Paso 2: Crear un nuevo widget
  • Paso 3: Conecta tu cuenta X (Twitter)
  • Paso 4: Personaliza tus contenidos incrustados de X (Twitter)
  • Paso 5: Añadir incrustaciones de Responsive X (Twitter) a WordPress
  • Añade elementos incrustados de X/Twitter a tu página web
  • Añade elementos incrustados de X/Twitter en la barra lateral o el pie de página de tu sitio web

Respuesta rápida: Cómo insertar un feed de Twitter adaptativo

¿Tienes prisa? Aquí tienes la respuesta antes de pasar al tutorial completo.

Hay dos formas de hacer que un elemento incrustado de Twitter se adapte al tamaño de la pantalla. La primera es manual. Hay que envolver el iframe de Twitter en un contenedor y forzar que width: 100%, y contrarrestar sus estilos en línea con CSS y consultas de medios.

Esto funciona, pero lleva mucho tiempo implementarlo y mantenerlo. Además, suele dejar de funcionar cuando X actualiza su código de incrustación.

La segunda opción es un plugin. Este plugin muestra el feed utilizando el propio código de tu tema, por lo que es adaptativo por defecto. Sin código, sin consultas de medios, sin conflictos de sobrescritura.

Para quienes no saben programar, el plugin es la mejor opción. Mi elección es Twitter Feed Pro, que evita tener que programar y hace que tus incrustaciones se adapten a cualquier tamaño de pantalla desde el primer momento.

Ambos métodos te permiten obtener, con el tiempo, un feed adaptativo, pero la diferencia radica en el tiempo que dedicas y en el nivel de mantenimiento que asumes.

A continuación te mostramos cómo se comparan ambos.

	CSS manual	Twitter Feed Pro
Se necesita código	Sí	Ninguno
Resiste X actualizaciones	No	Sí
Es hora de prepararlo todo	Más de 30 minutos	Unos 5 minutos

¿Por qué no se aplican los cambios de ancho en el CSS?

Estableces el ancho al 100 %, guardas y actualizas la página. No cambia nada. Entonces, ¿qué es lo que sigue anulando tu configuración?

El propio JavaScript de Twitter. Vuelve a aplicar los estilos en línea una vez que se carga la página, por lo que tu CSS se borra cada vez.

Aquí está la parte que suele confundir a la gente. El contenido incrustado no es realmente tuyo. Se trata de un iframe, una pequeña ventana a los servidores de Twitter, y tú no controlas lo que hay dentro.

La forma más rápida de hacer que las incrustaciones de X (Twitter) se adapten a diferentes tamaños de pantalla

Si buscas la mejor opción, puedes utilizar el plugin Twitter Feed Pro y evitar todos estos problemas.

Con el plugin número uno para WordPress dedicado a los feeds de Twitter, podrás crear, personalizar e integrar contenido de X/Twitter con solo unos clics.

Todas tus incrustaciones se adaptarán automáticamente, por lo que se verán correctamente tanto si se navega desde un móvil, una tableta o un ordenador de sobremesa.

A diferencia del método manual, Twitter Feed Pro tampoco inserta un iFrame. Recoge tus publicaciones y las integra correctamente en tu página web.

Así es como cambia la situación:

• Por defecto, es adaptable. El feed se genera a partir del código de tu tema, por lo que se adapta a tu diseño en lugar de quedar fijado en un recuadro de 500 píxeles.
• No hay conflicto de sobrescritura. Si no hay iframe, el JavaScript de Twitter no puede acceder para restablecer tus estilos.
• No hay ningún error relacionado con la altura. Al no haber ningún iframe cuyo tamaño haya que calcular, la altura del feed nunca supera la de su contenido.

Además, tendrás control total sobre el diseño de tus contenidos incrustados de X/Twitter. Incluso puedes optar por importar una plantilla prediseñada para personalizarlos de forma rápida y sencilla.

Con el editor de retransmisiones en directo, podrás diseñar tus incrustaciones al detalle, sin necesidad de HTML, CSS personalizado ni ningún tipo de código.

Además, estás en buena compañía. Los plugins de Smash Balloon dan servicio a más de 1,75 millones de sitios web activos y cuentan con una valoración de 4,9 sobre 5 estrellas.

¿Estás listo para insertar contenido adaptativo de X (Twitter)? Consigue aquí tu copia de Twitter Feed Pro.

Dicho esto, veamos cuál es la forma más sencilla de hacer que los widgets de X (Twitter) se adapten a diferentes tamaños de pantalla con este complemento.

Cómo integrar widgets adaptables de X (Twitter) en tu página web (método sencillo)

Si sigues las instrucciones paso a paso que aparecen a continuación, podrás disponer de un feed con elementos incrustados optimizados para dispositivos móviles en tu página web.

Empecemos.

Paso 1: Instalar el plugin Twitter Feed Pro

Puedes empezar por conseguir una copia de Twitter Feed Pro aquí. Una vez que tengas el archivo del plugin, instálalo y actívalo en tu ordenador.

Si quieres un repaso rápido sobre cómo hacerlo, tenemos un tutorial para principiantes sobre cómo instalar un plugin de WordPress.

Paso 2: Crear un nuevo widget

Dado que el complemento cuenta con un proceso guiado de tres pasos, te resultará muy fácil crear un nuevo widget para mostrar contenidos incrustados adaptables.

En primer lugar, abra el menú Twitter Feed " Todos los feeds de su panel de control de administración y haga clic en el botón Añadir nuevo.

A continuación, puedes elegir el tipo de widget de Twitter que te gustaría insertar. Aquí hay cuatro opciones diferentes entre las que elegir:

• Línea de tiempo del usuario: Selecciona una cuenta de Twitter e incrusta allí los tuits
• Hashtag: Muestra incrustaciones de Twitter con los hashtags que elijas
• Buscar: Elige un término de búsqueda e incrusta los tuits coincidentes
• Listas: Selecciona una lista de Twitter e incrusta todos los tuits de ahí

Una vez que haya seleccionado el tipo de widget que desea, haga clic en el botón Siguiente.

Para nuestro ejemplo, seleccionaremos un tipo de widget de hashtag .

Paso 3: Conecta tu cuenta X (Twitter)

Una vez que conectes tu cuenta de X, tu widget podrá empezar a mostrar contenidos incrustados adaptables en tu página web.

¿Listo para empezar? En primer lugar, haz clic en el botón Conectar de la ventana emergente.

Al hacerlo, tu navegador te redirigirá desde tu página web a www.x.com. Aquí podrás conceder al complemento acceso de solo lectura a tu cuenta.

Dado que Smash Balloon es totalmente seguro, Twitter Feed Pro puede ver tu información, pero no tendrá permiso para realizar ningún cambio con este acceso.

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

Al hacer clic, volverá a su sitio web de WordPress.

Aquí puedes seleccionar la fuente de tus contenidos incrustados. Dependiendo del tipo de widget, puede tratarse de un nombre de usuario de X (Twitter), un hashtag, un término de búsqueda y mucho más.

Por ahora, introduciremos el hashtag "KEEB_PD" en la ventana emergente y mostraremos todos los tweets con ese hashtag.

Para continuar, puede introducir su fuente y hacer clic en Siguiente.

Con esto, ya has añadido una nueva fuente para tu widget. En el futuro, podrás reutilizar esta fuente con un solo clic cada vez que crees nuevos widgets de X (Twitter).

Paso 4: Personaliza tus contenidos incrustados de X (Twitter)

Lo mejor de Twitter Feed Pro es que el complemento hace que las incrustaciones se adapten automáticamente a cualquier tamaño de pantalla y reproduce el diseño de tu página web.

Además, también dispones de una colección de plantillas prediseñadas que puedes importar para tu widget:

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

Todo lo que tiene que hacer es seleccionar la plantilla que desea utilizar y, a continuación, hacer clic en Siguiente.

Una vez que hayas importado una plantilla, Twitter Feed Pro abrirá el editor de feeds en directo, donde podrás personalizar al detalle tus incrustaciones adaptadas a dispositivos móviles.

A la izquierda, tienes la opción de cambiar el diseño de tu feed, la combinación de colores, la cabecera, el botón de cargar más y mucho más.

Además, puedes seguir todos los cambios en tiempo real gracias a la vista previa en directo de la derecha. Así, la personalización es fácil, rápida y precisa.

Para empezar a diseñar tus elementos incrustados, primero haz clic en la opción «Diseño del feed», situada a la izquierda.

Después, puedes elegir el diseño de los tweets que aparecerán en tu sitio web. De hecho, puedes elegir entre 3 diseños diferentes:

• Lista
• Albañilería
• Carrusel

Veamos estos diseños en detalle a continuación.

Si quieres que los contenidos incrustados de X (Twitter) se vean fácilmente en tu página web, puedes utilizar el diseño de lista .

Este diseño mostrará los tuits en un único widget. También es una opción estupenda para incrustar vídeos.

A continuación, tienes el diseño de mampostería que puede mostrar tus tweets incrustados en muchas columnas.

Como resultado, puede atraer a los visitantes de su sitio web mostrando toneladas de tweets diferentes a la vez.

¿Quiere que su sitio web sea más interactivo?

Solo tienes que seleccionar el diseño de carrusel y mostrar una presentación en forma de carrusel con tus contenidos incrustados de X (Twitter).

Después de seleccionar el diseño, puede guardar los cambios haciendo clic en Guardar.

Si quieres conocer más formas de personalizar tus contenidos incrustados de X (Twitter), haz clic en el botón «Personalizar ».

A continuación, puedes utilizar el editor de feeds en tiempo real del plugin para cambiar los colores de tus contenidos incrustados.

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

Ahora, sólo tienes que seleccionar la combinación de colores que prefieras para cambiar todos los colores de tu feed a la vez.

Aquí tienes las combinaciones de colores entre las que puedes elegir:

• Heredar del tema: Copia automáticamente los colores de tu tema de WordPress
• Claro: Seleccione un fondo claro y un color de fuente oscuro
• Oscuro: Mostrar un fondo oscuro y una luz adecuada en su lugar.
• Personalizado: Elige manualmente todos los colores de tu widget

Después de seleccionar su combinación de colores, haga clic en Guardar una vez más.

Ahora puedes utilizar el resto de opciones de personalización del complemento para adaptar el estilo del recuadro de tuits, el encabezado, los botones «Cargar más», el tamaño del feed y mucho más.

Como puedes ver, este complemento facilita la personalización y la integración de feeds de X (Twitter): ¡no hace falta usar CSS ni HTML en absoluto!

Por último, haga clic en Guardar para guardar los cambios antes de pasar al último paso.

Paso 5: Añadir incrustaciones de Responsive X (Twitter) a WordPress

Dado que este complemento hace que tus contenidos incrustados se adapten automáticamente a cualquier tamaño de pantalla, ya puedes incrustar tu widget de X (Twitter).

Con Twitter Feed Pro, puedes elegir entre dos formas diferentes de insertar tus widgets adaptables:

• Añade elementos incrustados de X/Twitter a tu página web
• Añade elementos incrustados de X/Twitter en la barra lateral o el pie de página de tu sitio web

Veamos ambos métodos a continuación.

Añade elementos incrustados de X/Twitter a tu página web

¿Estás listo para añadir los widgets adaptables a tu página web?

En primer lugar, haga clic en el botón Incrustar de la esquina superior derecha.

Al hacer clic ahí, aparecerán las opciones de inserción de este widget. Puedes insertarlo en una página de WordPress, en la barra lateral o en el pie de página.

Esta vez, puede hacer clic en la opción Añadir a una página .

Ahora puede ver una lista de todas las páginas de WordPress de su sitio web.

Para continuar, solo tienes que hacer clic en la página en la que quieras añadir el widget adaptativo de X/Twitter y pulsar «Añadir».

Twitter Feed Pro ahora le redirigirá a esta página en el editor de WordPress.

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

A continuación, escribe «twitter feed» en la barra de búsqueda de la parte superior y, después, haz clic en el bloque «Twitter Feed» que aparece debajo.

Con esto, el complemento añadirá automáticamente el widget de X/Twitter a tu página.

Para confirmar tu nuevo widget, haz clic en el botón Actualizar de la parte superior.

Como puedes ver, es muy fácil hacer que tus códigos incrustados de X/Twitter se adapten a diferentes tamaños de pantalla e incorporarlos a tu página web. Ahora puedes abrir la página web y ver cómo quedan tus códigos incrustados de Twitter.

Añade elementos incrustados de X/Twitter en la barra lateral o el pie de página de tu sitio web

Desde el editor de transmisiones en directo, también puedes añadir contenido de X/Twitter a las áreas de tu página web preparadas para widgets.

En caso de que tu editor aún no esté abierto, primero, abre el menú Twitter Feed " All Feeds desde tu panel de control.

Aquí, haz clic en el widget de X/Twitter que quieras incrustar.

Y así, sin más, tu widget se abrirá en el editor de la transmisión en directo.

Al igual que antes, puede hacer clic en Incrustar para continuar.

Volverás a ver la ventana emergente con las opciones de incrustación.

Puede hacer clic en Añadir a un widget para continuar.

Twitter Feed Pro le redirigirá ahora a la página de Widgets de su sitio web, donde podrá gestionar los widgets existentes y añadir otros nuevos.

Aquí puedes elegir entre la barra lateral o el pie de página para mostrar tu widget.

Vamos a seguir adelante y utilizar el pie de página para nuestro ejemplo.

Por último, haz clic en el icono más (+) de la parte inferior y selecciona el widget de Twitter Feed .

Si haces clic en el botón «Actualizar» , tu nuevo widget de X/Twitter aparecerá en tu página web.

De esta forma, cualquier persona que visite tu página web podrá ver tus elementos incrustados adaptables en el pie de página de tu sitio web:

¡Y ahí lo tienes!

En solo unos sencillos pasos, podrás disponer de un feed de contenido incrustado de X (Twitter) adaptado a cualquier dispositivo para captar la atención de los visitantes, impulsar las conversiones y aumentar tu número de seguidores en las redes sociales.

Con la ayuda de Twitter Feed Pro, podrás mostrar fácilmente bonitos widgets que se cargan a la perfección en pantallas de cualquier tamaño, sin necesidad de tocar ni una sola línea de código.

¿Quieres que los elementos incrustados de X (Twitter) se adapten a cualquier tamaño de pantalla? Consigue aquí Twitter Feed Pro para tu página web.

Para aumentar tus ventas de forma sencilla, puedes seguir nuestra guía sobre cómo incrustar widgets de reseñas de Google en WordPress.

Y si te ha gustado este artículo, no dudes en seguirnos en X (Twitter) y Facebook para ver más tutoriales sobre marketing en redes sociales.