A Maneira Mais Simples (e Mais Performante) de Oferecer Links de Compartilhamento para Mídias Sociais

Neste último verão, eu escrevi The Essential Meta Tags for Social Media sobre como os desenvolvedores podem preparar páginas web para otimizar sua aparência quando compartilhadas em mídias sociais. Mas e quanto a criar os links para permitir que os usuários compartilhem essas páginas web? Facebook, Twitter e LinkedIn oferecem inúmeras maneiras de fazer isso, algumas envolvendo geradores de botões e outras que requerem JavaScript externo. Para evitar tudo isso, no entanto, você pode criar seus próprios links para compartilhar páginas da web. E a melhor parte é que é simples de fazer você mesmo. Veja como.

Basic Concept: Apenas um link

Ao compartilhar páginas web usando links, você está essencialmente enviando um pedido de GET (ou seja, clicando em um link) para uma URL fornecida por cada serviço de mídia social. Depois, anexando uma série de pares nome/valor (parâmetros de consulta como ?title=Title) ao final desta URL, você pode especular a URL da página web que você deseja compartilhar e, às vezes, informações adicionais.

Agora, certos símbolos nos pedidos GET conhecidos como “caracteres reservados”, precisam ser codificados corretamente para não interferir com as funções normais do navegador. Estes caracteres estão sujeitos a “codificação percentual” – ou seja, são representados em parâmetros de consulta com um “%” seguido por um código hexadecimal de dois dígitos. Estes são os caracteres reservados e seus equivalentes codificados em percentagem.

Nota: Um espaço pode ser representado por “%20” ou “+”.

Obviamente, não há necessidade de memorizar estes códigos hexadecimais. Existem muitos recursos que fornecem conversões (Bing tem um incorporado no motor de busca) e, como você verá em breve, o JavaScript também pode lidar com o levantamento pesado a este respeito. Vamos ver alguns dos serviços de mídia social mais populares e aprender como podemos compartilhar páginas da Web por meio deles.

Facebook

Por seu Guia do Desenvolvedor, o Facebook especifica a seguinte URL para enviar solicitações de GET ao compartilhar uma página da Web:

https://www.facebook.com/dialog/share

Embora existam quatro parâmetros de consulta disponíveis, apenas dois são necessários: a URL da página da Web que você deseja compartilhar e uma ID do aplicativo, que os desenvolvedores podem obter ao se registrarem no Facebook. Se você não tiver um App ID, o processo de registro não é oneroso, mas não há necessidade de se preocupar quando existe uma solução ainda mais simples.

O método original de compartilhamento de páginas web do Facebook, sem o App ID necessário, não é mais mencionado em nenhuma de suas documentações, mas ainda é suportado. Na verdade, com inúmeros sites usando este método, não posso imaginar que ele seria depreciado em breve. Esta URL é:

https://www.facebook.com/sharer.php

O único parâmetro disponível é “u”, que é usado para especificar a URL da página web que você quer compartilhar. Aqui está um exemplo que compartilha a página inicial do CSS-Tricks no Facebook – vá em frente, corte e cole em um navegador para ver o resultado.

https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F

Como explicado anteriormente, a URL compartilhada é necessariamente codificada em porcentagem. Observe também como “?” designa o início do primeiro parâmetro de consulta. Os parâmetros subsequentes da consulta são separados por “&” como será visto em breve.

Twitter

Twitter refere-se ao compartilhamento de uma página web via URL como um Tweet Web Intent – a URL a ser usada é:

https://twitter.com/intent/tweet

Unlike Facebook, onde apenas a página web que está sendo compartilhada pode ser especificada, Twitter permite que você faça tack em algum texto e qualquer número de hashtags. Os usuários terão a oportunidade de editar tudo isso antes de tweetar, mas isso lhes dá um avanço no caso de não poderem ser incomodados. Por exemplo, digamos que você queria twitar as seguintes informações:

A URL para isso, com os parâmetros de consulta codificados em porcentagem e quebras de linha adicionados para maior clareza, é:

https://twitter.com/intent/tweet?url=http%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html

E isso dá:

Você vai notar que o Twitter pré-seleciona o texto, o que permite uma fácil edição pelo usuário. E, lembre-se, o tweet precisa ter menos de 140 caracteres, então é melhor não fornecer nenhuma cópia que seja muito longa. No interesse da simplicidade, eu omiti a discussão de três parâmetros menos utilizados, que podem ser encontrados descritos em detalhes na Documentação dos Desenvolvedores do Twitter. Estes parâmetros adicionais permitem especificar o nome de usuário associado ao tweet, nomes de usuário sugeridos e um ID de um tweet relacionado.

LinkedIn

A URL a ser usada ao compartilhar no LinkedIn é:

https://www.linkedin.com/shareArticle

No total, há cinco parâmetros disponíveis conforme detalhado por este gráfico extraído da documentação dos desenvolvedores do LinkedIn:

Além da URL da página web que você deseja compartilhar, outro parâmetro de consulta chamado “mini” é necessário. Mas, como você pode ver, seu valor nunca muda, então nós podemos codificar isso na URL. Para demonstrar, vamos compartilhar o seguinte no LinkedIn:

>

Esta dá o seguinte URL – novamente, quebras de linha adicionadas para maior clareza:

https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.css-tricks.com%2F&title=CSS-Tricks&summary=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&source=CSS-Tricks

Embora não mencionado explicitamente na sua documentação, se o parâmetro “title” for omitido, o LinkedIn irá pegar este conteúdo da tag Open Graph <meta property="og:title"> da página compartilhada. Da mesma forma, se o parâmetro “resumo” for omitido, será utilizado o tag Gráfico Aberto <meta property="og:description">. Quanto ao parâmetro “fonte”, nada na documentação especifica como este valor é usado ou exibido ao compartilhar uma página web – parece que ele pode ser ignorado com segurança.

Sabendo tudo isso, se a página web que está sendo compartilhada tem o complemento adequado das tags do Open Graph, basta especificar a URL, pois os parâmetros “title” e “summary” serão devidamente preenchidos.

Colocando tudo junto

Agora que sabemos a sintaxe a ser usada ao compartilhar páginas web em redes sociais, como podemos implementar exatamente este código? Talvez a forma mais comum seja simplesmente listar um grupo de links de compartilhamento com o estilo apropriado com CSS:

<ul> <li><a href="https://www.facebook.com/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li> <li><a href="https://twitter.com/intent/tweet?..." target="blank" rel="noopener noreferrer"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li> <li><a href="https://www.linkedin.com/shareArticle?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li></ul>

A adição de target="_blank" na tag anchor permite que o diálogo de compartilhamento apareça em uma nova janela ou aba, que funciona bem em todos os dispositivos, do desktop ao móvel.

But hard-coding esses links, com a codificação percentual dos parâmetros da consulta, podem ser tediosos e propensos a erros. Para qualquer página web servida dinamicamente por um CMS, esta seria a oportunidade perfeita para ter esta compressão de dados realizada no lado do servidor e inserida onde necessário no HTML.

A outra opção é usar o Social Media Sharing: HTML Links Generator que eu criei no CodePen. Isto permite que você insira qualquer um ou todos os parâmetros necessários que acabamos de revisar, e irá emitir o HTML apropriado para você inserir em seu próprio código.

Veja a Pen Social Media Sharing: HTML Links Generator por Adam Coti (@adamcoti) em CodePen.

Como desenvolvedor web freelance trabalhando quase exclusivamente no front-end, optei por usar a funcionalidade JavaScript/jQuery que, sem personalização, funciona como uma solução turnkey para meus projetos. Desta forma, posso ter certeza que todos os links de compartilhamento serão devidamente tratados, quer eu esteja trabalhando em um web site estático, customizando temas do WordPress, ou entregando templates para serem integrados em um CMS.

Este é o HTML que eu uso, com classes que designam o serviço de compartilhamento em particular. No JavaScript, a função setShareLinks(), que anexa click eventos aos botões de compartilhamento, é chamada quando o Document Object Model (DOM) está pronto:

<ul> <li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li> <li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li> <li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li></ul>

function socialWindow(url) { var left = (screen.width - 570) / 2; var top = (screen.height - 570) / 2; var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left; window.open(url,"NewWindow",params);}function setShareLinks() { var pageUrl = encodeURIComponent(document.URL); var tweet = encodeURIComponent(jQuery("meta").attr("content")); jQuery(".social-share.facebook").on("click", function() { url = "https://www.facebook.com/sharer.php?u=" + pageUrl; socialWindow(url); }); jQuery(".social-share.twitter").on("click", function() { url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet; socialWindow(url); }); jQuery(".social-share.linkedin").on("click", function() { url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl; socialWindow(url); })}

A URL da página web atual é facilmente adquirida lendo uma propriedade do objeto document. E, para o Twitter, a tag Open Graph <meta property="og:description"> fornece convenientemente conteúdo apropriado para um tweet padrão.

Agora, a pedido de alguns dos meus clientes, eu lanço a URL recém-formada em uma janela secundária (pop-up) de tamanho especial, utilizando window.open(). Na maioria dos navegadores, esta janela é posicionada horizontalmente e verticalmente centrada na tela. Curiosamente, se um usuário estiver logado em sua conta de mídia social, Facebook e LinkedIn redimensionarão esta janela secundária para as dimensões necessárias. O Twitter não, por isso utilizo uma largura e altura padrão que lhe fornece bens imobiliários suficientes. Quanto à capacidade de resposta, os tablets e dispositivos móveis interpretam a janela secundária como uma nova aba. Uma demonstração desta funcionalidade pode ser encontrada em CodePen.

See a Pen Social Media Sharing: Automated Link Creator por Adam Coti (@adamcoti) em CodePen.

Mas usando uma janela pop-up, embora antes comum, é agora desaprovada por razões de acessibilidade. Uma solução simples é definir a variável params para uma string vazia no JavaScript acima. Fazendo isso, a URL é lançada em uma nova janela ou aba dependendo da configuração do navegador do usuário.

Conclusão

Como diz o ditado macabro, há muitas maneiras de esfolar um gato. A técnica acima é simplesmente o meu método preferido. Você pode ter uma maneira melhor, mais otimizada. Talvez usando atributos de dados no HTML (para especificar hashtags, por exemplo) que podem ser lidos por JavaScript e anexados como parâmetro de consulta onde for necessário. Espero que isto possa pelo menos servir como inpiração para sua própria implementação.