Visão geral
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 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.- Definir opções de tema em nível de site
- Definir opções de widget em nível de site
- Definir um macro de Post incorporado
- Solicitar marcação fallback usando oEmbed
- Carregar JavaScript de widget usando o gerenciador de recursos do seu site
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.
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.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. 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. 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 respostacache_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 emhttps://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 — 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>.
amp-twitter ao <head> do documento para transformar a marcação fornecida em um Post incorporado renderizado.
Apple News Format
Descreva um Post em seu artigo usando o componente Post no Apple News Format.Facebook Instant Articles Format
Descreva um Post contido em seu conteúdo com um elemento op-interactive<figure>.