Como adicionar botões de compartilhamento ao Blogger
Importante: antes de editar o HTML do seu template, faça um backup do modelo do Blogger. Pequenas alterações no HTML podem afetar o layout do blog.
Por que trocar os botões padrão
Simplesmente escrever posts já não basta — o conteúdo precisa ser facilmente compartilhável nas redes sociais. O Blogger inclui uma opção básica de “Mostrar botões de compartilhamento”, mas esses botões padrão são limitados: você não pode escolher quais redes aparecem, e faltam botões sociais muito usados, como Facebook Like e Twitter Tweet.
Neste artigo eu mostro como usar o serviço AddThis para adicionar botões mais completos e personalizáveis ao seu blog Blogger, com exemplos para Facebook e Twitter.
Alternativas rápidas
- Usar os botões sociais oficiais (Facebook/Twitter) — boa integração, mas exige código separado para cada rede.
- Usar outros agregadores (ShareThis, Sumo) — funcionalidades semelhantes ao AddThis.
- Implementar botões manualmente com links de compartilhamento — mais controle, exige manutenção.
Set‑up com AddThis
- Registre uma conta gratuita no AddThis.
- No painel do AddThis, escolha “Get AddThis” ou “Obter AddThis” para gerar o código inicial.
Ao gerar o código você verá uma prévia. Para personalizar, escolha “Customize” e depois selecione o estilo e a plataforma “Website” para obter o HTML completo.
Escolha o estilo mais próximo do que deseja e clique em “Grab It” para copiar o código.
Onde colar o código no Blogger
- No painel do Blogger, vá em Design.
- Clique em Edit HTML para abrir o código do seu tema.
- Ative Expand Widget Templates (Expandir templates de widget) para ver todo o HTML.
Dependendo de onde quer os botões, cole o código do AddThis no local adequado. Uma colocação comum é logo após o conteúdo do post — perto da tag ou do bloco que contém o corpo da postagem.
Depois de colar, salve o template e visualize o blog para confirmar a aparição dos botões.
Personalizando os botões do AddThis
O AddThis fornece um bloco HTML/JS que você pode editar. Há duas partes principais: a configuração geral do widget e os botões específicos que aparecem.
Funções gerais
No widget, use atributos para passarem dinamicamente o título e a URL do post no Blogger. Em templates do Blogger você pode usar expressões como:
...botões aqui...
- expr:addthis:title=’data:post.title’ — faz com que o título do post seja enviado ao compartilhar.
- expr:addthis:url=’data:post.url’ — garante que a URL permanente do post seja usada.
Quando um leitor clicar em Tweet, o texto já virá formatado com o título e o link do post.
Botões adicionais
Dentro do container, especifique os botões que deseja exibir. Exemplo para exibir Tweet e Like:
tw:viadefine o usuário que aparece como origem quando alguém tuita seu post.fb:like:layoutcontrola o layout do botão Like.
Exemplo final pronto para Blogger
Abaixo um exemplo funcional que combina os pontos anteriores. Substitua ‘ra-YOUR-PUBID’ pelo seu pubid do AddThis e ‘seu_usuario_twitter’ pelo seu nome no Twitter.
Mini metodologia passo a passo
- Crie conta no AddThis e gere o código base.
- No AddThis, escolha Website para obter o HTML completo.
- No Blogger, faça backup do template e abra Edit HTML.
- Localize o ponto onde quer inserir (ex.: após o corpo do post).
- Cole o HTML do AddThis, incluindo os atributos expr: para título/URL.
- Salve o template e teste em vários posts e navegadores.
- Ajuste botões e estilo no painel do AddThis conforme necessário.
Checklist por função
Para blogueiros (não técnicos):
- Fazer backup do template antes de editar.
- Pedir ao desenvolvedor se não se sentir seguro.
- Confirmar que o botão Tweet apresenta seu usuário.
Para desenvolvedores/front‑end:
- Usar expr:addthis:title e expr:addthis:url para dinamicidade.
- Evitar inserir o script do AddThis mais de uma vez.
- Testar responsividade em telas pequenas.
Snippet de configuração rápida (cheat sheet)
- Não repita o script do AddThis em cada post; coloque-o uma vez no template.
- Para incluir Facebook Like e Tweet, use as classes ‘addthis_button_facebook_like’ e ‘addthis_button_tweet’.
- Para atribuir autoria no Twitter, inclua tw:via=’seu_usuario’.
Quando essa solução falha e alternativas
- Se você precisa de total controle visual, criar botões manuais (links com parâmetros de URL) é mais adequado.
- Se a política de privacidade do seu site exige que nenhum terceiro execute scripts sem consentimento, prefira soluções que não carreguem JS externo ou implemente consentimento prévio (cookie consent).
Glossário em 1 linha
- AddThis: serviço que agrega botões de compartilhamento e fornece scripts para inserir em páginas.
- expr:addthis: atributo do Blogger para avaliar expressões do template e inserir valores dinâmicos.
Sugestões para pré‑visualização social
- Título OG: mantenha o título do post claro e abaixo de 60 caracteres.
- Descrição OG: resumo curto de 110–140 caracteres que incentive o clique.
- Imagem OG: use uma imagem 1.91:1 ou 1200×630 px para aparência ótima no Facebook/Twitter.
Testes e critérios de aceitação
- Botões aparecem logo após o conteúdo do post em desktop e mobile.
- Compartilhar no Twitter inclui o título e o link corretos e indica seu usuário via tw:via.
- O script do AddThis é carregado apenas uma vez por página.
Conclusão
AddThis simplifica a vida: gera botões prontos, permite personalização e integra múltiplas redes. Para a maioria dos blogs, usar AddThis traz benefícios rápidos sem a necessidade de programar botões individuais. Se tiver requisitos de privacidade rigorosos ou quiser controle visual absoluto, considere alternativas ou implementações manuais.
Resumo rápido:
- Faça backup do template antes de editar.
- Use expr:addthis:title e expr:addthis:url para conteúdos dinâmicos.
- Teste o fluxo de compartilhamento em pelo menos duas redes e dispositivos.
