En los últimos años Twitter se ha convertido en uno de los espacios dominantes en internet. Hoy por hoy es casi excluyente que los sitios web tengan presencia activa en la red social del pajarito azul y que de alguna manera lo dejen en evidencia en sus portadas o en sus páginas de contacto.
Integrar Twitter en un sitio web es relativamente sencillo y no requiere más que añadir una porción de código que se copia de la página de Twitter > Configuración > Widgets. Sin embargo, este método ofrece pocas alternativas para controlar la apariencia.
Para aquellos que quieran mostrar los últimos tuits con un estilo personalizado existe este excelente plugin, que además los presenta con un atractivo efecto de carrusel: Rotating Tweets.
Se puede añadir como widget en una barra lateral, o como código abreviado en cualquier parte de una página o entrada. Requiere la versión 1.1 de la API de Twitter (ver más abajo cómo crear una aplicación) y lo que hace que destaque por sobre otros plugins similares es que, en lugar de mostrar todos los tuits al mismo tiempo, muestra uno por vez y lo va reemplazando por el siguiente con un suave efecto de animación.
Otras geniales características que incluye son:
- Muestra los últimos tuits aunque el sitio de Twitter no esté accesible (los guarda en caché).
- Permite seleccionar de qué cuenta son los tuits, cuántos mostrar, si debe incluir retuits y respuestas, o si se debe mostrar el botón Seguir. El usuario también puede asignar la velocidad de rotación y el tipo de animación.
- Es adaptable a todas las resoluciones de pantalla.
- Ofrece la posibilidad de mostrar un botón Seguir totalmente personalizable.
- Reemplaza los enlaces t.co con los originales.
- Es compatible con el plugin W3 Total Cache.
- Es multi-idioma.
En la página del autor, Martin Tod, se pueden ver algunos ejemplos en funcionamiento.
Pese a que el widget no tiene todas las opciones de personalización disponibles, es lo bastante completo como para lucir estupendo en cualquier barra lateral o pie de página.
El Widget en acción
Y en caso de necesitar una personalización aun mayor, el código abreviado es la herramienta ideal, con sus más de cuarenta parámetros que incluyen desde mostrar el contenido multimedia del tuit hasta suprimir los emojis o cambiar el tamaño de la imagen del perfil, entre otras opciones.
La opción básica del código abreviado es la siguiente:
[rotatingtweets screen_name='mpntod']
La opción extendida, por ejemplo puede ser:
[rotatingtweets screen_name='mpntod' include_rts='1' tweet_count='7' timeout='3000']
Los parámetros posibles son:
Opciones de Twitter
include_rts = '0' o '1' – incluir retuits (valor predeterminado: '0')
only_rts = '0' o '1' – solo incluir retuits (valor predeterminado: '0')
exclude_replies = '0' o '1' – excluir respuestas (valor predeterminado: '0')
tweet_count = número de tuits para mostrar (valor predeterminado: '5')
get_favorites = '0' o '1' – muestra los favoritos de un usuario en lugar de sus tuits (valor predeterminado: '0')
list = 'slug-de-la-lista' – el slug usado por la lista de un usuario (algo así como mi-lista)
offset = ‘número’ – permite comenzar desde un tuit más antiguo, por ejemplo ‘1’ comienza en el segundo tuit, ‘2’ en el tercero, etc. (valor predeterminado: '0')
Opciones de apariencia
official_format = '1', '2' o 'custom' – muestra uno de los dos formatos oficiales o un formato personalizado si se usa una función rotatingtweets_display_override() (valor predeterminado: '0')
rtw_display_order = 'info,main,media,meta' – cambia el orden en que se muestran los elementos principales del tuit, información, principal, medios y meta, mediante una cadena de cuatro palabras clave separadas por coma (valor predeterminado: 'info,main,media,meta')
timeout = el tiempo en que se muestra cada tuit en milisegundos (valor predeterminado: '4000', es decir 4 segundos). timeout=0 permite una rotación continua.
speed = el tiempo que toma cambiar de un tuit al siguiente, en milisegundos (valor predeterminado: '1000', es decir 1 segundo)
links_in_new_window = '0' o '1' – abre los enlaces en una nueva ventana o pestaña del navegador (valor predeterminado: '0')
rotation_type = Si usa la versión 1 del JavaScript, puede usar cualquiera de las opciones listadas en el sitio de jQuery.cycle (valor predeterminado: 'scrollUp'). Si usa la versión 2 del JavaScript, entonces las opciones son 'scrollUp', 'scrollDown', 'scrollHorz', 'scrollLeft', 'scrollRight', 'toss', 'scrollVert', 'fade' y 'carousel'
carousel_horizontal = '0' o '1' – si ha elegido el tipo de rotación 'carousel', permite que el desplazamiento sea horizontal (valor predeterminado: '0')
carousel_count = ‘número’ – si ha elegido el tipo de rotación 'carousel', asigne el número de pases que aparecerán en el carrusel (valor predeterminado: '3' para el carrusel vertical y lo suficiente para llenar el ancho de la página para el carrusel horizontal)
carousel_responsive = '0' o '1' – si ha elegido el carrusel horizontal, lo hace adaptable al tamaño de la página (valor predeterminado: '0')
url_length = asigna la cantidad de caracteres para mostrar de la URL del enlace (y se continúa con …) (opcional)
show_tco_link = '0' o '1' – le permite mostrar el enlace t.co en lugar del original (opcional)
show_meta_timestamp = '0' o '1' – muestra la fecha y hora de cada tuit (valor predeterminado: '1')
show_meta_screen_name = '0' o '1' – muestra quién publicó cada tuit (valor predeterminado: '1')
show_meta_via = '0' o '1' – muestra cómo se publicó cada tuit (por medio de qué fuente) (valor predeterminado: '1')
show_meta_reply_retweet_favorite = '0' o '1' – muestra los botones responder, retuitear y favorito (valor predeterminado: '0')
no_rotate = '0' o '1' – desactiva la rotación (valor predeterminado: '0')
show_meta_prev_next = '0' o '1' – muestra los enlaces siguiente, anterior (valor predeterminado: '0')
prev = etiqueta del botón anterior (valor predeterminado: 'prev')
next = etiqueta del botón siguiente (valor predeterminado: 'next')
middot = contenido del espacio entre los botones (valor predeterminado: ' · ')
np_pos = posición de los botones siguiente y anterior: 'top', 'bottom', 'insidebottom', 'beforeafter' o 'tweets' (valor predeterminado: 'top')
show_meta_pager = '0' o '1' – muestra la navegación por puntos debajo de los tuits (valor predeterminado: '0')
show_meta_pager_blob = contenido de la navegación por puntos (valor predeterminado: '<a href="#">•</a>')
show_media = '0' o '1' – opción experimental que muestra las imágenes con los tuits (valor predeterminado: '0')
screen_name_plural = '0' o '1' – opción experimental que le permite mostrar un posesivo en plural para el formato predeterminado de visualización en inglés (por ejemplo, British Lions’ Twitter) (valor predeterminado: '0')
tweet_length = número máximo de caracteres para mostrar en el tuit (valor predeterminado: '0', que muestra el tuit completo)
no_emoji = '0' o '1' – opción experimental que elimina los emojis del feed (valor predeterminado: '0')
official_format_override = '0' o '1' – le permite cambiar los ajustes de show_meta_reply_retweet_favorite y show_meta_timestamp en los formatos oficiales
profile_image_size = 'normal', 'bigger', 'mini' u 'original' – le permite cambiar el tamaño del avatar del perfil (valor predeterminado: 'normal')
shuffle = '0' o '1' – muestra los tuits al azar (valor predeterminado: '0')
merge_cache = '0' o '1' – activa o desactiva la caché de búsquedas (valor predeterminado: '1', es decir, activado)
Opciones de caché
w3tc_render_to = 'your_choice_of_random_string' – usado para soportar 'fragment caching' de W3 Total Cache. Para que funcione, también necesitará asegurarse de que W3TC_DYNAMIC_SECURITY está definido en su archivo wp-config.php, y que no está usando HTTP Compression en la página de ajustes Browser Cache de W3 Total Cache, o Enhanced Disk caching en la página de ajustes Page Cache de W3 Total Cache.
Opciones del botón Seguir
show_follow = '0' o '1' – muestra el botón Seguir (valor predeterminado: '0')
no_show_count = '0' o '1' – elimina el número de seguidores del botón Seguir (valor predeterminado: '0')
no_show_screen_name = '0' o '1' – elimina el nombre de usuario de Twitter del botón Seguir (valor predeterminado: '0')
Archivos de traducción
Descargar [14 KB]
¿Cómo crear una aplicación de Twitter para obtener una clave API?
Paso 1
Inicie sesión en Twitter.
Paso 2
Abra https://apps.twitter.com/ y haga clic en el botón Create New App. Tenga en cuenta que tendrá que añadir un número de teléfono móvil asociado a su cuenta para poder crear una aplicación.
Paso 3
Escriba el nombre de la aplicación, la descripción y la URL donde será usada (la dirección de su página web). Haga clic en la casilla Yes, I agree y luego haga clic en el botón Create your Twitter application.
Paso 4
Su aplicación ya está creada y se ha generado una clave API (Consumer Key). Ahora deberá administrar las claves y fichas de acceso. Haga clic en el enlace manage keys and access tokens.
Paso 5
Verá aquí, además de la clave API, el secreto de consumidor. Lo último que deberá hacer es crear una ficha de acceso. Haga clic en el botón Create my access token.
Paso 6
Copie todas las claves generadas:
- Consumer Key (API Key)
- Consumer Secret (API Secret)
- Access Token
- Access Token Secret
y péguelas en sus respectivos campos en la página Ajustes > Rotating Tweets > Ajustes de la API de Twitter
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
hola, genial tu post, lo implemente horizontalmente, no en un widget.
Lo que me sucede es que en el navegador chrome, veo widht del 100%, pero en internet explorer y mozilla, se ve en un width del 25%.
Sabes si necesito Prefijos CSS de navegador especial para que se vea al 100% ?
Saludos !
Hola, Doris.
Se supone que debe ser responsive, es decir, adaptarse al ancho del contenedor. Si podés enviame la URL para verlo.
Saludos.
Hola.
Estupendo artículo!
Lo he implementado y me funciona perfecto excepto que quería que se mostraran a la vez 3 tweets, puesto que tengo espacio suficiente, pero no lo logro.
He probado a modificar manualmente la variable carousel_count => 3 en el archivo rotatingtweets.php pero sin éxito.
¿Podrías ayudarme? Gracias! y felicidades de nuevo!
Hola, José.
Gracias por tu comentario.
Tendrías que probar con la versión 2 de jQuery Cycle (en Ajustes > Rotating Tweets > Ajustes de JavaScript), y en el código abreviado incluir la cantidad de tuits (no hace falta modificar ningún archivo del plugin, todo se maneja con los parámetros del código). Un ejemplo quedaría algo así:
Así en pantalla se muestran 3 tuits y van pasando hasta el seis. Tené en cuenta que a veces algunas partes del tuit quedan ocultas, dependiendo de la cantidad de texto que tenga.
Espero que te sirva.
Saludos.
Muchas gracias, con ese ajuste me funciona, pero si lo incluyo en un contenido (página), pero lo estoy utilizando en el pie como Widget… en este caso hay que cambiar algo en código?
Gracias de nuevo!! y saludos!
Jose.
Si tu tema soporta código abreviado en widgets, simplemente agregá un widget de texto y pegale el código ahí dentro.
Perfecto!
Muchas gracias!
Genial. Muchas gracias.
si soy capaz algún dia lo implemento!