Para terminar con la serie de los feeds, hoy voy a explicar cómo mostrar tu feed de Twitter en WordPress.

Ya hemos visto cómo mostrar el feed de Instagram y el feed de Facebook en tu web, ambos utilizando los magníficos plugins de Smash Balloon. Y para esta ocasión no vamos a variar. Si algo es bueno, ¿para qué cambiarlo? 😉

Aunque Twitter es la red social (de las tres hemos visto) que menos usuarios tiene, tiene la no despreciable cifra de unos 340 millones de usuarios activos mensuales, por lo que no es de extrañar que quieras dedicar un espacio de tu web a mostrar tus últimas publicaciones y así poder captar posibles seguidores a través de ella.

Así que sin más dilación, vamos a ver la mejor manera de configurar el mejor plugin para Twitter.

Cómo mostrar en WordPress el feed de Twitter

Como ya he adelantado, vamos a ver cómo mostrar tu feed con otro de los plugins de Smash Balloon, los mismos desarrolladores de los plugins para Instagram y Facebook.

El plugin se llama Custom Twitter Feeds Pro, y es, probablemente, el mejor de todos los plugins para mostrar las publicaciones de Twitter en tu web.

​¿Quieres lo mejor para tu web?

Pues será mejor que eches un ojo a las mejores herramientas de creación y diseño web. Luego no digas que no te lo advertí...

Como es habitual, hay una versión gratuita y más básica del plugin, llamada Custom Twitter Feeds y que puedes ver e instalar desde el repositorio de WordPress.

Pero si lo que quieres es sacarle todo el jugo posible a tu feed y personalizarlo al máximo, es mejor que vayas a por la versión de pago del mismo, que incluye estas funcionalidades:

  • Permite mostrar tweets de diferentes usuarios o hashtags en el mismo feed.
  • Puedes mostrar imágenes, vídeos y gifs, y que al hacer clic en ellos, se abran a modo de popup directamente en la web.
  • Diferentes modos de visualización del feed: una columna, masonry o carrusel.
  • Puedes filtrar publicaciones a mostrar u ocultar según los hashtags, palabras o frases que indiques.
  • También puedes mostrar los tweets en los que has sido mencionado, así como las respuestas a los tweets.
  • El usuario puede cargar más tweets de los que se ven inicialmente.

Estas son las mejores funcionalidades del plugin, pero puedes verlas todas en esta página. Y si quieres ver alguna demo de cómo queda el feed, puedes verlas aquí.

Como nos tienen acostumbrados la gente de Smash Balloon, el plugin es muy completo y personalizable, y es de lo mejor que puedes obtener para mostrar tu feed de Twitter en WordPress.

Ahora, vamos a ver cómo configurarlo.

Cómo configurar Custom Twitter Feeds Pro

Lo dicho, primero, vamos a ver cómo configurar el plugin para Twitter, y luego veremos ls diferentes opciones de personalización que tiene.

Conectar con tu cuenta de Twitter

Como siempre, lo primero que hay que hacer es conectar el plugin con la cuenta de Twitter que quieres mostrar.

Esto se hace fácilmente desde la pestaña “Twitter Feeds”, haciendo clic en el botón “Log in to Twitter and get my Access Token and Secret”.

Para que funcione, tienes que tener iniciada la sesión en Twitter en el mismo navegador.

Acto seguido, aparece una pantalla en la que tienes que autorizar a Smash Balloon Twitter Feed a acceder a tu cuenta.

twitter wordpress

Autorízalo, y automáticamente te redirigirá a tu web de nuevo. Te aparecerán dos campos llamados “Access Token” y “Access Token Secret” con el texto en verde “Saved”. Esto quiere decir que ya está la cuenta conectada.

wordpress twitter

Configurar el feed de Twitter

Ok, pues una vez conectada la cuenta, vamos a ver qué opciones de configuración tenemos en la misma pestaña.

plugin twitter

Lo primero que te pide es seleccionar qué quieres mostrar en el feed: el timeline de la cuenta, los tweets que contienen el hashtag que quieras, el timeline de inicio (es decir, los tweets de la gente a la que sigues, aparte de los tuyos), los tweets en los que te mencionan, o listas de Twitter.

En el caso de que quieras mostrar más de uno de ellos, puedes hacerlo personalizando el shortcode que uses para mostrar el feed.

plugin twitter wordpress

A continuación, puedes elegir el número inicial de tweets que quieres que muestre el feed y cada cuánto tiempo va a comprobar el plugin si hay nuevos tweets para mostrar.

Escoge un intervalo de tiempo acorde al número de publicaciones que suelas hacer.

Por último, si activas la casilla “Preserve settings when plugin is removed”, si desinstalas el plugin, se guardará la configuración realizada (por si lo vuelves a instalar más adelante). La casilla “Are you using an Ajax powered theme?” la puedes activar si tu tema usa Ajax. Si no sabes lo que es, no hace falta que toques nada.

Personalizar el feed de Twitter

Es el turno de personalizar el feed, y para ello, tienes que ir a la pestaña “Customize”, como es obvio.

Vamos a dar un breve repaso a cada una de ellas.

plugin twitter wordpress

Lo primero que puedes personalizar es el ancho y el alto que va a ocupar el feed respecto a la zona donde lo insertes, así como ponerle una clase CSS para personalizarlo más a fondo, y elegir si quieres activar o desactivar el lightbox para las fotos del feed, es decir, que si cuando se hace clic en una imagen, se abra a modo de popup directamente en la web.

custom twitter feeds

A continuación, puedes elegir la plantilla que quieres utilizar para el feed. Los tres diseños disponibles son en forma de listado (los tweets uno debajo de otro), en forma de carrusel (se van desplazando hacia el lado) o en forma de masonry (recuadros irregulares creando un bonito diseño).

twitter en wordpress

Puedes elegir qué elementos mostrar u ocultar en cada uno de los tweets del feed, mostrar una cabecera encima del feed, que incluye tu foto de perfil, tu nombre, el número de tweets y de seguidores, y tu bio, así como un botón para que te sigan, mostrar un botón para que el usuario pueda cargar más tweets en el feed de los que se ven inicialmente, y por último, te da la posibilidad de añadir un crédito del plugin, por si quieres dar un poco de publi a Custom Twitter Feeds Pro.

feed twitter wordpress

Con la opción “Max Visible Media” puedes limitar el número de imágenes que se ve en los tweets, en el caso de que tengan más de una, y con la opción “Media columns” puedes el número de columnas en el que se muestran las imágenes.

Si quieres que cuando el usuario llegue al final del feed se carguen más tweets automáticamente, activa la casilla “Set Load More on Scroll as Default”.

custom twitter feeds pro

Una opción interesante es la de moderar los tweets que quieres que se muestren o no en función de los hashtags o palabras que tú le indiques. Esto puedes hacerlo con las opciones de la captura de arriba.

Después de estas opciones, hay unas opciones avanzadas en las cuales no me voy a adentrar, ya que no serán necesarias para la mayoría de usuarios.

Estilo del feed

En la pestaña “Style” encontrarás más opciones de personalización para tu feed de Twitter.

custom twitter feeds pro

Lo primero que puedes hacer aquí, es poner un color de fondo para el feed en general, y un color de fondo para cada tweet individual.

También puedes personalizar la cabecera del feed, si la tienes activada, pudiendo elegir si mostrar la bio de tu perfil, poner un color de fondo para la cabecera, cambiar el color del texto, e incluso poner un texto personalizado, para sustituir el nombre que tienes puesto en tu cuenta.

Las siguientes opciones son para personalizar diferentes elementos del feed, como el formato de la fecha, del autor, del texto, de los enlaces, de los retweets y del botón de cargar más tweets.

Básicamente puedes cambiar tamaños de fuentes, colores y poner algunos textos personalizados, entre otras cosillas. No me extiendo explicando uno por uno porque es bastante intuitivo todo.

Mostrar el feed de Twitter en tu web

Pues ya solo queda ver cómo puedes mostrar el feed de Twitter en tu web. Vamos a ver un par de maneras de hacerlo.

Mostrar el feed de Twitter mediante shortcode

Como siempre, los chicos de Smash Balloon te lo ponen fácil, y es que solo necesitas copiar y pegar en el lugar que quieras el siguiente shortcode:

[custom-twitter-feeds]

Simplemente con esto, se mostrará el feed donde hayas insertado el shortcode, y se mostrará tal cual lo hayas configurado y personalizado.

Puedes añadirlo en tantos lugares como quieras de la web, y puedes personalizar cada uno de ellos añadiendo diferentes parámetros al shortcode. Puedes ver todos los parámetros permitidos en la pestaña “Display Your Feed”.

custom twitter feed shortcode

Mostrar el feed de Twitter como widget de WordPress

También puedes insertarlo mediante widget de WordPress, en cualquiera de las áreas de widgets que tema tu tema.

El widget tiene el nombre “Custom Twitter Feeds”, por lo que no hay lugar a confusión.

widget twitter

Lo que hace este widget es añadir el mismo shortcode que acabamos de ver, así que lo único que te ahorra es tener que copiarlo y pegarlo, pero algo es algo.

Por supuesto, también puedes añadirle los parámetros que quieras para personalizar el feed.

Conclusión sobre Custom Twitter Feeds Pro

Pues como ya me tienen acostumbrado los de Smash Balloon, este plugin es la caña para mostrar el feed de Twitter en WordPress, y no me plantearía ninguna otra opción si tuviera que hacerlo en cualquier proyecto.

Es cómodo, simple de utilizar, y el resultado del feed es muy bueno y con un aspecto muy profesional, así que le doy un 10.

Si tú también quieres utilizarlo para tu proyecto, puedes comprarlo desde su web, y cómo no, te invito a que utilices los comentarios de aquí abajo para contarme qué te parece 😉