Timelines incorporados

As timelines incorporadas são uma forma fácil de incorporar vários Tweets ao seu website em uma visualização compacta de coluna única. Exiba os Tweets mais recentes de uma ou de várias contas do Twitter ou explore conversas de todo o mundo sobre um tópico agrupadas em um resultado de busca. Uma coleção do Twitter pode ser renderizada em uma lista ou em um modelo de grade responsivo.

A timeline incorporada é formada por duas partes: um link para a exibição completa da timeline no Twitter.com a ser adicionada às suas páginas e o JavaScript do widget do Twitter para aprimorar o link com uma timeline totalmente renderizada. Um modelo de timeline de lista exige que a configuração do widget seja editada no Twitter.com.

Você é o desenvolvedor de algum aplicativo para iOS ou Android? Adicione uma timeline ao seu aplicativo usando o Kit do Twitter para iOS ou para Android.

Modelos de timeline

Todas as timelines têm suporte para a exibição de um modelo de lista com sondagens de atualizações e personalizações de temas. Uma fonte de dados de coleção pode ser exibida em uma lista ou em um modelo de grade. Um modelo de grade não realiza sondagens de atualizações nem inclui personalizações de temas.

Exemplo de modelo de lista

Exemplo de modelo de grade

Tipos de timelines

Timeline de usuário

A timeline de usuário exibe os Tweets mais recentes, ordenados do mais novo ao mais antigo, de uma conta pública específica do Twitter.

Lista de usuários

A timeline de lista exibe os Tweets mais recentes, ordenados do mais novo ao mais antigo, de uma lista pública de contas do Twitter organizada por um curador. A timeline inclui um cabeçalho que exibe o nome da lista, a descrição e o curador. Leia mais sobre as listas do Twitter.

Timeline de busca

A timeline de busca exibe os Tweets das últimas semanas nos resultados de uma busca do Twitter classificados pelo mecanismo de busca do Twitter. Um widget de busca pode ser configurado para mostrar somente os Tweets em Destaque e remover de maneira automática os Tweets que indiquem ter conteúdo sensível.

Coleção

A timeline de coleção exibe vários Tweets selecionados por um usuário do Twitter na ordem de exibição escolhida.

Como adicionar uma timeline incorporada ao seu website

Modelo de grade

Acesse publish.twitter.com para gerar o HTML de incorporação para uma coleção do Twitter exibida em um modelo de grade responsivo.

Modelo de lista

Acesse publish.twitter.com para gerar o HTML de incorporação para modelos de listas baseados em timelines de usuários, de curtidas e de listas, bem como em coleções.

Para obter modelos de listas baseados em uma consulta de busca, acesse o configurador de widget de timeline de busca no twitter.com. Recomendamos a criação de um novo widget com base na conta responsável pelo website (e não na sua conta pessoal) para facilitar a descoberta para a equipe e a personalização quando o site for alterado.

O trecho de código HTML gerado em nossas ferramentas de widget inclui um trecho de código a ser carregado no JavaScript dos widgets do Twitter. Você poderá omitir o elemento <script> e carregar o JavaScript dos widgets do Twitter usando nosso trecho de código para carregamento quando estiver no seu modelo de página.

Dimensões

Um modelo de lista de timeline incorporada se ajusta de maneira automática à largura do seu elemento pai, com larguras mínima e máxima de 180 e 520 pixels respectivamente. Um modelo de 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 de ancoragem da timeline.

<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-width="300"
data-height="300">
Tweets de @TwitterDev
</a>

Personalizar os componentes do widget

Personalizar os componentes cromados

Controle a moldura da lista dos Tweets compactos exibidos em um modelo de lista ajustando o atributo data-chrome com tokens separados por espaço para cada componente cromado.

Token Descrição
noheader Oculta o cabeçalho da timeline. Os sites que implementam essa opção devem adicionar sua atribuição própria do Twitter, vinculá-la à timeline de origem e atender às outras exigências de exibição do Twitter.
nofooter Se incluído no tipo de widget da timeline, oculta o rodapé da timeline e o link do criador do Tweet.
noborders Remove todas as bordas de um widget, inclusive as que envolvem a área do widget e as que separam os Tweets.
noscrollbar Recorta e oculta a barra de rolagem da timeline principal, se visível. Observe que ocultar os componentes da interface do usuário padrão poderá afetar a acessibilidade do seu website.
transparent Remove a cor do plano de fundo do widget.

Exemplo:

<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-chrome="nofooter noborders">
Tweets de @TwitterDev
</a>

Exibir um número específico de Tweets

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

Adicione um atributo data-tweet-limit a um modelo de lista. A timeline ajustará de maneira automática sua altura para comportar o número especificado de Tweets. A timeline é fixada após a exibição; ela não realiza sondagens de novos Tweets.

Adicione um atributo data-limit a um modelo de lista.

Exemplo:

Aumentar a prioridade de acessibilidade de uma região da timeline

Uma timeline incorporada descreve seu conteúdo para os leitores de tela e para outras tecnologias de apoio usando marcações adicionais definidas nas normas WAI-ARIA da W3C. O widget de timeline é uma região dinâmica de uma página que pode receber atualizações conforme novos Tweets são disponibilizados. Por padrão, a timeline tem o valor de “polidez” polite; defina o valor do atributo data-aria-polite como assertive para definir a “polidez” da região dinâmica da timeline incorporada como assertive.

<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-aria-polite="assertive">
Tweets de @TwitterDev
</a>