Viralize: veja como usar os botões para as redes sociais. Disponibilizar meios para facilitar o compartilhamento aumenta o retorno e a divulgação do seu site.
Por Guilherme Grillo
As redes sociais se tornaram as maiores fontes de divulgação espontânea de conteúdo e isso é muito importante para as pessoas, para os buscadores e para as empresas e seus negócios. Estar presente nelas é imprescindível, por isso, um botão de share (compartilhar) é obrigatório.
Quem utiliza blogs baseados em WordPress, conta com diversos plugins para a divulgação nas redes sociais e esses tornam fácil a sua implementação, mas e nos sites corporativos, pessoais ou hotsites que utilizam um publicador mais limitado?
Também é possível e este artigo mostra como inserir botões de compartilhar das principais redes sociais utilizadas no Brasil.
Botão de Share do Twitter
Este é um dos mais simples, pois o Twitter é baseado somente em textos. O compartilhamento é feito ao criar um link para a URL de share do Twitter com os parâmetros text (texto), lang (idioma) e url (endereço da página a ser compartilhada).
A URL de share do Twitter é http://twitter.com/share?.
Uma dica importante: Pode haver dificuldade no processamento da sua URL por conta dos espaços e acentuação, assim, recomenda-se codificar o texto para um formato que possa ser usado na URL sem ser confundido com parâmetros ou erros de endereço em si. Um site que disponibiliza este serviço é o Albion Research Ltd.
Atenção: A codificação do texto para a URL deverá ser feita apenas nos shares de Twitter e Orkut que são por URL, no Facebook não é necessário.
Após a conversão, o texto: Share para Facebook, Twitter e Orkut – deverá ser usado como Share%20para%20Facebook%2C%20Twitter%20e%20Orkut%20-%20.
O endereço final do link será:
http://twitter.com/share?text=Share%20para%20Facebook%2C%20Twitter%20
e%20Orkut%20-%20&lang=pt&url=http://webmkt.me/custom-shareFaça o teste: Divulgue no Twitter
Botão de Share do Orkut
O compartilhamento no Orkut, principal rede social do Brasil, funciona de forma muito semelhante ao do Twitter, endereço de share + parâmetros, com a diferença: ele permite um título e uma imagem (thumbnail) para divulgar o conteúdo.
A URL de share do Orkut é: http://promote.orkut.com/preview?nt=orkut.com
E os parâmetros:
- tt -> título
- du -> endereço do link
- cn -> texto de divulgação
- tn -> link para o thumbnail (imagem) (ex: http://
guilhermegrillo.com.br/ico/webinsider.gif)O endereço final do link será:
http://promote.orkut.com/preview?nt=orkut.com&tt=Share%20para%20Facebook%2C%20Twitter%20e%20Orkut
&du=http://webmkt.me/custom-share&cn=Veja%20como%20inserir%20bot%C3
%B5es%20para%20compartilhar%20seu%20conte%C3%BAdo%20nas%203
%20principais%20Redes%20Sociais%20usadas%20no%20Brasil.&tn=http://
guilhermegrillo.com.br/ico/webinsider.gifFaça o teste: Divulgue no Orkut
Botão de Share do Facebook
Dos três, compartilhar no Facebook pode ser o mais complicado tecnicamente. Diferente do Orkut e Twitter, ele precisa ler o conteúdo da página e identificar algumas tags para criar a mensagem de compartilhamento e isso causa problemas em sites que possuem redirecionamento por geolocalização ou naqueles feitos com alguns publicadores de conteúdo.
De forma simples, o compartilhamento via Facebook pode ser feito utilizando o endereço de share + o parâmetro url.
http://www.facebook.com/sharer.php?&u=http://webmkt.me/custom-share
Se tudo correr bem, o Facebook irá pegar as informações de meta description e da tag title ou h1 para montar a mensagem de compartilhamento. Ela é editável e você poderá compartilhar o conteúdo. Agora, caso ele mostre como título e texto de descrição apenas o endereço da URL passada, é porque o Facebook não conseguiu acessar este endereço, então, devemos usar o modo alternativo.
A solução, é criar um arquivo html com redirecionamento em javascript para a página final e compartilhar este html em vez da página.
A URL ficaria assim:
http://www.facebook.com/sharer.php?u=http://guilhermegrillo.com/share/share-this-post.htmlEste arquivo precisa estar em um local acessível, sem restrições e em seu código, todos os parâmetros serão passados por meta tags exclusivas do Facebook.
As meta tags são:
- og:title -> título
- og:description -> texto de divulgação
- og:image -> link para a imagem
- window.location -> link para a página que você quer divulgar
Segue o código do arquivo: share-this-post.html
< html>
< head>
< meta property="og:title" content="Share para Facebook, Twitter e Orkut" />
< meta property="og:description" content="Veja como inserir botões para compartilhar seu conteúdo nas 3 principais Redes Sociais usadas no Brasil." />
< meta property="og:image" content="http://guilhermegrillo.com.br/ico/webinsider.gif" />
< script type="text/javascript">
function init() { window.location = 'http://webmkt.me/custom-share'; }
window.onload = init;
< /script>
< /head>
< body>
< /body>
< /html>Faça o teste: Divulgue no Facebook
Perceba: no código, existe uma função JavaScript. Como você está compartilhando a página share-this-post.html e não é ela que tem o conteúdo a ser compartilhado, esse JavaScript serve justamente para fazer o redirecionamento desta para a página correta.
Nada o impede de utilizar apenas as meta tags do Facebook na página que contém o conteúdo, esse é o jeito correto. Esta alternativa serve apenas para o caso da página não ser acessível de modo direto.
Caso tenha alguma dúvida ou queria acrescentar algo, utilize os comentários.
Fonte: Este artigo contou com a contribuição de Ailton Ribeiro. [Webinsider]
Nenhum comentário:
Postar um comentário