Diversos

Como criar links de compartilhamento social

Veja como criar links para as principais redes como Twitter, Facebook e WhatsApp.
Google+ Pinterest LinkedIn Tumblr
Anúncios Google

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&amp;url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>" title="Digg isto">Digg</a>

Reddit

<a href="http://reddit.com/submit?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>" title="Reddit" target="_blank">Reddit</a>

Twitter

<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”.

Facebook

<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>

WhatsApp

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.

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

17 Comentários

  1. 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 }

  2. 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/

  3. 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!

Deixe um Comentário

Pin