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

# Melhores práticas de CMS para Posts incorporados

> Um Post incorporado adiciona partes da conversa global que acontece no X ao seu site, conteúdo e comentários. Sites alimentados por um CMS ou software personalizado podem.

## Visão geral

Um [Post incorporado](/x-for-websites/embedded-posts/overview) adiciona partes da conversa global que acontece no X ao seu site, conteúdo e comentários. Sites alimentados por um CMS ou software personalizado podem oferecer integração mais profunda com conteúdo do X por meio de preferências de exibição em nível de site, macros de conteúdo para publicação multiplataforma, conteúdo fallback do oEmbed e carregadores JavaScript descritos neste guia. Seu esforço extra removerá barreiras entre autores e conteúdo citado, integrando nosso conteúdo de terceiros com os fluxos de conteúdo e design visual do seu site.

1. [Definir opções de tema em nível de site](/x-for-websites/embedded-posts/guides/cms-best-practices.html#theme-options)
2. [Definir opções de widget em nível de site](/x-for-websites/embedded-posts/guides/cms-best-practices.html#widget-options)
3. [Definir um macro de Post incorporado](/x-for-websites/embedded-posts/guides/cms-best-practices.html#macro)
4. [Solicitar marcação fallback usando oEmbed](/x-for-websites/embedded-posts/guides/cms-best-practices.html#oembed)
5. [Carregar JavaScript de widget usando o gerenciador de recursos do seu site](/x-for-websites/embedded-posts/guides/cms-best-practices.html#js-loading)

## Definir opções de tema em nível de site

Integre widgets do X, incluindo Posts incorporados, com o esquema de cores do seu site incluindo elementos HTML `<meta>` `</web/overview/widgets-webpage-properties>` na seção `<head>` da sua página. Escolha um tema de cor claro ou escuro para o texto e fundo do Post e personalize a cor da borda do iframe adicionando nova marcação aos modelos do seu site.

```html theme={null}
<meta name="twitter:widgets:theme" content="light">
<meta name="twitter:widgets:border-color" content="#55acee">
```

O X for Websites lê os valores meta na página antes de construir um novo widget; esses valores podem ser sobrescritos para widgets individuais passando o parâmetro oEmbed apropriado.

Adicionar uma seção de opções de widget do X na interface administrativa do seu CMS ajuda editores individuais a personalizar conteúdo sem editar arquivos de tema.

## Definir opções de widget em nível de site

Posts incorporados podem conter imagens, vídeo, prévias de link ou outros Posts em conversas. Seu site pode especificar preferências em todo o site para consistência de exibição em todas as páginas, sobrescrevendo as opções de exibição padrão.

Adicionar uma seção de opções de Post incorporado na interface administrativa do seu CMS ajuda editores individuais a definirem suas preferências para exibição de conteúdo de Post em todo o site.

## Definir um macro de Post incorporado

Um macro adicionado à interface de edição do seu site abstrai o detalhe de incorporar Posts, permitindo que um autor foque no conteúdo. Nos bastidores, seu macro deve determinar o melhor conteúdo para exibir no ambiente de renderização atual, como HTML e JavaScript em uma página web, views nativas no iOS e Android ou elementos personalizados em AMP ou Apple News Format.

O macro mais simples é uma URL de Post adicionada ao conteúdo do seu artigo. Você pode optar por ter um macro mais personalizado para capturar opções adicionais de Post incorporado específicas para a exibição do artigo.

```json theme={null}
[tweet id="611193269532295168" lang="fr"]
```

Verifique as entradas do macro contra um conjunto de parâmetros de Post incorporado conhecidos antes de passar a opção para o endpoint oEmbed do X para definir as expectativas do autor e remover coisas desnecessárias.

## Solicitar marcação fallback usando oEmbed

Um Post incorporado deve fornecer contexto apropriado quando visualizado por conta própria, antes de melhorias adicionais fornecidas pelo X para o visualizador atual. Solicite e armazene marcação HTML para os dados do Post solicitado requisitando conteúdo do [endpoint oEmbed API](/x-for-websites/oembed-api). Adicione quaisquer opções personalizadas passadas ao macro do seu site, ou extraídas do contexto atual, como parâmetros de query na requisição oEmbed.

Um ID de Post é preferido em relação à URL web de um Post: componentes da URL como o screen\_name associado à conta podem mudar; o ID do Post é único para o conteúdo citado e permanecerá o mesmo.

Você pode optar por omitir opções relacionadas a tema das requisições oEmbed se definir essas preferências dentro dos elementos da sua página web, conforme descrito acima.

A resposta oEmbed dos servidores do X segue a [especificação oEmbed](https://oembed.com/). A resposta oEmbed do X é um tipo "rich" oEmbed contendo marcação HTML adequada para uso dentro de código HTML existente.

Sites devem armazenar em cache o HTML retornado pela oEmbed API pelo tempo de cache sugerido especificado pelo parâmetro de resposta `cache_age`. Seu método de cache deve incorporar os parâmetros de personalização passados à oEmbed API, pois esses parâmetros modificarão a resposta HTML.

## Carregar JavaScript de widget usando o gerenciador de recursos do seu site

Muitos sites, frameworks e sistemas CMS têm gerenciadores de recursos ou carregadores de módulos especializados para CSS e JavaScript, rastreando dependências, carregamento assíncrono e versionamento. Inclua o widgets.js hospedado remotamente no carregador de recursos do seu site sempre que o conteúdo do seu site incluir um Post incorporado ou outro conteúdo de widget do X.

Defina uma nova definição de módulo para o JavaScript do X for Websites hospedado em `https://platform.x.com/widgets.js`. Defina um ID de módulo "twitter-wjs" para identificar exclusivamente o JavaScript do X com o ID comum usado por [snippets de carregamento assíncrono](/x-for-websites/javascript-api/guides/set-up-x-for-websites) — apenas no caso de o JavaScript copiado e colado chegar à página.

Inclua um parâmetro `omit_script=true` em sua requisição oEmbed para remover o JavaScript da resposta do X.

Sites que carregam fragmentos de página contendo um Post incorporado precisarão solicitar uma varredura de conteúdo de Post incorporado chamando a função `twttr.widgets.load` `</web/javascript/initialization>` depois que o novo conteúdo é inserido na página. Passe um ou mais elementos DOM para a função load para restringir a varredura de novo conteúdo apenas aos novos fragmentos de página para melhorar o desempenho do site.

Sites que chamam o JavaScript do X devem configurar uma fila de funções assíncrona armazenando funções a serem executadas em um array acessível em `window.twttr._e`. O snippet de carregamento assíncrono do X fornece a configuração de um array de fila de funções com novas funções enfileiradas passando uma função para `window.twttr.ready`. O JavaScript do X for Websites descarregará a fila de funções ao executar seu JavaScript pela primeira vez.

## Exportar conteúdo de Post em formatos sindicados

Uma organização de notícias moderna pode publicar versões alternativas de seu conteúdo formatado para Apple News, Facebook Instant Articles ou clientes AMP. Um Post citado em um artigo precisará ser descrito na marcação esperada por cada formato.

### AMP

Um Post deve ser descrito em um template AMP usando o elemento personalizado `<amp-twitter>`.

```html theme={null}
<amp-twitter
  data-tweetid="611193269532295168"
  layout="responsive">
```

A página AMP também precisará adicionar o código de renderização JavaScript do componente `amp-twitter` ao `<head>` do documento para transformar a marcação fornecida em um Post incorporado renderizado.

```html theme={null}
<script async
  custom-element="amp-twitter"
  src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js">
</script>
```

### Apple News Format

Descreva um Post em seu artigo usando [o componente Post no Apple News Format](https://developer.apple.com/library/ios/documentation/General/Conceptual/Apple_News_Format_Ref/Tweet.html).

```json theme={null}
{
  "role": "tweet",
  "URL": "https://x.com/interior/status/611193269532295168"
}
```

### Facebook Instant Articles Format

Descreva um Post contido em seu conteúdo com [um elemento op-interactive `<figure>`](https://developers.facebook.com/docs/instant-articles/reference/embeds).

```html theme={null}
<figure class="op-social">
<iframe>
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Mama knows best! Mother bear teaches cub how to dig for clams <a href="https://x.com/LakeClarkNPS">@LakeClarkNPS</a> by Sally Jewell <a href="https://x.com/hashtag/Alaska?src=hash">#Alaska</a> <a href="https://x.com/hashtag/nature?src=hash">#nature</a> <a href="http://t.co/1n3vYDJcAW">pic.x.com/1n3vYDJcAW</a></p>
— US Dept of Interior (@Interior) <a href="https://x.com/Interior/status/611193269532295168">June 17, 2015</a>
</blockquote>
<script async
  src="https://platform.x.com/widgets.js">
</script>
</iframe>
<figure>
```
