Seu analista de mídias sociais insiste que cada página deva ter o maior número de botões sociais: o usuário precisa curtir no Facebook, retuitar no Twitter, adicionar no Google+, descobrir no Digg, notificar no Linkedin e fazer alguma coisa parecida em todas as outras 300 redes sociais que surgem a todo momento.
Mas existe um pequeno detalhe a ser considerado: elas pesam no código da página e atrapalham a performance. O usuário não vai interagir com algo que nem conseguem carregar em seus navegadores e dispositivos móveis.
Para exemplificar, o botão Curtir do Facebook aparentemente ocupa apenas 10 linhas, no máximo, no seu código-fonte. Mas estas 10 linhas solicitam o equivalente a 270kb de javascript e outras requisições HTTP que podem atrasar o carregamento de seu site. O botão de compartilhar do Google+ baixa mais 135kb. Twitter? 95kb. Linkedin? 80kb. Somando tudo, temos mais de meio megabyte de dados e sabe-se lá quantas chamadas à servidor para apenas quatro botões sociais. É mais pesado que a maioria das páginas da internet, considerando-se somente o seu código-fonte.
Mesmo que o navegador do usuário já tenha todos estes scripts armazenados em cache, ainda assim ele terá que interpretar e executar todo este código antes de seguir carregando o resto da página. Caso você não tenha percebido, todos estes códigos de botão social tem instruções para serem inseridos antes ou logo depois do <body>. Por que é do interesse das redes sociais que o serviço deles esteja imediatamente disponível, mesmo que o conteúdo em questão a ser compartilhado demore vários segundos a mais. Se houver algum problema na conexão entre o usuário e a rede social ou se ela for bloqueada por proxy ou firewall, o navegador vai continuar esperando a resposta antes de exibir o seu conteúdo.
Para complicar o cenário, existem empresas que oferecem plugins e pacotes de botões, para que você não precise “se preocupar com códigos complicados”. O que elas estão fazendo na verdade é acrescentar o código delas em cima do código já existente das redes sociais, aumentando ainda mais o seu tempo de carga…
Supondo que seja inevitável a inclusão destes botões sociais (e há quem defenda que não é inevitável), há formas mais inteligentes de usar o poder das mídias sociais sem precisar baixar scripts pesados.
Codifique sua URL
Todas as redes sociais solicitam que o link de sua página seja passado em uma representação URL-encoded. Isso significa que, ao invés de você utilizar https://www.codigofonte.com.br, você irá utilizar algo como http%3A%2F%2Fcodigofonte.com.br%2F, onde vários caracteres são substituídos por entidades equivalentes.
Existem diversos métodos de se converter uma URL para este padrão. Abaixo, vemos um exemplo em PHP:
$sURL = urlencode( 'http' . ($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] );
Dependendo da rede social, você também pode precisar converter o título da página, a descrição ou uma lista de hashtags (separadas por vírgulas e sem a # inicial).
Compartilhamento no Facebook é mais fácil do que parece. Você apenas fornece a URL convertida para URL-encode e o próprio Facebook captura o título, a descrição e um thumbnail:
URL: https://www.facebook.com/sharer/sharer.php
Parâmetros básicos:
- u = URL da página a ser compartilhada
Exemplo de link:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodigofonte.com.br%2F
Mais informações em: https://developers.facebook.com/docs/reference/plugins/share-links/
O Twitter permite que você adicione mais parâmetros ao link, mas o funcionamento é o mesmo:
URL: https://twitter.com/intent/tweet
Parâmetros básicos:
- url = URL da página a ser tuítada
- text = texto opcional
- hashtags = conjunto de hashtags, separadas por vírgulas e sem #
Exemplo de link:
https://twitter.com/intent/tweet?url=http%3A%2F%2Fcodigofonte.com.br%2F&text=Artigo&hashtags=web,redes%20sociais
Mais informações em https://dev.twitter.com/docs/intents
Google+
O compartilhamento de links na rede social do Google é idêntica ao do Facebook:
URL: https://plus.google.com/share
Parâmetros básicos:
- u = URL da página a ser compartilhada
Exemplo de link:
https://plus.google.com/share?url=http%3A%2F%2Fcodigofonte.com.br%2F
Mais informações em https://developers.google.com/+/web/share/
O Linkedin já possui algumas peculiaridades em relação aos demais, mas nada complicado:
URL: https://www.linkedin.com/shareArticle
Parâmetros básicos:
- mini = deve ser configurado para “true”
- url = URL da página a ser compartilhada
- source= o nome da empresa ou fonte (máximo de 200 caracteres)
- title = título do artigo (máximo de 200 caracteres)
- summary = uma pequena descrição do conteúdo (máximo de 256 caracteres)
Exemplo de link:
https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fcodigofonte.com.br%2F&title=Como%20Adicionar%20Bot%C3%B5es%20Sociais%20Usando%20o%20M%C3%ADnimo%20de%20C%C3%B3digo
Mais informações em https://developer.linkedin.com/documents/share-linkedin
Com estas dicas você pode montar seus próprios botões que se encaixem no seu layout, até usar sprites ou botões em CSS para otimizar ao máximo o número de requisições no servidor, reduzir a quase zero o processamento de scripts e ao mesmo tempo manter as principais vantagens do compartilhamento das redes sociais.
