Después de administrar WPBeginner durante más de una década, hemos aprendido que construir una comunidad sólida es clave para un blog exitoso. Debemos nuestro éxito a nuestros lectores leales, y siempre estamos buscando nuevas formas de conectar con ellos.
Una excelente manera de construir comunidad es mostrando tus tuits recientes en tu sitio de WordPress. Esto mantiene tu sitio fresco y permite a los visitantes ver lo que estás haciendo en las redes sociales.
Hemos probado muchas formas de mostrar tuits en sitios de WordPress, y compartiremos nuestros tres mejores métodos para hacer exactamente eso. Todos estos métodos son fáciles para principiantes, por lo que podrás agregar fácilmente tu feed de Twitter a tu sitio.
¿Por qué mostrar tuits recientes en tu sitio de WordPress?
X/Twitter es una de las plataformas de redes sociales más populares del mercado. Mostrar tuits recientes en tu sitio web de WordPress puede mejorar tu presencia en línea y tu participación de varias maneras.
Para empezar, cuando los usuarios visitan tu sitio web y ven tu feed de redes sociales, podrían sentirse lo suficientemente intrigados como para hacer clic en tu cuenta de Twitter y seguirte, aumentando tu alcance.
Además, los tuits pueden servir como una actualización en tiempo real sobre lo que está sucediendo en tu sitio web o empresa. Esto puede fomentar la participación de tu audiencia, ya que pueden interactuar directamente con tus tuits.
Los tuits recientes también pueden actuar como prueba social en tu sitio de WordPress. Puedes retuitear reseñas positivas o personas que recomiendan tus productos, lo que ayuda a generar confianza con suscriptores o clientes.
Con esto en mente, veamos los diferentes métodos para mostrar tuits recientes en tu sitio web de WordPress. Puedes usar los enlaces rápidos a continuación para saltar a un método específico:
- Método 1: Incrustar tuits manualmente en el editor de bloques de Gutenberg (sin plugin)
- Método 2: Mostrar tuits recientes usando un plugin de feed de Twitter (recomendado)
- Method 3: Display Latest Tweets in WordPress With Twitter Publish (No Plugin + HTML)
Método 1: Incrustar tuits manualmente en el editor de bloques de Gutenberg (sin plugin)
El primer método para mostrar tus tuits recientes en WordPress es incrustar manualmente tu perfil o línea de tiempo de Twitter en tu página, publicación o widget de WordPress (para usuarios de temas clásicos).
Al igual que al agregar un video de YouTube, WordPress facilita la incrustación de contenido de Twitter, como un tuit individual o una línea de tiempo. Su función oEmbed puede convertir automáticamente una URL de contenido en un código de incrustación cuando se pega en el editor de bloques.
Primero, necesitas encontrar y copiar la URL del perfil de Twitter o del tuit que deseas incrustar.
Por ejemplo, la URL del perfil de Twitter de WPBeginner es https://twitter.com/wpbeginner
Mientras tanto, la URL de un tuit individual se ve así: https://twitter.com/wpbeginner/status/1604852592827326464
A continuación, simplemente sigue uno de los métodos a continuación:
Mostrar tuits recientes en una publicación o página de WordPress
Primero, inicia sesión en tu panel de WordPress y abre el editor de bloques para una publicación o página de WordPress.
Si deseas crear una nueva publicación o página, puedes hacerlo yendo a Publicaciones/Páginas » Agregar nueva.
Luego, simplemente pega la URL del perfil de Twitter que copiaste anteriormente en el área 'Escribe / para elegir un bloque'.
Puedes ver esto resaltado a continuación.
Una vez que hayas hecho eso, el bloque se convertirá inmediatamente en un bloque de línea de tiempo de Twitter que muestra los Tweets recientes de esa cuenta en particular.
En la barra lateral de configuración del bloque, puedes elegir redimensionar el bloque para dispositivos más pequeños para hacerlo más adaptable a la visualización móvil.
Además, siéntete libre de agregar más bloques a la página o publicación para animar a los usuarios a seguir tu cuenta de Twitter.
Una vez hecho, simplemente haz clic en 'Actualizar' o 'Publicar' para que los cambios se hagan en vivo.
Este método agrega tus tuits recientes dentro de una caja con un deslizador vertical. La caja incluye los 20 tuits más recientes y el botón ‘Ver más en Twitter’ al final.
Así se ve nuestra línea de tiempo de Twitter:
Si usas un tema de bloques de WordPress, entonces también puedes usar este mismo método para incrustar un feed de Twitter en el Editor de Sitio Completo y mostrar tuits recientes en un patrón o parte de plantilla.
Puedes aprender más sobre esto en nuestra guía completa sobre la edición completa del sitio en WordPress.
Mostrar tuits recientes en un área de widgets de WordPress
Si usas un tema clásico de WordPress y quieres mostrar tus tuits más recientes en un área de widgets (como una barra lateral), entonces solo sigue estos pasos.
Primero, ve a Apariencia » Widgets. Luego, haz clic en el botón ‘+ Añadir nuevo’ en el área de widgets seleccionada y elige el widget de Twitter.
Desde aquí, solo pega la URL de la cuenta o publicación de Twitter en el campo correspondiente.
Luego, haz clic en ‘Incrustar’.
Después, puedes actualizar tus widgets y previsualizar el widget de tuits en vivo en tu sitio.
Así es como aparece la línea de tiempo en nuestra barra lateral de WordPress:
Método 2: Mostrar tuits recientes usando un plugin de feed de Twitter (recomendado)
El segundo método para agregar tuits recientes a tu sitio de WordPress es con un plugin de Twitter. La razón por la que recomendamos este método es que ofrece muchas más opciones de personalización que el método anterior, lo que te permite ajustar el feed al diseño de tu página.
Para esto, usaremos Smash Balloon Custom Twitter Feeds. Este plugin ayuda a crear hermosas fuentes sociales de diferentes tipos. Puedes mostrar tweets basados en hashtags, términos de búsqueda, menciones, líneas de tiempo y más.
Nota: Aunque existe un plugin gratuito de Custom Twitter Feeds, este artículo utilizará la versión Custom Twitter Feeds Pro. Viene con características mucho más avanzadas como filtrado de línea de tiempo y combinación de múltiples fuentes de Twitter en una.
Primero, necesitarás instalar y activar el plugin de WordPress. Una vez que esté activo, ve a tu área de administración de WordPress, navega a Twitter Feed » Settings y pega tu clave de licencia en el campo correspondiente.
Después de eso, necesitas activar la licencia y hacer clic en ‘Guardar Cambios’.
Ahora, simplemente ve a Twitter Feed » All Feeds.
Luego, haz clic en el botón ‘+ Add New’.
Si esta es la primera vez que agregas una fuente de Twitter usando Smash Balloon, se te pedirá que verifiques tu dirección de correo electrónico.
Simplemente haz clic en el botón ‘Connect’ para hacerlo y sigue las instrucciones en pantalla.
Una vez que hayas terminado, regresarás a la página del plugin Custom Twitter Feeds y se te pedirá que selecciones un tipo de fuente.
Con Custom Twitter Feeds, puedes elegir incrustar una fuente de línea de tiempo de usuario, una fuente de hashtag o una fuente de búsqueda. Para este ejemplo, usaremos la primera opción. Una vez que hayas hecho tu elección, simplemente haz clic en ‘Next.’
En la siguiente pantalla, puedes escribir el nombre de usuario de Twitter que deseas incrustar en tu sitio web de WordPress.
Después de eso, haz clic en ‘Siguiente’ de nuevo.
Ahora, elijamos una plantilla para el feed de Twitter. Hay 7 para elegir, y siempre puedes cambiarla más tarde si no crees que se ajuste al diseño de tu página.
Después de que hayas tomado tu decisión, procede a hacer clic en ‘Siguiente’.
En esta etapa, deberías llegar a la interfaz de edición del feed de Twitter. Verás una vista previa en vivo en el lado derecho de la página y un panel izquierdo donde puedes configurar cómo se ve el feed.
Hay dos pestañas: ‘Personalizar’ y ‘Configuración’.
Empecemos con Personalizar. Si eliges la opción ‘Diseño del feed’, entonces puedes elegir entre los diseños de feed disponibles (como lista, mampostería o carrusel), establecer el número de tuits a mostrar, ajustar la altura del feed, etc.
Nota: Debido a las limitaciones de la API, Smash Balloon solo puede mostrar de 1 a 30 tuits al principio, pero se acumularán más con el tiempo.
Una vez que hayas terminado con esas configuraciones, simplemente haz clic en el botón ‘Personalizar’ en la parte superior para volver al menú principal.
Otra cosa que puedes hacer es habilitar el botón Cargar más, que aparecerá debajo de tus tuits mostrados. Es una función útil si tienes muchísimos tuits pero no puedes mostrarlos todos en la misma página.
Simplemente haz clic en la opción ‘Botón Cargar más’, seguido del botón ‘Habilitar’. Después de eso, puedes personalizar la apariencia del botón.
Si cambias a la pestaña ‘Configuración’, podrás ver opciones para agregar más fuentes de feed, aplicar filtros de tuits y usar funciones avanzadas (como agregar CSS personalizado).
También puedes hacer clic en el botón ‘Borrar caché de feed’ para eliminar la caché de feed anterior. La próxima vez que el plugin necesite mostrar tu feed de Twitter, tendrá que recuperar los tuits más recientes de los servidores de X/Twitter en lugar de usar los datos cacheados antiguos.
Intentemos agregar filtros a tus tuits haciendo clic en la opción ‘Filtros’.
Aquí, puedes elegir incluir respuestas y retuits, mostrar tuits basados en qué palabras están permitidas o bloqueadas, o ocultar tuits específicos.
Una vez que estés satisfecho con cómo se ve el Feed de Twitter, puedes hacer clic en el botón ‘Guardar’.
Para agregar el Feed de Twitter a tu página o área de widget, simplemente haz clic en el botón ‘Incrustar’ en la esquina superior derecha.
Después de eso, aparecerá una ventana emergente que te mostrará cómo mostrar el Feed de Twitter: con un shortcode, un bloque o un widget.
Independientemente del método que elijas, lo primero que necesitas hacer es copiar el shortcode porque lo necesitarás.
Luego, si quieres incrustar el feed de Twitter en una página, haz clic en el botón ‘+ Agregar a una página’.
Una vez que hagas eso, puedes seleccionar una página existente de tu sitio web de WordPress y hacer clic en ‘Agregar’.
Luego serás dirigido al editor de bloques de WordPress de la página que elegiste.
Haz clic en el botón ‘+’ para agregar un bloque en cualquier parte de la página y selecciona el bloque de Feed de Twitter.
Ahora, es posible que el Feed de Twitter que creaste anteriormente no aparezca de inmediato.
Si esto te sucede, simplemente pega el shortcode en el campo ‘Configuración de Shortcode’ en la barra lateral de configuración del bloque.
Después de eso, haz clic en ‘Aplicar Cambios’.
Una vez hecho esto, puedes continuar y hacer clic en ‘Actualizar’ para que los cambios se apliquen en vivo.
Así es como se ve el Feed de Twitter en nuestro sitio de demostración:
Si deseas mostrar tu Feed de Twitter en un área de widget, simplemente haz clic en la opción ‘+ Agregar a un Widget’. Luego serás redirigido al editor de widgets.
Luego, simplemente busca y selecciona el widget ‘Feed de Twitter’.
Similar al método anterior, simplemente pega el shortcode en la barra lateral de configuración del bloque y haz clic en ‘Aplicar Cambios’.
Luego verás tu Feed de Twitter recién creado en la vista previa en vivo.
Finalmente, haz clic en ‘Actualizar’ para que los cambios sean definitivos.
Luego puedes visitar tu sitio web en vivo para ver cómo se ve el feed:
Método 3: Mostrar los últimos tweets en WordPress con Twitter Publish (sin plugin + HTML)
El último método te permite agregar publicaciones recientes de Twitter usando la función Twitter Publish.
Twitter Publish te permite crear fácilmente el código de inserción para varios tipos de contenido de Twitter, incluyendo un tweet, un video, una línea de tiempo o un botón (como un botón de Seguir o Compartir).
Este método te permite personalizar cómo se ve el elemento incrustado antes de agregarlo a tu blog de WordPress o sitio web. No es tan potente como el segundo método, pero vale la pena mencionarlo porque es gratuito.
Para este tutorial, te mostraremos cómo usar Twitter Publish para incrustar una línea de tiempo. Primero, necesitas visitar el sitio web de Twitter Publish y luego pegar la URL de tu perfil de Twitter en el cuadro ‘¿Qué te gustaría incrustar?’.
Una vez hecho esto, haz clic en el ícono de la flecha.
Después de eso, se te pedirá que elijas una opción de visualización: Línea de tiempo incrustada o Botones X/Twitter.
Deberías elegir la opción ‘Línea de tiempo incrustada’, ya que quieres mostrar tu línea de tiempo de Twitter con los tuits recientes.
Al seleccionar la opción de visualización, se creará instantáneamente el código para incrustar tus tuits recientes. Puedes proceder a hacer clic en ‘Copiar código’ para incrustar el código HTML personalizado de inmediato.
Alternativamente, haz clic en ‘Establecer opciones de personalización’ para personalizar la apariencia de la línea de tiempo incrustada.
Aquí, puedes personalizar la altura y el ancho de la línea de tiempo, elegir un modo claro u oscuro, y habilitar una traducción de idioma para los tuits si es necesario.
Puedes ver cómo se verá el elemento incrustado debajo de la configuración. Una vez que termines, simplemente haz clic en ‘Actualizar’.
El código para incrustar ahora incluirá la configuración de personalización que has elegido para la línea de tiempo.
Simplemente haz clic en ‘Copiar código’ para continuar.
Ahora, regresa a tu panel de WordPress y abre el editor de bloques para una página, publicación o área de widget.
Después de eso, simplemente haz clic en el botón ‘+’ para agregar un bloque en cualquier lugar del editor y selecciona el widget o bloque de HTML personalizado.
Ahora, procede a pegar el código para incrustar de antes en el campo.
Una vez hecho, puedes hacer clic en el botón ‘Vista previa’ para ver cómo se ve el feed.
Después de eso, siéntete libre de agregar más elementos a la página, publicación o área de widget. Luego, simplemente actualízala o publícala.
Así es como se ve nuestro sitio web de demostración:
Consejo extra: Agrega más feeds de redes sociales a WordPress
¿Utilizas otras plataformas de redes sociales para tu marca o negocio? Si es así, es posible que desees mostrar otros feeds sociales además de Twitter en tu sitio web.
Al mostrar diferentes feeds sociales en tu sitio de WordPress, puedes informar a los visitantes en qué plataformas pueden seguirte, aumentando tu número de seguidores.
Mostrar tus feeds sociales también tiene una ventaja clave sobre mostrar los habituales botones de íconos sociales. Puede mostrar a los visitantes qué contenido se perderían al no seguirte en tus redes sociales, creando un 'miedo a perderse algo'.
Con Smash Balloon, puedes mostrar y personalizar todo tipo de feeds de redes sociales en tu sitio web de WordPress. De esta manera, todos los feeds se ven bien con el tema que estás utilizando.
Simplemente consulta los tutoriales a continuación sobre cómo mostrar diferentes feeds sociales en WordPress:
- Cómo crear una fuente personalizada de Facebook en WordPress
- Cómo crear una fuente personalizada de fotos de Instagram en WordPress
- Cómo mostrar los videos más recientes de un canal de YouTube en WordPress
- Cómo incrustar videos de TikTok en WordPress (métodos fáciles)
- Cómo mostrar reseñas de Google, Facebook y Yelp en WordPress
Esperamos que este artículo te haya ayudado a aprender cómo mostrar tweets recientes en WordPress. También puedes consultar nuestra guía sobre cómo publicar automáticamente nuevas fotos de Instagram en WordPress o nuestra selección experta de los mejores plugins de redes sociales para WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dayo Olobayo
¿Hay alguna forma de personalizar la apariencia de la visualización de tweets recientes en mi sitio de WordPress? Por ejemplo, ¿puedo cambiar el tamaño de fuente o los colores para que coincidan con el diseño de mi sitio web?
Comentarios de WPBeginner
Con la opción de Smash Balloon, puedes personalizar la apariencia del feed.
Kate
Hola, estaba siguiendo el primer conjunto de instrucciones, pero cuando pego mi URL de Twitter en el cuadro de texto, no pasa nada. ¿No sé si importa que tenga Divi Builder habilitado en mi sitio de WordPress?
Soporte de WPBeginner
Si no se incrusta correctamente, deberías intentar agregar el bloque de incrustación de Twitter y colocar la URL allí.
Administrador
Glenn
Este parece ser un artículo antiguo... me pregunto cómo puedo mostrar mi línea de tiempo... no mis tuits, sino las personas a las que sigo. La página de Widgets de Twitter solo muestra Búsqueda, no mi línea de tiempo ni una lista.
Gracias.
Glenn
Minhazul Islam
¿Hay algún plugin para hacer la misma tarea?
Greg McGee
He creado con éxito un feed de Twitter en mi sitio de WordPress. ¡¡¡Yaaay!!! Ahora las malas noticias. Desaparece después de 3 segundos. ¡¡¡Booo!!! ¿Dónde puedo cambiar el parámetro que establece este límite? Se esconde muy bien de mí. Pero tampoco soy tan inteligente.
Gopal sharma
This is the best tutorial i found ever..
onya icha
En el móvil se muestran todos mis tuits y hacen que mi sitio web se vea raro. Por favor, ¿cómo puedo solucionar este problema?
Simeon Opeyemi
¡Gracias! Me funcionó.
gertrude
Agregué esto, pero aparte de un enlace a mi Twitter, no hace nada. Tengo WordPress 3.8.1 y activé el tema predeterminado, luego volví al que estoy usando. Todavía nada. Si hay alguna manera en que ustedes puedan ayudar, sería genial. Gracias
Soporte de WPBeginner
Intenta desactivar todos los plugins y luego prueba, especialmente si estás usando algún plugin relacionado con Twitter. Si esto no funciona, entonces necesitas dividir el código del widget en dos partes. Pega la parte de JavaScript que comienza con <script> en el header.php de tu tema, y la parte del enlace en un widget de texto.
Administrador
K.T. Lynch
Por alguna razón, las etiquetas HTML de cierre se eliminan una vez que presiono guardar. Esto aparece en mi barra lateral de WP:
Tweets de @lynchkt !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);
Los “Tweets de @lynchkt” son un hipervínculo, pero por lo demás no funciona.
Soporte de WPBeginner
Esto podría suceder por muchas razones. Si estás usando WordPress 3.8, intenta actualizar a la versión 3.8.1. Prueba a cambiar temporalmente a un tema predeterminado y ve si sigues recibiendo este error.
Administrador
Ines TR
¡Hola!
Veo un montón de palabras en mi página de blog después de pegar el widget, ¿por qué?
Lo guardé y lo intenté varias veces pero no puedo solucionar el problema.
Abdul
¿Cómo lo pongo en una página de WordPress?
Soporte de WPBeginner
Puedes pegar el mismo código en páginas de WordPress, así como en publicaciones.
Administrador
Douglas Vautour
¡Muchas gracias! Todos los widgets de Twitter que encontré querían demasiada información. Me siento mejor al obtenerla de la fuente.
Ann
¡Hola!
¡Gracias por compartir esto! ¡Mis widgets normales de Twitter simplemente no funcionaban!
Nancy Closson
Estoy buscando un widget que te permita seleccionar tuits de una cuenta de Twitter en lugar de mostrar todos o los tuits recientes. ¿Es posible esta personalización y es eso lo que describes con la lista de favoritos? Gracias.
Soporte de WPBeginner
Sí, esta personalización es posible pero con estos widgets. El widget de favoritos mostrará los tuits que hayas marcado como favoritos.
Administrador
gaston
¡Muy útil!
¡Lo resolví en un instante!
¡Gracias!
Shana Manuel
¡Guau! ¡Esto me tomó 5 minutos configurarlo y soy un novato total! Gracias por este artículo.
Founterior
¡Funciona perfectamente!
patty
Genial. ¡Gracias por esto!
Bill Hutchison
Gracias por esto. He usado widgets para esto en el pasado, pero generalmente no he estado satisfecho con los resultados. Esta parece ser la mejor solución para incluir Twitter en la barra lateral.
Gracias de nuevo.
Joan
Tengo una pregunta:
¿Es posible personalizar el peso del widget de Twitter? Con el código antiguo de Twitter era posible.
Gracias
Chris Race
¡Gracias por este artículo! Estaba buscando un nuevo widget porque el mío dejó de funcionar, y encontré esta solución sencilla. ¡Genial!
Rickard
No lo sé, pero cada solución que he intentado usar está afectando el panel de administración más a menudo de lo que cualquiera puede considerar aceptable.
¿Hay alguna manera de combatir el "esperando a platform.twitter.com" que rompe muchas funciones en el panel de administración de WP?
Supongo que esto sucede debido a una sobrecarga en platform.twitter.com (?) y las páginas en el panel de administración de WP seguirán cargándose para siempre...
¿Podría haber una manera de establecer un límite de tiempo para la llamada, y si no se encuentra, ignorarla?
Personal editorial
Esto no debería tener ningún impacto en tu panel de administración de WordPress. Estás agregando esto en los widgets, que solo se cargan en el front-end de tu sitio web.
Administrador
Julien Maury
No podría estar más de acuerdo. Hay otra cosa genial con los widgets, usan streams (ver APIs de streaming) para que puedas mostrar UNA GRAN CANTIDAD de tweets sin preocuparte por los límites de tasa.
Y si quieres obtener una característica especial, agregarás data-chrome="noheader,nofooter,noborders,transparent" en el enlace. Estos nuevos parámetros te permiten hacer que los widgets sean "amigables con el diseño".
Gordon Chambers
Hola,
He estado intentando lo anterior, pero cuando hago clic en guardar, cambia el valor agregado en la caja de ID a un número acortado. ¿He intentado agregar mis dos cuentas de Twitter y hace lo mismo?
Julien Maury
Eso es raro. Revisa las comillas, tienen que ser comillas reales, no como en esta sección de comentarios.