Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo mostrar los tweets recientes en WordPress (paso a paso)

Después de dirigir WPBeginner durante más de una década, hemos aprendido que construir una comunidad fuerte es clave para tener un blog correcto. Debemos nuestro éxito a nuestros fieles lectores, y siempre estamos buscando nuevas formas de conectar con ellos.

Una buena forma de crear comunidad es mostrar tus tweets recientes en tu sitio de WordPress. Así mantendrás tu sitio actualizado y los visitantes podrán ver lo que haces en los medios sociales.

Hemos probado muchas maneras de mostrar tweets en sitios WordPress, y vamos a compartir nuestros tres mejores métodos para hacer exactamente eso. Todos estos métodos son aptos para principiantes, por lo que podrás añadir fácilmente tu feed de Twitter a tu sitio.

How to Display Recent Tweets in WordPress

¿Por qué mostrar los Tweets recientes en su sitio WordPress?

X/Twitter es una de las plataformas de medios sociales más populares del mercado. Mostrar tweets recientes en su sitio web WordPress puede mejorar su presencia en línea y la participación de varias maneras.

Para empezar, cuando los usuarios visiten su sitio web y vean su feed de medios sociales, puede que se sientan lo suficientemente intrigados como para hacer clic en su cuenta de Twitter y seguirle, aumentando así su alcance.

Además, los tweets pueden servir como actualización en tiempo real acerca de lo que está ocurriendo en su sitio web o empresa. Esto puede fomentar la participación de su público, ya que pueden interactuar con sus tweets directamente.

Los tweets recientes también pueden actuar como prueba social en su sitio de WordPress. Puede retuitear reseñas positivas o personas que recomienden sus productos, lo que le ayudará a generar confianza entre suscriptores o clientes.

Con esto en mente, veamos los diferentes métodos para mostrar los tweets recientes en tu sitio web WordPress. Puede utilizar los enlaces rápidos a continuación para omitir un método específico:

Método 1: Incrustar Tweets manualmente en el editor de bloques de Gutenberg (sin plugins).

El primer método para mostrar tus tweets recientes en WordPress es incrustando manualmente tu perfil o cronología de Twitter en tu página, entrada o widget de WordPress (para usuarios del tema clásico).

Al igual que añadir un vídeo de YouTube, WordPress facilita incrustar contenido de Twitter, como un único tuit o una cronología. Su característica oEmbed puede convertir automáticamente una URL de contenido en un código incrustado cuando se pega en el editor de bloques.

En primer lugar, tienes que buscar y copiar la URL del perfil de Twitter o del tuit que quieras incrustar.

Por ejemplo, la URL del perfil de Twitter de WPBeginner es https://twitter.com/wpbeginner.

Mientras tanto, la URL de un solo tuit tiene este aspecto: https: //twitter.com/wpbeginner/status/1604852592827326464

A continuación, sólo tienes que seguir uno de los métodos siguientes:

Mostrar Tweets recientes en una entrada o página de WordPress

En primer lugar, acceda a su escritorio de WordPress y abra el editor de bloques de una entrada o página de WordPress.

Si quieres crear una nueva entrada o página, puedes hacerlo yendo a Entradas/Páginas ” Añadir nueva.

Clicking Add New Page in WordPress admin area

A continuación, sólo tienes que pegar la URL del perfil de Twitter que has copiado antes en la zona “Escribe / para elegir un bloque”.

Puede verlo resaltado a continuación.

Pasting a Twitter URL to the block editor

Una vez hecho esto, el bloque se convertirá inmediatamente en un bloque de cronología de Twitter que mostrará los Tweets recientes de esa cuenta en particular.

En la barra lateral de ajustes de bloque, puede elegir cambiar el tamaño del bloque para dispositivos más pequeños y hacerlo más adaptable a la visualización móvil.

Además, no dudes en añadir más bloques a la página o entrada para animar a los usuarios a seguir tu cuenta de Twitter.

Una vez hecho esto, basta con hacer clic en “Actualizar” o “Publicar” para que los cambios se hagan efectivos.

Publishing a page with a Twitter Feed

Este método añade tus tweets recientes dentro de una caja con un carrusel / control deslizante vertical. La caja incluye los 20 tweets más recientes y el botón ‘Ver más en Twitter’ al final.

Este es nuestro timeline de Twitter:

An example of a page with a Twitter Feed made with the built-in Twitter block

Si utiliza un tema en bloque de WordPress, también puede utilizar este mismo método para incrustar un feed de Twitter en el Editor de sitio completo y mostrar los tweets recientes en una parte del patrón o plantilla.

Puede obtener más información acerca de este tema en nuestra guía completa sobre la edición completa del sitio de WordPress.

Mostrar Tweets recientes en un widget de WordPress

Si utilizas un tema clásico de WordPress y quieres mostrar tus últimos tweets en una zona de widget (como una barra lateral), sólo tienes que seguir estos pasos.

En primer lugar, ve a Apariencia ” Widgets. A continuación, haz clic en el botón “+ Añadir nuevo” de la zona de widgets seleccionada y selecciona el widget de Twitter.

Adding a Twitter widget in WordPress

A partir de aquí, sólo tienes que pegar la URL de la cuenta de Twitter o de la entrada en el campo correspondiente.

A continuación, haz clic en “Incrustar”.

Embedding a Twitter profile in a WordPress widget area

A continuación, podrás actualizar tus widgets y obtener una vista previa del widget de Tweets en directo en tu sitio.

Así es como aparece la línea de tiempo en nuestra barra lateral de WordPress:

Example of a Twitter widget in a WordPress sidebar

El segundo método para añadir tweets recientes a tu sitio 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, permitiéndole ajustar el feed al diseño de su página.

Para ello, vamos a utilizar Smash Balloon Custom Twitter Feeds. Este plugin ayuda a crear hermosos feeds sociales de diferentes tipos. Puede mostrar tweets basados en hashtags, términos de búsqueda, menciones, líneas de tiempo y más.

Nota: Aunque existe un plugin gratuito para personalizar los fe eds de Twitter, en este artículo se utilizará la versión Custom Twitter Feeds Pro. Viene con características mucho más avanzadas como el filtrado de línea de tiempo y la combinación de múltiples feeds de Twitter en uno.

Primero tendrás que instalar y activar el plugin de WordPress. Una vez que esté activo, vaya a su área de administrador de WordPress, navegue hasta Twitter Feed ” Ajustes y pegue su clave de licencia en el campo correspondiente.

Después, tienes que activar la licencia y hacer clic en “Guardar cambios”.

Activating Smash Balloon's Custom Twitter Feeds Pro license key

Ahora, sólo tienes que ir a Twitter Feed ” All Feeds.

A continuación, haga clic en el botón “+ Añadir nuevo”.

Adding a new Twitter Feed with Smash Balloon

Si es la primera vez que añades un feed de Twitter utilizando Smash Balloon, se te pedirá que verifiques tu dirección de correo electrónico.

Para ello, basta con hacer clic en el botón “Conectar” y seguir las instrucciones que aparecen en pantalla.

Connecting the user's email address with Smash Balloon

Una vez que haya terminado, volverá a la página del plugin Custom Twitter Feeds y se le pedirá que seleccione un tipo de feed.

Con los feeds personalizados de Twitter, puedes elegir entre incrustar un feed de cronología de usuario, un feed de hashtags o un feed de búsqueda. En este ejemplo, utilizaremos la primera opción. Una vez que hayas elegido, haz clic en “Siguiente”.

Creating a User Timeline Twitter Feed with Smash Balloon

En la siguiente pantalla, puede escribir el identificador de Twitter que desea incrustar en su sitio web de WordPress.

A continuación, vuelva a hacer clic en “Siguiente”.

Choosing a Twitter Feed source in Smash Balloon

Ahora vamos a elegir una plantilla de feed de Twitter. Hay 7 para elegir, y siempre puedes cambiarla más tarde si crees que no se adapta al diseño de tu página.

Una vez hecha su elección, siga adelante y haga clic en “Siguiente”.

Choosing a Smash Balloon Twitter Feed template

En este punto, deberías llegar a la interfaz de edición de feeds de Twitter. Verás una vista previa en directo en la parte derecha de la página y un panel a la izquierda en el que podrás configurar el aspecto del feed.

Hay dos pestañas: ‘Personalizar’ y ‘Ajustes’.

The Twitter Feed editing interface in Smash Balloon

Empecemos por Personalizar. Si eliges la opción “Disposición del feed”, podrás elegir entre las disposiciones de feed disponibles (como lista, mosaico o carrusel), establecer el número de tweets que se mostrarán, retocar la altura del feed, etc.

Nota: Debido a las limitaciones de la API, Smash Balloon solo puede mostrar de 1 a 30 tweets al principio, pero se irán acumulando más con el tiempo.

Cuando haya terminado con esos ajustes, sólo tiene que hacer clic en el botón “Personalizar” de la parte superior para volver al menú principal.

Customizing the Twitter Feed layout in Smash Balloon

Otra cosa que puedes hacer es activar el botón Cargar más, que aparecerá debajo de los tweets mostrados. Es una característica muy útil si tienes toneladas de tweets pero no puedes mostrarlos todos en la misma página.

Sólo tienes que hacer clic en la opción “Cargar más botones” y, a continuación, en el botón “Activar”. Después, podrá personalizar el aspecto del botón.

Customizing the Twitter Feed Load More Button in Smash Balloon

Si cambia a la pestaña “Ajustes”, podrá ver opciones para añadir más fuentes de feeds, aplicar filtros de tweets y utilizar características avanzadas (como añadir CSS personalizado).

También puede hacer clic en el botón “Eliminar caché de feed” para quitar la caché de feed anterior. La siguiente vez que el plugin necesite mostrar tu feed de Twitter, tendrá que recuperar los últimos tweets de los servidores de X/Twitter en lugar de utilizar los datos antiguos almacenados en caché.

Customizing the Twitter Feed settings in Smash Balloon

Probemos a añadir filtros a tus tweets al hacer clic en la opción “Filtros”.

Aquí, puedes elegir incluir respuestas y retweets, mostrar tweets en función de las palabras permitidas o bloqueadas, u ocultar tweets específicos.

Customizing the filters to display the Twitter Feed in Smash Balloon

Cuando estés satisfecho con el aspecto del feed de Twitter, puedes hacer clic en el botón “Guardar”.

Para añadir el feed de Twitter a tu página o área de widgets, sólo tienes que hacer clic en el botón “Incrustar” de la esquina superior derecha.

A continuación, aparecerá una guía práctica que le mostrará cómo mostrar el feed de Twitter: con un shortcode, un bloque o un widget.

The Twitter Embed Feed popup in Smash Balloon

Independientemente del método que elijas, lo primero que tienes que hacer es copiar el shortcode porque lo vas a necesitar.

A continuación, si desea incrustar el feed de Twitter en una página, haga clic en el botón “+ Añadir a una página”.

Una vez hecho esto, puede seleccionar una página existente de su sitio web WordPress y hacer clic en “Añadir”.

Selecting a page to embed the Twitter Feed in using Smash Balloon

A continuación, se le dirigirá al editor de bloques de WordPress de la página elegida.

Haz clic en el botón “+” para añadir el bloque en cualquier lugar de la página y selecciona el bloque de feed de Twitter.

Selecting the Smash Balloon Twitter Feed block in the block editor

Ahora bien, es posible que el feed de Twitter que creaste anteriormente no aparezca de inmediato.

Si le ocurre esto, sólo tiene que pegar el shortcode en el campo “Ajustes de shortcode” de la barra lateral de ajustes del bloque.

A continuación, haga clic en “Aplicar cambios”.

Inserting a shortcode in the Smash Balloon Twitter Feed block

Una vez hecho esto, puede seguir adelante y hacer clic en “Actualizar” para hacer los cambios en vivo.

Este es el aspecto del feed de Twitter en nuestro sitio de demostración:

An example of the Twitter Feed made with Smash Balloon

Si quieres mostrar tu feed de Twitter en un área de widget, sólo tienes que hacer clic en la opción “+ Añadir a un widget”. A continuación se te redirigirá al editor de widgets.

A continuación, sólo tienes que buscar y seleccionar el widget “Twitter Feed”.

Adding the Twitter Feed Smash Balloon widget in the widget editor

Como en el método anterior, basta con pegar el shortcode en la barra lateral de ajustes del bloque y hacer clic en “Aplicar cambios”.

A continuación, verás tu feed de Twitter recién creado en la vista previa en directo.

Inserting the Smash Balloon Twitter Feed shortcode in the widget editor

Por último, haga clic en “Actualizar” para que los cambios sean definitivos.

A continuación, puede visitar su sitio web en directo para ver el aspecto del feed:

Example of the Twitter Feed widget made with Smash Balloon

Método 3: Mostrar los últimos Tweets en WordPress con Twitter Publish (Sin plugin + HTML)

El último método te permite añadir entradas recientes de Twitter utilizando la característica de publicación de Twitter.

Twitter Publish te permite crear fácilmente el código para incrustar varios tipos de contenido de Twitter, como un tuit, un vídeo, una línea de tiempo o un botón (como el botón Seguir o Compartir).

Este método le permite personalizar el aspecto del elemento incrustado antes de añadirlo a su blog o sitio web de WordPress. No es tan potente como el segundo método, pero merece la pena mencionarlo porque es gratuito.

En esta guía práctica te mostraremos cómo utilizar Twitter Publish para incrustar una línea de tiempo. En primer lugar, tienes que visitar el sitio web de Twitter Publish y, a continuación, pegar la URL de tu perfil de Twitter en la casilla “¿Qué te gustaría incrustar?”.

Una vez hecho esto, haz clic en el icono de la flecha.

Inserting a Twitter URL in the Twitter Publish website

A continuación, se le pedirá que elija una opción de visualización: Línea de tiempo incrustada o Botones X/Twitter.

Debes elegir la opción “Cronología incrustada”, ya que quieres mostrar tu cronología de Twitter con los tweets recientes.

Twitter Publish's display options

Al seleccionar la opción de visualización, se creará instantáneamente el código incrustado para tus tweets recientes. Puede continuar y hacer clic en “Copiar código” para incrustar el código HTML personalizado de inmediato.

También puede hacer clic en “Establecer opciones de personalización” para personalizar el aspecto de la línea de tiempo incrustada.

Customizing the Twitter Feed made with Twitter Publish

Aquí puede personalizar la altura y anchura de la línea de tiempo, elegir un modo claro u oscuro y activar una traducción de idioma para los tweets si es necesario.

Puedes ver el aspecto que tendrá el elemento incrustado debajo de los ajustes. Una vez hecho esto, basta con hacer clic en “Actualizar”.

Clicking Update in the Twitter Publish website

El código incrustado incluirá ahora los ajustes de personalización que hayas elegido para la línea de tiempo.

Simplemente haga clic en “Copiar código” para continuar.

Copying a Twitter Publish embed code

Ahora, vuelva a su escritorio de WordPress y abra el editor de bloques para una página, entrada o área de widget.

A continuación, basta con hacer clic en el botón “+” para añadir un bloque en cualquier parte del editor y seleccionar el widget o bloque HTML personalizado.

Selecting the Custom HTML block in the block editor

Ahora, sigue adelante y pega el código incrustado anteriormente en el campo.

Una vez hecho esto, puede hacer clic en el botón “Vista previa” para ver el aspecto del feed.

Pasting the Twitter Publish HTML code in the block editor

Después, no dudes en añadir más elementos a la página, entrada o área de widgets. Después, sólo tienes que actualizarla o publicarla.

Este es el aspecto de nuestro sitio web de demostración:

An example of Twitter Feed made with the Twitter Publish website

Consejo adicional: Añadir más feeds de medios sociales a WordPress

¿Tienes otras plataformas de medios sociales para tu marca o negocio? Si es así, puede que quieras mostrar otros feeds sociales además de Twitter en tu sitio web.

Al mostrar diferentes feeds sociales en su sitio de WordPress, puede hacer que los visitantes sepan en qué plataformas pueden seguirle, aumentando así su número de seguidores.

Mostrar los feeds de tus redes sociales también tiene una ventaja clave sobre los habituales botones con iconos de redes sociales. Puede mostrar a los visitantes qué contenido se perderían si no le siguieran en sus redes sociales, creando un “miedo a perderse algo”.

Con Smash Balloon, puedes mostrar y personalizar todo tipo de feeds de medios sociales en tu sitio web WordPress. De esta forma, todos los feeds se verán bien con el tema que estés utilizando.

Customize TikTok feed layout

Sólo tienes que marcar / comprobar los siguientes tutoriales sobre cómo mostrar diferentes feeds sociales en WordPress:

Esperamos que este artículo te haya ayudado a aprender cómo mostrar los 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 de los mejores plugins de WordPress para medios sociales.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

32 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Kate

    Hi, I was following the first set of instructions, but when I paste my Twitter URL in the text box nothing happens. I don’t know if it matters that I have Divi Builder enabled on my wordpress site?

    • WPBeginner Support

      If it’s not embedding properly, you would want to try adding the twitter embed block and placing the url there.

      Administrador

  3. Glenn

    This seems to be an older article…I’m wondering how I can show my timeline..not my tweets but the people I follow. The Twitter Widgets page only shows Search, not my timeline or a list.

    Thank you.

    Glenn

  4. Minhazul Islam

    Is there any plugin to do the same task?

  5. Greg McGee

    I have successfully created a twitter feed on my wordpress site. Yaaay!!! Now the bad news. It disappears after 3 seconds. Booo!!! Where can I change the parameter that sets this limit? It is hiding from me very well. But I’m not all that smart, either.

  6. Gopal sharma

    This is the best tutorial i found ever.. :)

  7. onya icha

    on mobile all my tweets displays and make my website to look funny .pls how can i solve this problem

  8. Simeon Opeyemi

    Thanks. it worked for me!

  9. gertrude

    I added this but apart from a link to my tweeter it doesn’t do anything. I have wordpress 3.8.1 and activated the default theme, then switched back to the one I am using. Still nothing. If there is any way you guys can help it would be great. Thanks

    • WPBeginner Support

      Trying switching off all plugins and then test, particularly if you are using any Twitter related plugin. If this does not work, then you need to break the widget code into two pieces. Paste the javascript part starting from the <script> in your theme’s header.php, and the link part in a text widget.

      Administrador

  10. K.T. Lynch

    For some reason the closing HTML tags are stripped out once I press save. This is appearing on my WP Sidebar:

    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”);

    The “Tweets de @lynchkt” is a hyperlink but otherwise it’s not working.

    • WPBeginner Support

      This could happen for many reasons. If you are using WordPress 3.8 then try to update to 3.8.1. Try switching to a default theme temporarily and see if you still get this error.

      Administrador

  11. Ines TR

    Hello!
    I just see a buncg of words in my blog page after pasting the widget , why?
    I saved it and tried several times but can´t fix the problem.

  12. Abdul

    How do I get it on a wp page?

  13. Douglas Vautour

    Thanks a lot! All of the twitter widgets I found wanted way too much information! I feel better getting it from the source.

  14. Ann

    Hi!
    Thank you for sharing this. My regular Twitter widgets just weren’t working!

  15. Nancy Closson

    I am looking for a widget that allows you to select tweets from one twitter account rather than show all or recent tweets. Is this customization possible and is that what you describe with the favorites list? thanks you

    • WPBeginner Support

      yes this customization is possible but with these widgets. The favorites widget will show the tweets you have marked as favorites.

      Administrador

  16. gaston

    very useful!!

    solved it in a buzz!

    thanks!

  17. Shana Manuel

    Wow! This took me 5 minutes to set up and I’m a total novice! Thanks for this article.

  18. Founterior

    It works just fine !!!

  19. Bill Hutchison

    Thank you for this. I have used widgets for this in the past but have been generally unsatisfied with the results. The seems to be the best solution for including Twitter in the sidebar.

    Thanks again.

  20. Joan

    I have a question:

    Is it possible to personalize the twitter widget weight? With the old twitter code was possible.

    Thanks

  21. Chris Race

    Thanks for this article! Was looking for a new widget as my old one stopped working – and found this simple solution. Great!

  22. Rickard

    I don’t know, but every single solution I’ve tried to use is messing with the admin panel more often than anyone can find ok.

    Is there anyway to fight the “waiting for platform.twitter.com” which breaks many functions in the WP-admin-panel?

    I guess this happens because of a overload on platform.twitter.com(?) and pages in the wp-admin-panel will continue loading forever…

    Might there be a way to set a time limit for the call, and if not found ignore it?

    • Editorial Staff

      This should have no impact on your WordPress admin panel. You are adding this in the widgets which only loads in the front-end of your website.

      Administrador

  23. Julien Maury

    I cannot agree more. There is another great thing with widget, they use streams (see streaming APIs) so you can display A LOT of tweets without worrying about rate limits.

    And if you want to get a special feature you’ll add data-chrome=”noheader,nofooter,noborders,transparent” in the link. These new parameters allow you to make widgets “design friendly”.

    • Gordon Chambers

      Hi,

      I’ve been trying the above but when I click save it changes the value added in the ID box to a shortened number. I have tried to add both my twitter accounts and it does the same?

      • Julien Maury

        That’s weird. Check the quotes – they have to be real quotes not like in this comment section.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.