5 maneiras fáceis de instalar cartões do Twitter em seu site

Então você sabe como no Twitter, quando alguém publica um link para seu site, o Twitter cria uma caixa que tem uma imagem em miniatura, um título, uma descrição e um URL para a página de destino? É muito comum. Isso torna as postagens de link padrão muito mais visíveis nas linhas do tempo, mostra um pouco sobre o destino do link e incentiva mais interação do usuário.

Isso é um cartão do Twitter. Especificamente, é o cartão de resumo do site, um dos vários tipos de cartões do Twitter que podem ser integrados a um site. Que outros tipos existem?

• O cartão de resumo, como mencionado, é uma prévia de um site. É uma imagem e um texto personalizados extraídos de metainformações que garantem uma boa visualização do que um usuário verá quando clicar no seu link.
• O cartão de resumo (com imagem grande) é… idêntico a um cartão de resumo. Sinceramente não sei porque há diferença. Clique em cada um dos links e veja os tweets visualizados e veja o que quero dizer. Suponho que antes do último redesenho do Twitter eles poderiam parecer diferentes, mas hoje tudo parece um grande cartão de imagem.
• O cartão de jogador não deve ser confundido com cartões de beisebol ou outros esportes. Eles são essencialmente cartões de imagem grandes, exceto que a imagem é alguma forma de mídia animada. Dependendo de como eles são exibidos, eles podem ser pequenas caixas de visualização e descrição que se expandem em mídia, ou apenas a própria mídia pronta para ser reproduzida. Geralmente, são vídeos incorporados, como vídeos do YouTube, embora os webms sejam cada vez mais populares.
• O cartão de aplicativo é uma caixa que extrai dados de uma página da loja de aplicativos para criar uma janela de promoção de aplicativo personalizada. Ele mostra os detalhes importantes do aplicativo vinculado no tweet, juntamente com um botão de CTA para que os usuários instalem o aplicativo imediatamente.

Os cartões do Twitter costumavam ser muito mais complexos. Costumava haver tipos específicos de cartões para galerias de imagens, produtos e algumas outras opções, mas o Twitter os removeu desde então. Se você quer um pouco de nostalgia, você pode ver como eles eram aqui, só não se apegue muito; você não pode fazê-los hoje.

O básico dos cartões do Twitter

Você só pode ter um tipo de cartão do Twitter por site, ou pelo menos por página da Web, se desejar especificar um código individual para cada página. A maioria das pessoas escolhe um cartão de resumo básico de imagem grande e coloca o código no cabeçalho do modelo do site, para que ele apareça em todas as páginas. Alguns sites, como o YouTube, colocam o cartão do jogador no cabeçalho. O principal argumento aqui é que você só pode ter um conjunto de informações de cartão em seus metadados de cabeçalho em uma determinada página.

Os cartões são bastante robustos nos dados que podem transmitir. Você pode fazer com que o cartão saiba automaticamente quem criou o conteúdo e quem é o proprietário da página, mesmo que ambos sejam diferentes. Você pode especificar a mídia a ser carregada, pode especificar nomes e código de rastreamento e muito mais. Na verdade, você pode ler esta página para ter uma ideia dos atributos que você pode usar especificamente para cartões. Você também pode associar atributos do Open Graph para dados mais robustos.

O que vou fazer aqui hoje é mostrar como adicionar cartões do Twitter ao seu site. Eu não vou passar por cima de cada atributo – a documentação do Twitter é boa o suficiente – eu só vou te dar um resumo de como fazer isso para vários CMSs.

Antes de começarmos; para cada método de instalação, você precisa de validação. Para ter certeza de que fez certo, assim que tiver um cartão ativado, copie o URL para este validador. Isso lhe dirá se o cartão realmente funciona ou não.

1: WordPress

O WordPress é talvez a plataforma mais fácil para implementar cartões do Twitter, porque existem muitas maneiras diferentes de fazê-lo, incluindo a que é quase integrada.

A maneira recomendada de implementar cartões do Twitter é usar o plug-in oficial do Twitter . Você pode instalá-lo como qualquer outro plugin e, a partir daí, pode gerar seus cartões do Twitter automaticamente. Ele também permite botões de compartilhamento e tweet/seguir, manipulação de tweets incorporados e códigos de acesso para rastreamento de análises. Você pode ler a documentação aqui e baixar o plugin aqui.

Se você não quiser usar o plugin oficial do Twitter, ou se estiver hospedado no WordPress.com, você pode usar o Jetpack. No Jetpack, você deseja encontrar a seção Compartilhamento e configurá-la. Haverá uma seção do Twitter, onde você autoriza sua conta do Twitter ao seu site.

Uma terceira opção é usar o plugin JM Twitter Cards. Este plugin, de Julien Maury, adiciona compatibilidade de cartão do Twitter com algumas configurações básicas. Você pode optar por usar a primeira imagem da sua página em vez de uma imagem em destaque, visualizar a renderização do cartão do Twitter e personalizar o cartão para cada postagem ao criar a postagem. Para configurar o plug-in, navegue até a barra lateral e clique no painel do plug-in em seu painel de administração. Escolha o tipo de cartão e preencha o restante das caixas com sua conta do Twitter, a conta do seu site, o tamanho da descrição e qualquer outra coisa que você queira adicionar.

Se nenhum deles atender às suas necessidades, ou se você já o tiver, o WordPress SEO by Yoast também lida com cartões do Twitter. No seu painel de administração, navegue até SEO e clique na seção Social. Há uma guia do Twitter lá, onde você pode adicionar seu nome de usuário do Twitter à caixa. Infelizmente, da última vez que li, o Yoast suporta apenas cartões de resumo; você precisa de plugins mais avançados se quiser outros tipos de cartões.

2: Tumblr

O Tumblr é uma plataforma de blog surpreendentemente popular que muitas pessoas não percebem que se tornou tão prolífica. A rede Tumblr vai além dos blogs marcados com .tumblr.com; na verdade, alguns sites de grande nome estão usando o Tumblr como arquitetura base. Depois de ter um domínio personalizado, é como qualquer outra arquitetura de back-end. Ou é?

O fato é que a arquitetura do Tumblr não é expansiva ou personalizável como algo como o WordPress. Você terá que usar algum código personalizado para implementar cartões específicos e personalizados do Twitter em seu blog. Você pode ler o código e a descrição por trás dele aqui, na resposta dada por Dan Leveille no Quora.

Vale a pena notar aqui que este código é necessário para personalizar seus cartões manualmente; não é necessário simplesmente ter cartões de resumo. O Twitter já colocou o Tumblr.com na lista de permissões para geração automática de cartões na publicação de links, portanto, a menos que você queira um cartão específico com dados específicos ou esteja usando um domínio personalizado, basta usar o que é implementado por padrão. Eu só recorreria ao código dele se você tiver um domínio personalizado para o seu site do Tumblr ou quiser dados que o Twitter não está captando naturalmente.

3: Blogueiro

Instalar cartões do Twitter em um blog do Blogger se resume ao seu modelo. Eu lhe darei instruções gerais, mas se o modelo do seu site for muito diferente da norma, você terá que descobrir por conta própria com base nas dicas que eu lhe der.

É sempre recomendável que você faça backup de seu modelo antes de adulterá-lo, apenas por precaução. Vá para o seu painel, clique no modelo e clique no botão de backup para salvar uma cópia dele para fins de restauração mais tarde.

Em seguida, clique no botão “editar HTML” abaixo da visualização ao vivo do seu modelo de blog. Dentro desse código, faça uma busca por “<b:includable id='post' var='post'>”. Mantenha essa linha onde está, mas cole o seguinte diretamente abaixo dela:


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


Obviamente, você precisará editar os dados acima . Altere o @seunome para o seu nome de usuário do Twitter, altere o www.seusite.com para o URL do seu site e verifique se está correto.

Você pode, é claro, personalizar esse código para suas necessidades. Se preferir outro tipo de cartão, altere a linha superior por algo diferente de “resumo” e adapte o restante do código aos dados necessários.

Caso o código que colei acima não funcione, esta é a página de onde o peguei. Você pode verificar novamente para ter certeza de que eu copiei corretamente, ou que você fez, e você pode verificar se foi atualizado e meu post não reflete a atualização. Falando nisso, se não funcionar, me avise. Eu farei o meu melhor para corrigi-lo.

4: Joomla

O Joomla tem muito em comum com o WordPress, por ser um CMS com ênfase na personalização por meio de extensões, em vez de uma plataforma limitada com aprimoramentos cosméticos como Tumblr ou Blogger. Como tal, existem várias maneiras diferentes de implementar cartões do Twitter usando diferentes extensões do Joomla.

Tweet Cards é uma extensão que a maioria das pessoas provavelmente prefere. É gratuito para baixar e usar, e adiciona cartões do Twitter ao seu site baseado em Joomla. É isso; não há nada extravagante na configuração, não há nada de excepcional com sua funcionalidade ou implementação, apenas faz o que diz na lata.

Uma segunda opção é a extensão profissional Open Graph e Twitter Card Tags. É uma extensão mais robusta que adiciona tags para Twitter e Facebook. Tem muitas opções de personalização para escolher as imagens e dados específicos que você deseja para suas postagens. A integração do Open Graph no Facebook é ótima, além de adicionar metadados extras para o Twitter e o Google quando eles chegam. A única desvantagem é que, como extensão profissional, esta vai custar-lhe. É barato, no entanto; apenas 7 euros para a licença. Você pode adquirir suporte extra se quiser, mas sejamos honestos; isso é apenas metadados, é um trabalho de copiar e colar glorificado para pessoas com medo de código. Você não precisa de suporte.

A terceira opção que tenho para você é usar o TEXTman, um editor de post front-end para criar e publicar seus artigos em um site Joomla. Você não precisa configurar nada para que os cartões do Twitter funcionem; basta usar TEXTman como seu editor e ele traz o recurso automaticamente. A desvantagem aqui é que também é uma ferramenta profissional e muito mais cara. Como é um editor de texto completo e ferramentas associadas, é uma grande licença com várias extensões adicionadas. Vai custar US $ 99 para uma assinatura com tudo, ou US $ 40 para apenas o próprio TEXTman e uma licença limitada de suporte e atualização. Muito caro se tudo que você quer são cartões do Twitter.

Por fim, é claro, você pode usar o método abaixo ou descrito neste post para implementá-los manualmente.

5: Sistemas de gerenciamento de conteúdo personalizados

Eu já postei um exemplo dos metadados no código acima. Esse é basicamente o mesmo código que você cola no cabeçalho do seu site, independentemente da arquitetura que você está usando. Ajuste as coisas de acordo com as necessidades do seu site e copie o código no cabeçalho do seu site. Não importa especificamente onde está, desde que esteja entre as tags <head> e </head> na parte superior do site.

Não se esqueça de personalizar as tags. Os principais que você precisa prestar atenção são as tags de cartão, site, criador e domínio. Eles devem ser preenchidos com o tipo de cartão que você deseja, o identificador do Twitter do seu site e do criador do conteúdo e a URL do seu domínio. Em seguida, valide o cartão depois de implementar as alterações.

Se o seu cartão ainda não funcionar após a validação, você deve ler o guia de solução de problemas do Twitter. É provável que haja um erro simples em algum lugar que você possa corrigir em alguns segundos.