Como adicionar Twitter cards no Blogger

Quando compartilhamos uma postagem no Facebook ou no Google+ esta mostra um pequeno sumario com uma foto em caso de haver uma. O Twitter também tem uma solução similar para ser aplicada em seus posts e ela se chama Twitter Cards, essa solução tem além desta função outras mais que as empresas de um modo geral estão usando, mas nesta matéria eu vou abordar o Twitter Card Summary.

As postagens do Blogger que tiverem o Summary Card adicionado ira mostrar a opção View Summary.

Ao clicar na opção View summary a postagem ficara assim:

Porque você deve adicionar o Twitter Cards no seu Blog

Ao adicionar o Twitter cards no seu Blog, as suas postagens que aparecerão no Twitter terão um visual melhor e claro mais informações serão adicionadas a postagem do Twitter que só aceita 140 caracteres.  Essa api (script) pode ser usada em qualquer Blog e para qualquer conta do Twitter e não somente a sua, isso significa que qualquer pessoa que quiser postar um previu do que leu no seu Blog poderá faze-lo sem problema.

Como adicionar um Twitter Card no seu Blog

Essa tarefa é muito simples e você poderá fazê-la seguindo as instruções abaixo.

Edite o template de seu Blog para adicionar o Twitter Card e para isso você devera se logar na conta de seu Blog para poder editar o layout conforme esta na figura:

Ao ir para opção 2 – Edit HTML você ira ver um texto no editor em primeiro lugar pressione Ctrl+F para fazer uma busca no Template, o que estará buscando é a tag

ao acha-la cole o texto abaixo acima dela. Você ira querer (e deve) modificar o primeiro @hddlab que aparece no texto colocando o nome que usa em sua conta do Twitter e troque o segundo @hddlab pelo nome que você usa para identificar quem escreve as tuas postagens. Lembre-se – antes de fazer qualquer modificação no template de seu Blog faca um backup dele se não souber como coloque a pergunta no Google – “Como fazer o backup do Blogger”.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.postImageThumbnailUrl'>
      <b:if cond='data:blog.metaDescription'>
        <meta content='summary' name='twitter:card'/>
        <meta content='@hddlab' name='twitter:site'/>
        <meta content='@hddlab' 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.postImageThumbnailUrl' name='twitter:image:src'/>
        <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
</b:if>
    </b:if>
</b:if>

Apos colocar o texto no local exato você vera seu template assim:

Próximo passo salve seu template modificado.

O nosso próximo passo é adicionar Meta decriptions (meta pesquisa) e também uma (ou mais) foto na postagem que iremos fazer, pois o sumario necessita que estas ações sejam executadas, e não se esqueça sem imagem o Twitter Card não ira aparecer.

Finalmente será necessário que o Twitter aprove o seu Twitter Card, para isso devemos ir ao website do Twitter conhecido como Twitter developer no seguinte endereço: https://dev.twitter.com/docs/cards/validation/validator 

Nesse local você ira validar a mudança que fez no seu Blogger, use a opção Validate & Apply  que esta em uma aba lateral.
Coloque a url do seu Blog ou da sua postagem e clique no botão “go”, o Twitter ira validar seu Card e após isso estará tudo ok e pronto para ser usado nas suas postagens. Pode ser que o processo de aprovação do seu Twitter Card não seja efetuado na hora, já houve casos de levar mais de dois dias, portanto não se desespere, se você seguir as instruções a risca esta tudo bem.

Maiores informações sobre Twitter cards podem ser encontradas nos endereços: https://dev.twitter.com/discussions/9657  e https://dev.twitter.com/docs/cards

Para finalizar existem os seguintes cards a disposição: 
Summary Card.

Summary Card with Large Image

Photo Card

Gallery Card

App Card

Player Card