¿Quieres mostrar tus tweets recientes en WordPress?
La integración de X/Twitter con su sitio web WordPress ayuda a aumentar la participación de los usuarios. Los visitantes de su blog pueden descubrir fácilmente sus tweets, lo que también puede ayudarle a conseguir nuevos seguidores en Twitter.
En este artículo, le mostraremos cómo mostrar los tweets recientes en 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.
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.
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.
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:
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.
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”.
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:
Método 2: Mostrar los Tweets recientes utilizando un feed plugin de Twitter (Recomendado)
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”.
Ahora, sólo tienes que ir a Twitter Feed ” All Feeds.
A continuación, haga clic en el botón “+ Añadir nuevo”.
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.
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”.
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”.
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”.
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’.
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.
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.
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é.
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.
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.
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”.
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.
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”.
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:
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”.
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.
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:
Método 3: Mostrar los últimos tweets en WordPress con Twitter Publish (sin plugin)
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.
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.
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.
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”.
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.
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.
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.
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:
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.
Sólo tienes que marcar / comprobar los siguientes tutoriales sobre cómo mostrar diferentes feeds sociales en WordPress:
- Cómo crear un feed de Facebook personalizado en WordPress
- Cómo crear un feed de fotos de Instagram personalizado en WordPress
- Cómo mostrar los últimos vídeos del canal de YouTube en WordPress
- Cómo incrustar vídeos 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 los tweets recientes en WordPress. Puede que también quieras ver nuestra guía definitiva para WordPress SEO (optimización de motores de búsqueda) o nuestra selección experta 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.
Syed Balkhi says
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!
Kate says
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 says
If it’s not embedding properly, you would want to try adding the twitter embed block and placing the url there.
Administrador
Glenn says
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
Minhazul Islam says
Is there any plugin to do the same task?
Greg McGee says
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.
Gopal sharma says
This is the best tutorial i found ever..
onya icha says
on mobile all my tweets displays and make my website to look funny .pls how can i solve this problem
Simeon Opeyemi says
Thanks. it worked for me!
gertrude says
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 says
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
K.T. Lynch says
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 says
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
Ines TR says
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.
Abdul says
How do I get it on a wp page?
WPBeginner Support says
you can paste the same code in WordPress pages as well as posts.
Administrador
Douglas Vautour says
Thanks a lot! All of the twitter widgets I found wanted way too much information! I feel better getting it from the source.
Ann says
Hi!
Thank you for sharing this. My regular Twitter widgets just weren’t working!
Nancy Closson says
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 says
yes this customization is possible but with these widgets. The favorites widget will show the tweets you have marked as favorites.
Administrador
gaston says
very useful!!
solved it in a buzz!
thanks!
Shana Manuel says
Wow! This took me 5 minutes to set up and I’m a total novice! Thanks for this article.
Founterior says
It works just fine !!!
patty says
Sweet. Thanks for this!
Bill Hutchison says
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.
Joan says
I have a question:
Is it possible to personalize the twitter widget weight? With the old twitter code was possible.
Thanks
Chris Race says
Thanks for this article! Was looking for a new widget as my old one stopped working – and found this simple solution. Great!
Rickard says
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 says
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
Julien Maury says
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 says
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 says
That’s weird. Check the quotes – they have to be real quotes not like in this comment section.