> ## 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 incorporadas

> Incorpore timelines de perfil e list do X em seu site com dimensionamento, chrome personalizado, tema, limites de Post e o gerador de marcação publish.x.com para configuração fácil.

Timelines incorporadas são uma forma fácil de incorporar Posts em seu site em uma visualização compacta e linear. Escolha entre uma profile timeline para obter os Posts mais recentes de uma conta do X, ou uma List timeline contendo uma list curada de Posts de suas contas favoritas do X.

Uma timeline incorporada consiste em duas partes: incluir um código embed que vincula sua página web à timeline no x.com, e o JavaScript do X for Websites para transformar o link em uma timeline totalmente renderizada.

<Note>
  **Observação:**

  Descontinuamos as timelines Likes, Collections e Moments em 13 de janeiro de 2023.

  Recomendamos que você use as timelines [Profile](/x-for-websites/timelines/guides/profile-timeline) e [Lists](/x-for-websites/timelines/guides/list-timeline), que estamos atualizando para se tornarem mais rápidas, mais fáceis de usar e mais atualizadas com os recursos e funcionalidades do X.

  Você pode saber mais sobre esta mudança em nosso [anúncio](https://devcommunity.x.com/t/removing-support-for-embedded-like-collection-and-moment-timelines/150313).
</Note>

## Tipos de timeline

### Profile timeline

Uma profile timeline exibe os Posts mais recentes da conta (pública) do X especificada.

### List timeline

Uma list timeline exibe os Posts mais recentes de uma list pública e curada de contas do X. A timeline inclui um cabeçalho exibindo o nome, descrição e curador da list. Para criar lists no x.com ou no app do X, saiba mais aqui.

## Como adicionar uma timeline incorporada ao seu site

Visite [publish.x.com](https://publish.x.com) para gerar códigos embed para perfis e lists.

## Personalização

### Dimensões

Uma timeline incorporada se ajusta automaticamente à largura de seu elemento pai com uma largura mínima de 180 pixels e uma largura máxima de 520 pixels. A exibição em grade tem uma largura mínima de 220 pixels. Defina a largura máxima ou a altura máxima de uma timeline incorporada adicionando um atributo data-width ou data-height ao elemento âncora do código embed.

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

### Chrome personalizado

Controle a moldura ao redor da timeline linear definindo um atributo `data-chrome` com tokens separados por espaço para cada componente do chrome.

| Token         | Descrição                                                                                                                                                                                                                           |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `noheader`    | Oculta o cabeçalho da timeline. Sites que implementam devem adicionar sua própria atribuição ao X, link para a timeline de origem e cumprir outros [requisitos de exibição](https://about.x.com/company/display-requirements) do X. |
| `nofooter`    | Oculta o rodapé da timeline e o link do Post composer, se incluído no tipo de widget da timeline.                                                                                                                                   |
| `noborders`   | Remove todas as bordas dentro do widget, incluindo bordas ao redor da área do widget e separando Posts.                                                                                                                             |
| `noscrollbar` | Recorta e oculta a barra de rolagem principal da timeline, se visível. Considere que ocultar componentes padrão de interface de usuário pode afetar a acessibilidade do seu site.                                                   |
| `transparent` | Remove a cor de fundo do widget.                                                                                                                                                                                                    |

#### Exemplo

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

### Limitando o número de Posts exibidos

Exiba um número específico de itens entre 1 e 20 personalizando seu HTML embed.

Adicione um atributo `data-tweet-limit` ao código embed para especificar um número de Posts. A timeline ajustará automaticamente sua altura para exibir um número especificado de Posts. A timeline fica fixa após a exibição; não fará polling por novos Posts até que a página seja atualizada.

#### Exemplo

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

### Acessibilidade: Sobrescrever politeness ARIA live

Uma timeline incorporada descreve seu conteúdo para leitores de tela e outras tecnologias assistivas usando marcação adicional definida nos [padrões WAI-ARIA](http://www.w3.org/WAI/intro/aria.php). Um widget de timeline é uma [live region de uma página](http://www.w3.org/WAI/PF/aria-practices/#liveprops) que receberá atualizações quando novos Posts se tornarem disponíveis.

Por padrão, uma timeline tem um valor de politeness `polite` por padrão; defina um valor de atributo `data-aria-polite` como assertive para definir a politeness da live region da timeline incorporada como `assertive`, por exemplo, se você estiver usando a Timeline incorporada como fonte principal de conteúdo ao vivo em sua página.

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