Muro social 
Feed Analytics 
¿Quieres mostrar contenido incrustado de X (Twitter) con diseño adaptativo para captar la atención de los visitantes de tu página web?
Si quieres captar la atención de todos los que visitan tu página web, una solución sencilla es incrustar publicaciones adaptativas de X (Twitter).
Sin embargo, añadir por tu cuenta códigos incrustados adaptables de X (Twitter) puede resultar complicado, sobre todo si aún no estás acostumbrado a manejar código.
En este artículo, te guiaremos a lo largo del proceso para integrar feeds adaptativos de X (Twitter) en tu página web.
Pero antes, veamos las diferentes formas de hacer que tus incrustaciones de X (Twitter) se adapten a diferentes tamaños de pantalla.
O bien, puedes consultar «Cómo insertar un feed de X (Twitter) adaptativo en tu página web».
Formas de añadir incrustaciones adaptativas de X (Twitter) en tu página web
Para incrustar contenido de X (Twitter) y asegurarte de que las publicaciones de X se adapten a cualquier tamaño de pantalla, tienes dos opciones a tu disposición:
- Manualmente: Genera un código de incrustación, modifica el código para que sea responsive y añádelo a tu sitio.
- Método automático: utiliza un complemento de redes sociales que permita mostrar automáticamente los feeds de X (Twitter) optimizados para dispositivos móviles.
Si optas por hacerlo manualmente, tendrás que abrir en tu navegador el generador oficial de código de incrustación de X (Twitter), publish.twitter.com.
Una vez generado el código HTML de inserción, abra de nuevo su sitio web e inserte el código de inserción.
Lamentablemente, es posible que tus publicaciones con la «X» no respondan siempre que lo intentes si utilizas el método manual. Para solucionar ese problema, puedes añadir este código CSS.
.twitter-timeline {
width: 100vw !important;
}
Y si quieres personalizar tus publicaciones en X (Twitter) utilizando iFrames, tendrás que editar el código manualmente aún más o contratar a un desarrollador.
Como puedes ver, incrustar contenido adaptativo de X (Twitter) puede resultar laborioso y complicado si utilizas este método.
¿Qué es mejor: las incrustaciones con iFrame o con X (Twitter)?
Aunque hay quien utiliza iFrames para mostrar contenido de X (Twitter), en realidad esto puede perjudicar a tu sitio web de muchas maneras.
Dado que los iFrames no son responsivos por defecto, tendrás que editar manualmente el código para hacerlos aptos para móviles.
Por ello, es posible que los visitantes que utilicen dispositivos móviles no puedan ver correctamente tus publicaciones de X.
Además, los motores de búsqueda como Google no pueden leer el contenido dentro de iFrames, lo que puede ser malo para el SEO.
La buena noticia es que puedes utilizar el método automático para incrustar publicaciones adaptativas de X (Twitter) con facilidad. Puedes utilizar un plugin de WordPress que se conecte con X (Twitter) a través de su API y recopile publicaciones de X en tu sitio web.
Veamos este método a continuación.
La forma más fácil de incrustar contenido adaptativo de X (Twitter)
Si buscas la forma más sencilla de incrustar contenido de X (Twitter), la mejor opción es probar un complemento como X (Twitter) Feed Pro.
Con X (Twitter) Feed Pro, puedes crear, personalizar e integrar fácilmente feeds adaptables de X (Twitter) en tu página web, sin necesidad de HTML, JavaScript, CSS personalizado ni ningún otro tipo de código.
Solo tienes que seguir una sencilla guía de tres pasos y tendrás un precioso feed de X (Twitter) listo para usar. Puedes incrustar una cronología de X (Twitter), un hashtag, resultados de búsqueda, la cronología de inicio y mucho más.
Dado que X (Twitter) Feed Pro copiará automáticamente el diseño de tu página web, tu contenido de X (Twitter) se adaptará perfectamente a la imagen de tu marca desde el primer momento.
A continuación, puedes personalizar aún más tu feed de X (Twitter) eligiendo una plantilla prediseñada que quieras importar.
Para una mayor personalización, el complemento incluye un editor visual en el que puedes configurar el diseño, el color, el número de entradas «X», el estilo del encabezado, los botones «Cargar más» y mucho más.
Además, puedes hacer un seguimiento de todos los cambios con la vista previa en directo.
El complemento cuenta con un sistema de almacenamiento en caché inteligente que guarda una copia de tu contenido de X (Twitter). De este modo, tu sitio web puede mostrar a los visitantes la copia guardada, en lugar de cargar tus publicaciones de X desde cero cada vez.
Como resultado, su sitio puede cargar mucho más rápido. Y con un sitio web más rápido, también se obtiene mucho mejor SEO.
Dado que X (Twitter) Feed Pro guarda una copia de seguridad, tus publicaciones de X incrustadas seguirán estando disponibles incluso cuando la propia plataforma de X (Twitter) esté temporalmente fuera de servicio.
En definitiva, es el mejor complemento para feeds de X (Twitter) que hay y una solución fantástica si quieres incrustaciones de X (Twitter) adaptativas.
¿Estás listo para incrustar feeds adaptativos de X (Twitter)? ¡No esperes más y hazte ya con tu copia de X (Twitter) Feed Pro!
Ahora, veamos cómo puedes utilizar este complemento para añadir incrustaciones adaptativas de X (Twitter) a tu página web.
Cómo integrar un feed adaptativo de X (Twitter) en tu página web
Para empezar a añadir incrustaciones adaptativas de X (Twitter), solo tienes que seguir las instrucciones paso a paso que se indican a continuación:
Paso 1: Instalar y activar X (Twitter) Feed Pro
Para empezar, puedes descargar tu copia del plugin X (Twitter) Feed Pro desde aquí. Una vez que tengas el plugin, instálalo y actívalo en tu sitio de WordPress para continuar.
Para obtener más información, puede consultar esta sencilla guía sobre cómo instalar plugins de WordPress.
Una vez hecho esto, puedes pasar al paso 2 y crear un feed de X (Twitter) adaptado a distintos dispositivos.
Paso 2: Crear un canal X (Twitter)
Dado que el complemento incluye un sencillo proceso guiado, puedes crear un nuevo feed de X (Twitter) con solo unos pocos clics.
En primer lugar, abre tu panel de administración y ve al menú «Feed de X (Twitter)» » «Todos los feeds» antes de hacer clic en el botón «Añadir nuevo» situado en la parte superior.
A continuación, el complemento te pedirá que elijas el tipo de contenido incrustado de X (Twitter) que quieres incluir en tu página web. Hay seis opciones entre las que puedes elegir, y cada una mostrará publicaciones de X procedentes de una fuente diferente.
- Cronología del usuario: Elige X perfiles de Twitter cuyas publicaciones de X quieras incrustar
- Hashtag: Selecciona hashtags concretos y, a continuación, integra las X publicaciones que contengan ese hashtag.
- Perfil: Insertar X publicaciones de la biografía de tu cuenta
- Búsqueda: Elige términos de búsqueda e integra los resultados de búsqueda de X (Twitter) en tu página web
- Menciones: Mostrar X publicaciones que mencionen la cuenta de X (Twitter) de tu marca
- Listas: Mostrar el contenido de la lista X (Twitter) que hayas seleccionado
Incluso puedes seleccionar más de una opción si quieres combinar diferentes tipos de fuentes en una sola fuente (Twitter).
Para continuar, selecciona el tipo de feed de X (Twitter) y, a continuación, haz clic en el botón «Siguiente ».
En nuestro ejemplo, utilizaremos un feed de hashtags para mostrar incrustaciones adaptativas de X (Twitter).
Ahora que ya has creado tu feed de X (Twitter), puedes vincularlo a tu cuenta de X (Twitter) en el paso 3.
Paso 3: Conecta tu cuenta X (Twitter)
Para mostrar contenidos incrustados adaptables en tu sitio web, el complemento se conectará ahora a tu cuenta de X (Twitter).
Para ello, en primer lugar, haz clic en el botón Conectar .
A continuación, X (Twitter) Feed Pro te pedirá acceso de solo lectura a tu cuenta. El complemento podrá entonces utilizar ese acceso para ver información de X (Twitter), pero no podrá realizar ningún cambio en tu cuenta.
Por lo tanto, el complemento X (Twitter) Feed Pro es totalmente seguro.
Para ello, basta con hacer clic en el botón Autorizar aplicación .
Una vez que lo hayas hecho, X (Twitter) Feed Pro abrirá tu página web para que puedas añadir una fuente para tu feed de X (Twitter).
Una fuente es el perfil de X (Twitter), un hashtag, un término de búsqueda, una lista o cualquier otro elemento que quieras incrustar en tu sitio web.
Para continuar, introduzca la fuente en la ventana emergente y haga clic en Siguiente.
Para este feed adaptativo de X (Twitter), utilizamos el hashtag «KEEB_PD» como fuente.
Ahora que has conectado tu feed a X (Twitter) y has añadido tu fuente, es el momento de personalizarlo.
Paso 4: Personaliza tus incrustaciones de Responsive X (Twitter)
Para ayudarte a configurar rápidamente el aspecto de las publicaciones X adaptables en tu sitio web, puedes importar una plantilla prediseñada.
Estas son las plantillas de alimentación que puede seleccionar:
- Por defecto
- Albañilería
- Carrusel simple
- Tarjetas sencillas
- Carrusel de escaparates
- Últimas publicaciones de X
- Widget
Haga clic en Siguiente una vez que elija la plantilla de alimentación que prefiera.
Ahora ya estás listo para personalizar tu feed de X (Twitter) mediante el editor de feed en tiempo real. En la parte izquierda encontrarás las opciones de personalización para cambiar el diseño de tu feed, el diseño del encabezado, la opción de lightbox, la combinación de colores y mucho más.
También puedes utilizar las opciones de moderación de la configuración del feed para seleccionar las publicaciones de X que aparecen en tu sitio web.
El plugin cuenta con una sencilla vista previa en tiempo real a la derecha que te ayudará a realizar un seguimiento de los cambios.
Para empezar, puedes modificar la disposición de las X entradas de tu página web.
Para ello, busque la opción Feed Layout a la izquierda y haga clic en ella.
A continuación, X (Twitter) Feed Pro te mostrará tres diseños entre los que puedes elegir: «Lista», «Carrusel» y «Masonry».
Veámoslos a continuación:
Si quieres mostrar X publicaciones de forma similar a la de la página web oficial de X (Twitter), puedes optar por el diseño de lista .
Además, de esta forma, tu feed de X (Twitter) se verá claramente en tu página web.
Si quieres utilizar columnas para mostrar incrustaciones de X (Twitter), puedes utilizar el diseño «masonry ».
Con este diseño puedes mostrar un montón de publicaciones de X a la vez.
Si eliges la opción de diseño en carrusel , podrás mostrar tus publicaciones de X en una presentación interactiva de X (Twitter).
Sus visitantes tendrán otra forma de interactuar con su sitio.
Después de seleccionar un diseño de alimentación, haga clic en el botón Guardar .
A continuación, haz clic en el botón «Personalizar» para seguir personalizando el aspecto de tu feed de X (Twitter).
Esta vez, puedes elegir los colores de tu feed de X (Twitter) adaptado a distintos dispositivos.
En primer lugar, haga clic en la opción Combinación de colores .
X (Twitter) Feed Pro incluye 4 opciones de combinaciones de colores que puedes probar:
- Heredar del tema: Copia los colores de tu tema de WordPress para tus X entradas
- Claro: Color de fuente oscuro con fondo claro
- Oscuro: fondo oscuro y fuente clara
- Personalizados: Selecciona manualmente todos los colores
Para continuar, seleccione su combinación de colores y haga clic en Guardar.
¿Quieres personalizar aún más tus incrustaciones de X (Twitter)? Puedes utilizar los botones restantes para configurar el estilo del encabezado, el diseño de los botones, el número de publicaciones de X, el tamaño del feed y mucho más.
Por último, haz clic en «Guardar» para confirmar el nuevo diseño de tu feed de X (Twitter).
En el paso 5, por fin podrás integrar este feed de X (Twitter) en tu sitio web de WordPress utilizando este plugin.
Paso 5: Añade elementos incrustados de Responsive X (Twitter) en tu página web
Con la ayuda de X (Twitter) Feed Pro, hay dos formas de incrustar contenido de X (Twitter) en tu página web:
- Añadir elementos incrustados adaptables de X (Twitter) en una página web
- Añadir elementos incrustados adaptables de X (Twitter) en la barra lateral o el pie de página de la web
Añadir elementos incrustados de Responsive X (Twitter) en una página web
Dado que el complemento es tan fácil de usar, puedes empezar a integrar tu feed de X (Twitter) directamente desde el editor de feeds en directo.
En primer lugar, haga clic en el botón Incrustar situado en la parte superior del editor.
Una vez que lo hayas hecho, el complemento te mostrará una ventana emergente con las diferentes formas en las que puedes incrustar feeds de X (Twitter).
Haga clic en Añadir a una página en la ventana emergente para continuar.
Ahora puede elegir la página de WordPress en la que desea mostrar el feed.
Tras seleccionar la página en la ventana emergente, pulse el botón Añadir para continuar.
Una vez hecho esto, el plugin abrirá la página en el editor de WordPress para que puedas incrustar tu feed.
A continuación, añada un nuevo bloque de contenido haciendo clic en el icono más (+).
Utiliza la barra de búsqueda de la parte superior para buscar el bloque «feed de Twitter» y, a continuación, haz clic en el bloque «Feed de X (Twitter)» que aparece más abajo.
A continuación, verás tu contenido incrustado de X (Twitter) en el editor de WordPress.
Por último, haz clic en el botón «Actualizar» y tu feed de X (Twitter) estará disponible en línea.
Si abres tu página web, podrás ver cómo se ven tus incrustaciones adaptativas de X (Twitter).
Como puedes ver, X (Twitter) Feed Pro hace que sea muy fácil mostrar en tu página web contenido de X (Twitter) adaptado a dispositivos móviles.
Dicho esto, veamos la siguiente forma de insertar feeds de X (Twitter).
Añadir incrustaciones de Responsive X (Twitter) en la barra lateral o el pie de página de la web
La siguiente opción es utilizar un widget de X (Twitter) para mostrar publicaciones de X adaptables en la barra lateral o en el pie de página de tu página web.
Al igual que con el método anterior, esta vez puedes utilizar el editor en vivo.
Si quieres volver a abrir un feed en el editor de feeds en directo, primero abre el menú «Feed de X (Twitter)» » «Todos los feeds» desde tu panel de control de WordPress.
Una vez hecho esto, haz clic en la publicación de Twitter (con la «X») que quieras incrustar.
Como puedes ver, es muy fácil volver a abrir un feed de X (Twitter) en el editor de feeds en directo.
A partir de ahí, haz clic en el botón Incrustar de la parte superior para empezar.
Ahora puedes utilizar la ventana emergente para crear un nuevo widget de X (Twitter) que muestre publicaciones de X adaptadas al dispositivo.
A continuación, haga clic en el botón Añadir a un widget de la ventana emergente.
Ahora, el complemento abrirá la página de widgets de tu sitio web, donde podrás añadir tu widget de feed de X (Twitter).
Una vez allí, podrás elegir la ubicación de tus publicaciones en X.
Si quieres mostrar incrustaciones adaptativas de X (Twitter) en la barra lateral, haz clic en el panel «Barra lateral ».
O bien, puedes hacer clic en «Pie de página» para empezar a mostrar X entradas en el pie de página de tu sitio web.
Para este ejemplo, utilizaremos una barra lateral de WordPress.
Para añadir un nuevo widget, haga clic en el icono más (+) de la parte inferior.
Una vez hecho esto, selecciona el widget «X (Twitter) Feed» de entre las opciones disponibles para continuar.
Ahora puedes completar la inserción de tu feed de X (Twitter) haciendo clic en el botón «Actualizar ».
Así de fácil, puedes tener un feed de elementos incrustados de X (Twitter) adaptables en la barra lateral o en el pie de página.
¡Y ya está!
Como puedes ver, añadir elementos incrustados adaptables de X (Twitter) a tu página web puede ser muy fácil con la ayuda de X (Twitter) Feed Pro.
Ahora puedes mostrar publicaciones relevantes de X para mantener el interés de los visitantes, aumentar tu número de seguidores en X (Twitter), impulsar tus conversiones y mucho más.
¿Quieres integrar feeds adaptativos de X (Twitter)? ¡Haz clic aquí para conseguir X (Twitter) Feed Pro para tu página web!
Ya que estás aquí, no te olvides de echar un vistazo a esta lista con las mejores formas de ganar dinero en X (Twitter).
Si te ha resultado útil, ¿por qué no nos sigues en Facebook y X (Twitter) para obtener más consejos y trucos informativos sobre las redes sociales?
