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

Has pegado el código de incrustación de X (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 códigos incrustados de X (Twitter) (ahora X (Twitter)), 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 es el propio JavaScript de X (Twitter) el que te pone trabas. Hay una forma mucho más sencilla que te permite evitar toda esa lucha.

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

En este artículo:

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

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

Hay dos formas de hacer que un elemento incrustado de X (Twitter) se adapte al tamaño de la pantalla. La primera es manual. Hay que envolver el iframe de X (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 (Twitter) 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 X (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	X (Twitter) Feed Pro
Se necesita código	Sí	Ninguno
Se adapta a las actualizaciones de X (Twitter)	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 código JavaScript de X (Twitter). Vuelve a aplicar los estilos en línea una vez que se carga la página, por lo que el CSS se borra cada vez.

Aquí está la parte que confunde a la gente. El contenido incrustado no es realmente tuyo. Se trata de un iframe, una pequeña ventana a los servidores de X (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 X (Twitter) Feed Pro y evitar todos estos problemas.

Con el plugin n.º 1 para WordPress dedicado a las publicaciones de X (Twitter), podrás crear, personalizar e incrustar 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, X (Twitter) Feed Pro tampoco utiliza 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 X (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 incrustar contenido adaptativo de X (Twitter)? Consigue aquí tu copia de X (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: Instala el plugin «X (Twitter) Feed Pro»

Puedes empezar descargándote aquí tu copia de X (Twitter) Feed Pro. Una vez que tengas el archivo del complemento, 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, abre el menú «X (Twitter) Feed » Todos los feeds » desde tu panel de administración y haz clic en el botón «Añadir nuevo ».

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

• Cronología del usuario: Selecciona una cuenta de X (Twitter) e incrusta las publicaciones de X en ella
• Hashtag: Muestra las publicaciones incrustadas de X (Twitter) con los hashtags que elijas
• Búsqueda: Elige un término de búsqueda e integra las X publicaciones que coincidan
• Listas: Selecciona una lista de X (Twitter) e incrusta todas las publicaciones de X que contenga.

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 (Twitter), 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, X (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 todas las publicaciones de X que contengan 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 X (Twitter) Feed Pro es que el complemento hace que los elementos incrustados 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
• Últimas publicaciones de X
• 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, X (Twitter) Feed Pro abrirá el editor de feeds en tiempo real, donde podrás personalizar al detalle tus incrustaciones optimizadas para 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.

A continuación, puedes elegir el diseño de las publicaciones de X que aparecerán en tu página web. De hecho, puedes elegir entre tres 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 .

Esta disposición mostrará las X publicaciones en un único widget. También es una opción estupenda para vídeos incrustados.

A continuación, tienes el diseño «masonry» , que permite mostrar tus publicaciones de X incrustadas en varias columnas.

De este modo, podrás captar la atención de los visitantes de tu página web mostrándoles un montón de publicaciones diferentes de X 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 de tu cuadro de publicaciones de X, el encabezado, los botones de «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 X (Twitter) Feed Pro, puedes elegir entre dos formas diferentes de incrustar 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 página 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».

X (Twitter) Feed Pro te redirigirá ahora 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 «X (Twitter) Feed» que aparece más abajo.

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 elementos incrustados de X (Twitter) se adapten a cualquier tamaño de pantalla e incorporarlos a tu página web. Ahora ya puedes abrir la página web y ver cómo quedan tus elementos incrustados de X (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 feeds en directo, también puedes añadir contenido de X (Twitter) a las áreas de tu página web preparadas para widgets.

Si aún no tienes abierto el editor, lo primero que debes hacer es abrir el menú «Feed de X (Twitter)» » «Todos los feeds » desde tu panel de control.

Aquí, haz clic en el widget «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.

X (Twitter) Feed Pro te redirigirá ahora a la página de widgets de tu sitio web, donde podrás gestionar los widgets que ya tienes 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 de más (+) que hay en la parte inferior y, a continuación, selecciona el widget «X (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 X (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 contenidos incrustados de X (Twitter) se adapten a cualquier tamaño de pantalla? Descarga aquí X (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.