> ## Documentation Index
> Fetch the complete documentation index at: https://docs.x.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Timelines incrustados

> Incrusta timelines de perfil y de lista de X en tu sitio web con tamaño, chrome personalizado, tema, límites de Posts y el generador de marcado publish.x.com para una configuración sencilla.

Los timelines incrustados son una forma sencilla de incrustar Posts en tu sitio web en una vista compacta y lineal. Elige entre un timeline de perfil para obtener los últimos Posts de una cuenta de X, o un timeline de Lista con una lista curada de Posts de tus cuentas favoritas de X.

Un timeline incrustado consta de dos partes: incluir un código de inserción que enlaza tu página web con el timeline en x.com, y el JavaScript de X for Websites para transformar el enlace en un timeline totalmente renderizado.

<Note>
  **Ten en cuenta:**

  Retiramos los timelines de Likes, Colecciones y Momentos el 13 de enero de 2023.

  Recomendamos usar los timelines de [Perfil](/x-for-websites/timelines/guides/profile-timeline) y [Listas](/x-for-websites/timelines/guides/list-timeline), que estamos actualizando para que sean más rápidos, más fáciles de usar y estén más al día con las funcionalidades de X.

  Puedes obtener más información sobre este cambio en nuestro [anuncio](https://devcommunity.x.com/t/removing-support-for-embedded-like-collection-and-moment-timelines/150313).
</Note>

## Tipos de timeline

### Timeline de perfil

Un timeline de perfil muestra los últimos Posts de la cuenta (pública) de X especificada.

### Timeline de lista

Un timeline de lista muestra los últimos Posts de una lista pública curada de cuentas de X. El timeline incluye una cabecera que muestra el nombre, la descripción y el curador de la lista. Para crear listas en x.com o en la app de X, más información aquí.

## Cómo añadir un timeline incrustado a tu sitio web

Visita [publish.x.com](https://publish.x.com) para generar códigos de inserción para perfiles y listas.

## Personalización

### Dimensiones

Un timeline incrustado se ajusta automáticamente al ancho de su elemento padre con un ancho mínimo de 180 píxeles y un ancho máximo de 520 píxeles. La visualización en cuadrícula tiene un ancho mínimo de 220 píxeles. Establece el ancho o la altura máximos de un timeline incrustado añadiendo un atributo data-width o data-height al elemento ancla del código de inserción.

```html theme={null}
<a class="twitter-timeline"
  href="https://x.com/XDevelopers"
  data-width="300"
  data-height="300">
Posts by @XDevelopers
</a>
```

### Chrome personalizado

Controla el marco alrededor del timeline lineal estableciendo un atributo `data-chrome` con tokens separados por espacios para cada componente del chrome.

| Token         | Descripción                                                                                                                                                                                                                                         |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `noheader`    | Oculta la cabecera del timeline. Los sitios que lo implementen deben añadir su propia atribución a X, un enlace al timeline de origen y cumplir con los demás [requisitos de visualización](https://about.x.com/company/display-requirements) de X. |
| `nofooter`    | Oculta el pie del timeline y el enlace al compositor del Post, si están incluidos en el tipo de widget del timeline.                                                                                                                                |
| `noborders`   | Elimina todos los bordes dentro del widget, incluidos los bordes que rodean el área del widget y los que separan los Posts.                                                                                                                         |
| `noscrollbar` | Recorta y oculta la barra de desplazamiento principal del timeline, si es visible. Ten en cuenta que ocultar componentes estándar de la interfaz de usuario puede afectar a la accesibilidad de tu sitio web.                                       |
| `transparent` | Elimina el color de fondo del widget.                                                                                                                                                                                                               |

#### Ejemplo

```html theme={null}
<a class="twitter-timeline"
  href="https://x.com/XDevelopers"
  data-chrome="nofooter noborders">
Posts by @XDevelopers
</a>
```

### Limitar el número de Posts mostrados

Muestra un número específico de elementos entre 1 y 20 personalizando tu HTML de inserción.

Añade un atributo `data-tweet-limit` al código de inserción para especificar un número de Posts. El timeline ajustará automáticamente su altura para mostrar el número de Posts especificado. El timeline queda fijo tras mostrarse; no consultará nuevos Posts hasta que se recargue la página.

#### Ejemplo

```html theme={null}
<a class="twitter-timeline"
  href="https://x.com/XDevelopers"
  data-tweet-limit="3">
Posts by @XDevelopers
</a>
```

### Accesibilidad: sobrescribir la politeness ARIA live

Un timeline incrustado describe su contenido para lectores de pantalla y otras tecnologías de asistencia usando marcado adicional definido en los [estándares WAI-ARIA](http://www.w3.org/WAI/intro/aria.php). Un widget de timeline es una [región live de una página](http://www.w3.org/WAI/PF/aria-practices/#liveprops) que recibirá actualizaciones cuando haya nuevos Posts disponibles.

De forma predeterminada, un timeline tiene un valor de politeness `polite`; establece el atributo `data-aria-polite` en assertive para configurar la politeness de la región live del timeline incrustado en `assertive`, por ejemplo si estás usando el timeline incrustado como fuente principal de contenido en vivo en tu página.

```html theme={null}
<a class="twitter-timeline"
  href="https://x.com/XDevelopers"
  data-aria-polite="assertive">
Posts by @XDevelopers
</a>
```
