Cómo incrustar widgets responsivos de Twitter en tu sitio web

¿Quieres que tus incrustaciones de Twitter tengan capacidad de respuesta? Nosotros te ayudamos.

Con tanta gente navegando por Internet desde el móvil, es más importante que nunca que su sitio web sea apto para móviles.

Y al mostrar incrustaciones de Twitter con capacidad de respuesta, puedes atraer a los visitantes de todos los dispositivos con tweets relevantes.

Hoy, compartiremos la forma más sencilla de personalizar tus incrustaciones de Twitter y hacerlas totalmente responsivas.

Pero primero, veamos las formas en que puedes habilitar una incrustación responsiva de Twitter en tu sitio web.

O puede hacer clic aquí y pasar al tutorial.

¿Hay alguna forma de hacer que los archivos incrustados de Twitter sean responsivos?

Sí, puedes hacer que tus incrustaciones de Twitter respondan utilizando 2 métodos diferentes.

• De forma manual: Utiliza el generador de inserciones de Twitter para crear un código, personalízalo con CSS e insértalo en tu sitio web.
• Es fácil: Utiliza un plugin de WordPress que pueda incrustar automáticamente el contenido de Twitter por ti

Como puedes ver, la forma manual puede ser mucho más lenta y difícil para las personas que no están acostumbradas a codificar.

Además, será mucho más difícil personalizar tus incrustaciones de Twitter, por lo que tus tweets podrían no coincidir con el diseño de tu sitio web.

Y si algo sale mal al añadir manualmente el código a su sitio web, no tendrá un equipo de asistencia que le ayude.

Por otro lado, puede evitar estos problemas con la ayuda de Twitter Feed Pro.

Con el plugin número 1 de Twitter para WordPress, podrás crear, personalizar e incrustar contenido de Twitter con unos simples clics.

¿Y lo mejor? Todas tus incrustaciones de Twitter serán automáticamente responsive. Así, los visitantes de todos los dispositivos podrán ver tus bonitos widgets de Twitter.

Sólo tienes que seguir el sencillo flujo guiado y tus inserciones de Twitter estarán listas para funcionar en línea en cuestión de minutos, sin necesidad de iFrames, códigos de inserción HTML, Javascript ni ningún tipo de codificación.

De este modo, puedes incrustar líneas de tiempo de perfiles de Twitter, feeds de hashtags, listas de Twitter, resultados de búsquedas y mucho más.

Además, tienes control total sobre el diseño de tus inserciones en Twitter. Incluso puedes importar una plantilla prediseñada para personalizarla de forma rápida y sencilla.

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

Además, un equipo de expertos en WordPress te ayudará en todo momento.

¿Preparado para incrustar contenido responsivo de Twitter? Consigue tu copia de Twitter Feed Pro aquí.

Con eso, vamos a seguir adelante y ver la forma más fácil de hacer widgets de Twitter sensible con este plugin.

Cómo incrustar widgets responsivos de Twitter en tu sitio web (de forma sencilla)

Si sigues las instrucciones paso a paso que se indican a continuación, podrás tener en tu sitio web un feed de inserciones de Twitter adaptadas a dispositivos móviles.

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.

Una vez que hayas instalado y activado Twitter Feed Pro, es hora de ir al paso 2 y crear tu widget.

Paso 2: Crear un nuevo widget de Twitter

Como el plugin tiene un flujo guiado de 3 pasos, te resultará fácil crear un nuevo widget para mostrar incrustaciones de Twitter con capacidad de respuesta.

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 deseas incrustar. Hay 6 opciones diferentes para elegir aquí:

• 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
• Inicio Timeline: Muestra todos los tweets y retweets de tu propia línea de tiempo de Twitter
• Buscar: Elige un término de búsqueda e incrusta los tuits coincidentes
• Menciones: Incrusta los tuits que mencionan el identificador de Twitter de tu marca
• 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 .

Ahora que has creado tu widget de Twitter, es el momento del paso 3, en el que lo conectas a tu cuenta de Twitter.

Paso 3: Conecte su cuenta de Twitter

Una vez que conectes tu cuenta de Twitter, tu widget podrá empezar a mostrar incrustaciones de Twitter en tu sitio.

¿Listo para empezar?

En primer lugar, haz clic en el botón Conectar de la ventana emergente.

Al hacerlo, se le redirigirá desde su sitio web a www.twitter.com en su navegador. Aquí, puedes dar al plugin acceso de sólo lectura a tu cuenta.

Como Smash Balloon es totalmente seguro, Twitter Feed Pro puede ver la información de Twitter y no tendrá permiso para hacer 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 inserciones de Twitter. Dependiendo del tipo de widget, puede ser una cuenta de Twitter, un hashtag, un término de búsqueda, etc.

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, 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 Twitter.

Ahora es el momento del paso 4, en el que puedes personalizar el aspecto de tus incrustaciones de Twitter.

Paso 4: Personaliza tus inserciones en Twitter

Lo mejor de Twitter Feed Pro es que el plugin hace que las inserciones de Twitter respondan automáticamente y copien el diseño de tu sitio web.

Así, puedes incrustarlo de inmediato y seguir teniendo un feed de bonitas incrustaciones de Twitter.

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

• Por defecto
• 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 inserciones de Twitter 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 incrustaciones de Twitter, primero, haz clic en la opción Diseño de la fuente de 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 las incrustaciones de Twitter sean fácilmente visibles en tu sitio web, puedes utilizar el diseño de lista .

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

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?

Sólo tienes que seleccionar el diseño de carrusel y mostrar un carrusel de diapositivas con tus inserciones de Twitter.

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

Si quieres más formas de personalizar tus incrustaciones de Twitter, haz clic en el botón Personalizar.

A continuación, puedes utilizar el editor de noticias en directo del complemento para cambiar los colores de tus inserciones de Twitter.

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 las opciones de personalización del plugin para personalizar el estilo del recuadro de tuits, la cabecera de Twitter, cargar más botones, el tamaño del feed y mucho más.

Como puedes ver, este plugin facilita la personalización y la incrustación de feeds de Twitter: ¡no se necesita 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 Twitter Responsive Embeds a WordPress

Como este plugin hace que tus inserciones de Twitter sean automáticamente responsivas, puedes seguir adelante e insertar tu widget de Twitter.

Con Twitter Feed Pro, puedes elegir entre 2 formas diferentes de incrustar tus widgets de Twitter:

• Añade incrustaciones de Twitter a tu página web
• Añade inserciones de Twitter en la barra lateral o el pie de página de tu sitio web

Veamos ambos métodos a continuación.

Añade inserciones de Twitter a tu página web

¿Listo para añadir widgets de Twitter a tu sitio web?

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

Al hacer clic, aparecerán las opciones de incrustación de este widget de Twitter. Puedes incrustarlo 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, simplemente haz clic en la página en la que deseas añadir el widget de Twitter responsivo y haz clic en 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, introduce "twitter feed" en la barra de búsqueda de la parte superior y, a continuación, haz clic en el bloque Twitter Feed de la parte inferior.

Con eso, el plugin añadirá automáticamente el widget de Twitter a tu página.

Para confirmar tu nuevo widget de Twitter, haz clic en el botón Actualizar de la parte superior. Como puedes ver, es muy fácil hacer que los widgets de Twitter respondan y añadirlos a tu sitio web.

Puedes abrir la página web y ver cómo quedan tus incrustaciones de Twitter.

Después de esto, veremos la siguiente forma de incrustar widgets de Twitter.

Añade inserciones de 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 Twitter a las áreas preparadas para widgets de tu sitio web.

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 Twitter que quieras incrustar.

Así de fácil, tu widget de Twitter estará abierto en el editor de live feed.

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 de Twitter.

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 Twitter estará activo en tu sitio web.

De este modo, cualquier persona que visite tu sitio web podrá ver tus inserciones de Twitter en el pie de página de tu sitio web:

¡Y ahí lo tienes!

En tan solo unos pasos, puedes tener un feed de archivos incrustados de Twitter con capacidad de respuesta para atraer a los visitantes, aumentar las conversiones y aumentar tus seguidores en las redes sociales.

Con la ayuda de Twitter Feed Pro, puedes mostrar fácilmente hermosos widgets de Twitter que se cargan perfectamente en todos los tamaños de pantalla, sin necesidad de tocar una sola línea de código.

¿Quieres hacer que Twitter responda? Obtenga Twitter Feed Pro para su sitio web aquí.

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 Twitter y Facebook para más tutoriales de marketing en redes sociales.