Atualizado em 30/10/2018. As principais redes sociais oferecem botões de compartilhamento para inserção em blogs e sites. Mas nem sempre queremos o botão pronto. Às vezes precisamos personalizar o objeto clicável com uma imagem ou texto, e os modelos de botão disponíveis não atendem todo tipo de necessidade estética.
É seu caso? Saiba que é simples criar links para compartilhamento para o WordPress (e sites em geral em PHP). O código gera um link que funciona como os botões, mas a âncora fica por sua conta. Pode ser um texto, imagem, ou qualquer coisa normalmente passível de ter um link.
Para ver os links em ação, é só colocar os códigos em algum lugar de seu template em PHP.
Digg
<a href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php echo urlencode(the_title('','', false)) ?>" title="Digg isto">Digg</a>
<a href="http://reddit.com/submit?url=<?php the_permalink() ?>&title=<?php echo urlencode(the_title('','', false)) ?>" title="Reddit" target="_blank">Reddit</a>
<a href="http://twitter.com/intent/tweet?text=<?php the_title();?>&url=<?php the_permalink();?>&via=seunomenotwitter" title="Twittar sobre <?php the_title();?>" target="_blank">Twitter</a>
Mude o “seunomenotwitter” para… seu nome no Twitter! Isso significa que se seu Twitter é twitter.com/meublog, troque o “seunomenotwitter” por “meublog”.
<a href="https://www.facebook.com/sharer.php?u=<?php the_permalink() ?>" target="_blank" title="Compartilhar <?php the_title();?> no Facebook">Facebook</a>
Google Plus
<a href="https://plus.google.com/share?url=<?php the_permalink() ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Compartilhar no Google+"/></a>
Esse link será criado com uma imagem padrão de ícone do Google+. Para seguir o padrão dos demais, retire o trecho:
<img src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Compartilhar no Google+"/>
…substituindo por “Compartilhar no Google+”.
Tumblr
<a href="http://www.tumblr.com/share/link?url=<?php the_permalink() ?>" title="Compartilhar <?php the_title();?> no Tumblr">Tumblr</a>
Link para compartilhamento em dispositivos móveis:
<a href="whatsapp://send?link=<?php the_permalink() ?>" data-action="share/whatsapp/share">Compartilhe no Whatsapp</a>
Link para compartilhamento pelo WebApp:
<a href="https://web.whatsapp.com/send?text=<?php the_permalink() ?>" target="_blank">Whatsapp Web</a>
Importante: os links não devem funcionar em dispositivos diferentes. Por exemplo, o link móvel não funciona se a página estiver aberta num desktop, e alguns dispositivos podem não abrir o link web. Para total compatibilidade, é bom usar algum código de verificação do dispositivo, com uma exibição condicional de cada código.
💡
Para um link de compartilhamento no Pinterest, é só usar o código mostrado aqui, mas em vez da imagem, use um texto.
Para um link do Google +, o procedimento que encontrei é muito complicado e honestamente acho que não vale a pena. Se descobrir algum mais eficiente e simples mais pra frente, atualizarei este post.
19 Comments
Oi adorei as dicas, não entendo nada do assunto, já teste e deu certo, será que tem uma dica de como fazer após a pessoa compartilhar ser encaminhada para outra pagina?
Obrigada de verdade
Natalia
perfeito! Gratidãooooo
Parabéns pelo artigo!
Sem plugins, sem frescura…. no puro código!
O código para compartilhar no Facebook não esta funcionando
Alterado.
Eu estava louco atrás destes códigos. Obrigadão Daniel Lemes.
Para facebook nao está funcionando…
Meu código de compartilhamento no google plus. Funciona direito a principio.
<a target="_blank" href="https://plus.google.com/share?url=">Como criar um botão igual o que tem aqui no site de vocês para Compartilhar o artigo no Facebook ou no Twitter em vez de apenas o nome “Facebook” e “Twitter”.
CSS. O melhor jeito é usar a imagem como fundo (background) do link, com o texto escondido. Algo como:
.seulink { background:url(endereço-da-imagem) 0 0 no-repeat; text-indent:-9999px }
Não consigo encontrar o redirecionador para o WordPress..
Olá, os códigos parecem estar corrompidos, ao implementar nos templates e analisar pude notar que tem algo faltando, esta dica é muito útil pra mim se puder me ajudar, um abraço o/
Oi Abner
Qual está dando erro com você, todos? Pode descrever o erro e o que aparece ao tentar usar?
Muitíssimo obrigada!!!!
Por nada, Luciana!
Daniel, é inteligente por parte do blogueiro estilizar os botões de compartilhamento de modo a ficarem mais aproximados da cor do projeto. Ótimo tutorial.
Abraços, Arlindo Armando
Verdade Arlindo. Sabendo fazer uma estilização bacana, ficam mais atraentes que os botões padrão oferecidos pelas redes. Já vi alguns muito interessantes. Pena que o Google + ainda não tenha ajudado muito.
Abraço!
Muito boa a dica, exatamente o que eu estava procurando.
Sucesso e grande abraço.
Obrigado, Clayton, volte sempre!