¿Quieres mostrar incrustaciones de Twitter con capacidad de respuesta para atraer a los visitantes del sitio web?
Si quieres captar la atención de todos los que visitan tu sitio web, una solución fácil es incrustar mensajes de Twitter con capacidad de respuesta.
Pero añadir incrustaciones responsivas de Twitter por ti mismo puede ser confuso, especialmente si no estás acostumbrado a manejar código.
En este artículo, te guiaremos a través del proceso de incrustación de feeds de Twitter en tu sitio web.
Pero primero, echemos un vistazo a las diferentes formas de hacer que tus incrustaciones de Twitter respondan.
O puede hacer clic aquí para ir directamente al tutorial.
Formas de añadir incrustaciones responsivas de Twitter en tu sitio web
Para incrustar contenido de Twitter asegurándose de que los tweets responden, hay 2 opciones que puede utilizar:
- Manualmente: Genera un código de incrustación, modifica el código para que sea responsive y añádelo a tu sitio.
- De forma automática: Utiliza un plugin de redes sociales que muestre automáticamente los feeds de Twitter adaptados a dispositivos móviles.
Si optas por la forma manual, tendrás que abrir el generador oficial de códigos de inserción de Twitter publish.twitter.com en tu navegador.
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 tweets no respondan cada vez si utilizas la forma manual. Para solucionar este problema, puedes añadir este código CSS.
.twitter-timeline {
width: 100vw !important;
}
Y si quieres personalizar tus publicaciones de Twitter utilizando iFrames, tendrás que editar manualmente el código aún más o contratar a un desarrollador.
Como puedes ver, incrustar contenido responsivo de Twitter puede llevar mucho tiempo y ser complicado si utilizas este método.
¿Qué es mejor: iFrame o Twitter Embeds?
Aunque algunas personas utilizan iFrames para mostrar el contenido de Twitter, en realidad puede perjudicar a su 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.
Como resultado, los visitantes en dispositivos móviles podrían no ser capaces de ver sus tweets correctamente.
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 modo automático para incrustar publicaciones de Twitter responsive con facilidad. Puedes utilizar un plugin de WordPress que puede conectarse con Twitter utilizando su API y agregar tweets en tu sitio.
Veamos este método a continuación.
La forma más fácil de insertar contenido responsivo en Twitter
Si buscas la forma más sencilla de incrustar contenido de Twitter, la mejor opción es probar un plugin como Twitter Feed Pro.
Usando Twitter Feed Pro, puedes crear, personalizar e incrustar feeds de Twitter responsivos en tu sitio web con facilidad - sin necesidad de HTML, Javascript, CSS personalizado, o cualquier código.
Sólo tienes que seguir una sencilla guía de 3 pasos, y podrás tener un hermoso feed de Twitter listo para funcionar. Puedes incrustar una línea de tiempo de Twitter, hashtag, resultados de búsqueda, línea de tiempo de inicio y mucho más.
Dado que Twitter Feed Pro copiará automáticamente el diseño de tu sitio web, tu contenido de Twitter se adaptará perfectamente al aspecto de tu marca desde el primer momento.
A continuación, puede personalizar aún más su feed de Twitter eligiendo una plantilla prediseñada que desee importar.
Para una mayor personalización, el plugin viene con un editor visual en el que puedes configurar el diseño, el color, el número de tweets, el estilo de la cabecera, cargar más botones y mucho más.
Además, puedes hacer un seguimiento de todos los cambios con la vista previa en directo.
El plugin tiene un sistema de caché inteligente que guarda una copia de tu contenido de Twitter. Así, su sitio puede mostrar la copia guardada a los visitantes en lugar de cargar sus tweets 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 Twitter Feed Pro guarda una copia de seguridad, tus tweets incrustados estarán en línea incluso cuando Twitter esté temporalmente fuera de servicio.
En definitiva, es el mejor plugin de Twitter y una solución fantástica si quieres incrustaciones de Twitter con capacidad de respuesta.
¿Listo para incrustar feeds de Twitter? Hazte con tu copia de Twitter Feed Pro hoy mismo.
Ahora, vamos a seguir adelante y ver cómo se puede utilizar este plugin para añadir responsive Twitter incrustaciones a su sitio.
Cómo insertar un feed de Twitter responsivo en tu sitio web
Para empezar a añadir incrustaciones de Twitter con capacidad de respuesta, sólo tienes que seguir las instrucciones paso a paso que se indican a continuación:
Paso 1: Instalar y activar Twitter Feed Pro
Puedes empezar por conseguir una copia del plugin Twitter Feed Pro desde aquí. Una vez que tengas el plugin, instálalo y actívalo en tu sitio 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 ir al paso 2 y crear un feed de Twitter responsivo.
Paso 2: Crear un feed de Twitter
Como el plugin viene con un sencillo flujo guiado, puedes crear un nuevo feed de Twitter con unos pocos clics.
En primer lugar, abra su panel de control de administración y navegue por el menú Twitter Feed " Todas las fuentes antes de hacer clic en el botón Añadir nuevo en la parte superior.
A continuación, el plugin le pedirá que elija el tipo de Twitter incrustaciones que desea en su sitio web. Hay 6 opciones entre las que puedes elegir, y cada una mostrará tweets de una fuente diferente.
- Cronología de usuarios: Elige los perfiles de Twitter cuyos tweets quieras incrustar
- Hashtag: Selecciona hashtags específicos y luego incrusta los tweets con ese hashtag
- Línea de tiempo de inicio: Incrusta tuits de la cronología de inicio de tu cuenta.
- Buscar: Elige términos de búsqueda e incrusta los resultados de la búsqueda de Twitter en tu sitio.
- Menciones: Muestra los tweets que mencionan la cuenta de Twitter de tu marca.
- Listas: Mostrar contenido de la lista de Twitter seleccionada
Incluso puede seleccionar más de una opción si desea combinar diferentes tipos de feeds en 1 feed de Twitter.
Para continuar, seleccione su tipo de feed de Twitter y haga clic en el botón Siguiente.
En nuestro ejemplo, utilizaremos un feed de hashtags para mostrar incrustaciones de Twitter con capacidad de respuesta.
Una vez creado tu feed de Twitter, puedes conectarlo a tu cuenta de Twitter en el paso 3.
Paso 3: Conecte su cuenta de Twitter
Para mostrar incrustaciones responsivas en tu sitio, el plugin se conectará ahora a tu cuenta de Twitter.
Para ello, en primer lugar, haz clic en el botón Conectar .
A continuación, Twitter Feed Pro te pedirá acceso de sólo lectura a tu cuenta. El plugin puede utilizar el acceso para ver la información de Twitter, pero no puede hacer ningún cambio en tu cuenta.
Como resultado, el plugin Twitter Feed Pro es completamente seguro.
Para ello, basta con hacer clic en el botón Autorizar aplicación .
Una vez hecho esto, Twitter Feed Pro abrirá su sitio web para que pueda añadir una fuente para su feed de Twitter.
Una fuente es el perfil de Twitter, hashtag, término de búsqueda, lista, etc. que desea incrustar en su sitio.
Para continuar, introduzca la fuente en la ventana emergente y haga clic en Siguiente.
Para esta respuesta en Twitter, utilizaremos el hashtag "KEEB_PD" como fuente.
Ahora que ya has conectado tu feed a Twitter y añadido tu fuente, es hora de personalizarlo.
Paso 4: Personaliza tus incrustaciones responsivas de Twitter
Para ayudarte a configurar rápidamente cómo aparecerán los tweets responsivos en tu sitio, 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
- Últimos tweets
- Widget
Haga clic en Siguiente una vez que elija la plantilla de alimentación que prefiera.
Ahora, estás listo para personalizar tu feed de Twitter usando el editor de feed en vivo. En el lado izquierdo, puedes encontrar las opciones de personalización para cambiar 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.
También puedes utilizar las opciones de moderación de la configuración del feed para seleccionar los tweets que aparecen en tu sitio.
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 cambiar el diseño de los tweets en tu sitio web.
Para ello, busque la opción Feed Layout a la izquierda y haga clic en ella.
A continuación, Twitter Feed Pro te mostrará 3 diseños que puedes elegir: Lista, Carrusel y Mampostería.
Veámoslos a continuación:
Si quieres mostrar los tweets de forma similar al sitio oficial de Twitter, puedes optar por el diseño de lista .
Además, de esta forma tu feed de Twitter será claramente visible en tu página web.
Si desea utilizar columnas para mostrar los elementos incrustados de Twitter, puede utilizar el diseño de mampostería.
Puedes mostrar toneladas de tweets a la vez utilizando este diseño.
Si eliges la opción de diseño en carrusel , podrás mostrar tus tweets en una presentación interactiva de 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 Twitter.
Esta vez, puedes elegir los colores de tu Twitter responsive.
En primer lugar, haga clic en la opción Combinación de colores .
Twitter Feed Pro viene con 4 opciones de esquema de color que puede probar:
- Heredar del tema: Copia los colores de tu tema de WordPress para tus tweets.
- 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 inserciones de Twitter? Puedes utilizar los botones restantes para configurar el estilo de la cabecera, el diseño de los botones, el número de tweets, 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 Twitter.
En el paso 5, puede finalmente incrustar este feed de Twitter en su sitio web WordPress utilizando este plugin.
Paso 5: Añade incrustaciones de Twitter con capacidad de respuesta en tu sitio web
Con la ayuda de Twitter Feed Pro, hay 2 maneras de incrustar contenido de Twitter en su sitio web:
- Añadir incrustaciones de Twitter con capacidad de respuesta en una página web
- Añadir incrustaciones de Twitter en la barra lateral o el pie de página del sitio web
Añadir incrustaciones de Twitter con capacidad de respuesta en una página web
Como el plugin es tan fácil de usar, puedes empezar a incrustar tu feed de 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 hecho esto, el plugin te mostrará una ventana emergente con las diferentes formas en que puedes incrustar los feeds de 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 (+).
Utilizando la barra de búsqueda de la parte superior, busque el bloque "twitter feed" y, a continuación, haga clic en el bloque Twitter Feed de la parte inferior.
A continuación, verás tu incrustación de Twitter en el editor de WordPress.
Por último, haz clic en el botón Actualizar y tu Twitter estará en línea.
Si abres tu página web, podrás ver cómo quedan tus incrustaciones responsivas de Twitter.
Como puedes ver, Twitter Feed Pro hace que sea muy fácil mostrar contenido de Twitter compatible con dispositivos móviles en tu sitio web.
Con esto, veamos la siguiente forma de incrustar feeds de Twitter.
Añada inserciones de Twitter con capacidad de respuesta en la barra lateral o el pie de página del sitio web
La siguiente opción es utilizar un widget de Twitter para mostrar los tweets en la barra lateral o en el pie de página de tu sitio 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 vivo, primero, abre el menú Twitter Feed " All Feeds desde tu panel de WordPress.
Una vez hecho esto, haz clic en el feed de Twitter que quieras incrustar.
Como puedes ver, es superfácil reabrir un feed de 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 puede utilizar la ventana emergente para crear un nuevo widget de Twitter que muestre los tweets en respuesta.
A continuación, haga clic en el botón Añadir a un widget de la ventana emergente.
Ahora, el plugin abrirá la página de widgets de tu sitio, donde podrás añadir tu widget de Twitter.
Una vez allí, puedes elegir la ubicación de tus tweets.
Si quieres mostrar incrustaciones responsivas de Twitter en la barra lateral, haz clic en el panel Barra lateral .
O puede hacer clic en Pie de página para empezar a mostrar los tweets en el pie de página de su 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 Twitter Feed entre las opciones disponibles para continuar.
Ahora puede terminar de incrustar su feed de Twitter haciendo clic en el botón Actualizar.
Así de fácil, puedes tener un feed de incrustaciones de Twitter en tu barra lateral o pie de página.
¡Y ya está!
Como puedes ver, añadir incrustaciones responsivas de Twitter a tu sitio puede ser super fácil con la ayuda de Twitter Feed Pro.
Ahora puede mostrar tweets relevantes para mantener el interés de los visitantes, hacer crecer sus seguidores de Twitter, aumentar sus conversiones y mucho más.
¿Quieres incrustar feeds de Twitter? Haz clic aquí para obtener Twitter Feed Pro para tu sitio web.
Ya que estás aquí, no olvides consultar esta lista de las mejores formas de ganar dinero en Twitter.
Si te ha parecido útil, síguenos en Facebook y Twitter para conocer más trucos y consejos sobre redes sociales.
