logo

Código de Twitter Cards para Blogger

sexta-feira, setembro 30, 2016


Código de Twitter Cards para Blogger

Já até perdi a conta de quantos códigos de twitter cards para blogger testei e que não funcionavam até que encontrei esse aqui que compartilho hoje com você. Todo blogueiro sabe o quanto é importante trabalhar a divulgação de um blog corretamente, sem congestionar as caixas de mensagens dos seguidores no twitter ou dos amigos do Facebook.

O Twitter Cards realmente confere uma aparência melhor aos links, principalmente o "Cartão de Resumo com Imagem Grande" ou  "Summary Card with Large Image", que na minha opinião é o melhor, pois exibe uma imagem maior contribuindo ainda mais para chamar a atenção dos seguidores, aumentando, portanto, a chance de atrair mais leitores para o blog.

Infelizmente, os links que divulgamos no Twitter não funcionam como no Facebook, ou seja, com carregamento de imagens de forma automática, por isso é que precisamos configurar um código para que esse mecanismo funcione também no Twitter e para que isso aconteça corretamente no Blogger, é preciso instalar um código dentro do código do template.

Agora, será que esse esforço vale a pena? Sinceramente, na minha opinião, acho que vale a pena sim, principalmente porque os links ficam com uma aparência muito mais profissional, semelhante aos links dos grandes portais de notícias, por exemplo, e que realmente chamam bem mais a atenção dos leitores que queremos atrair para o blog.

Além disso, o Twitter Cards também transmite maior segurança ao leitor no momento de clicar no link, pois os Cards são conferidos pelo próprio Twitter. Outra vantagem, é que se usarmos a publicidade paga do Twitter, com o Card corretamente configurado facilita muito no momento de preparar o criativo do anúncio para ser vinculado no Twitter.

Veja a diferença na imagem abaixo:

Comparando Links sem Twitter Cards e com Twitter Cards


Somente por essa foto acima, já podemos perceber a diferença entre o link com a imagem grande e um link simples. Lembrando, que para o código funcionar corretamente, será preciso incluir a descrição de pesquisa em todas as postagens, pois sem isso não funcionará porque o Twitter Cards não "puxa" apenas o resumo, mas sim a descrição da postagem no blogger. Outra dica: se as postagens antigas do blog tiverem com imagens ruins, troque uma a uma ou faça o melhor possível nas postagens mais recentes pelo menos, para isso, você pode usar um editor de imagem gratuito e online, eu uso o Canva (https://www.canva.com) que é gratuito, fácil e rápido de usar. No Canva, é possível configurar imagens exclusivas para postagens sem correr o risco de infringir direitos autorais, há disponíveis no site tanto imagens gratuitas como pagas para quem deseja incrementar um pouco mais as postagens. 

Após trocar as imagens, se for necessário, e incluir a descrição de pesquisa no editor de postagem do Blogger, basta entrar em Modelo > Editar HTML  e procurar pela tag </head>, após encontrar, cole o código abaixo acima dessa tag. 

Copie e cole o código abaixo entre as tags  <head> e </head> do seu template: 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
      <b:if cond='data:blog.postImageUrl'> 
        <b:if cond='data:blog.metaDescription'> 
          <meta content='summary_large_image' name='twitter:card'/> 
          <meta content='@usuario_blog' name='twitter:site'/> 
          <meta content='@usuario_autor' name='twitter:creator'/> 
          <meta expr:content='data:blog.pageName' name='twitter:title'/> 
          <meta expr:content='data:blog.metaDescription' name='twitter:description'/> 
          <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> 
          <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/> 
        </b:if> 
      </b:if> 
</b:if> 

Você vai precisar trocar o '@usuario_do_blog' pelo usuário que representa o seu blog no Twitter e o '@usuario_autor' pelo seu usuário de autor do blog no Twitter. Se for o mesmo, não tem problema nenhum, basta repetir o único usuário existente, aqui no blog funcionou perfeitamente com somente um usuário repetido nos dois lugares.

Agora, basta conferir no Card Validator do Twitter (https://cards-dev.twitter.com/validator) colocando a url do artigo que pretende divulgar e, se tiver tudo certinho, vai aparecer o seu artigo com imagem grande e nenhum erro apresentado como na imagem abaixo: 

Twitter Cards Configurado Corretamente no Card Validator


E como divulgar o link com o Twitter Card? Para isso, eu instalei uma extensão no Chrome que faz exatamente esse trabalho e facilita muito, que é carregar o Twitter Card diretamente do link do blog que deseja publicar.

Você pode ler mais sobre a extensão nesse link: https://browsernative.com/share-on-twitter-chrome-extension ou instalar diretamente da Chrome Web Store através desse link aqui. Lembrando, que essa extensão já carrega o Card com o usuário e publica diretamente em sua conta do Twitter, dispensando qualquer outro tipo de configuração.

Link para Baixar o Código do Twitter Cards para Blogger: 




Espero ter ajudado de alguma forma! Qualquer dúvida, basta deixar nos comentários abaixo que vamos juntos resolver! Sugestões, dicas e críticas também são bem-vindas aqui! Um suuuuper abraço e até o próximo post!



Você Pode Gostar Também

0 comentários