Share para Facebook, Twitter e Orkut
Postado por Guilherme Grillo
As Redes Sociais se tornaram a maior fonte 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 nas Redes Sociais é imprescindível, por isso, um botão de share (compartilhar) se tornou obrigatório.
Quem utiliza blogs baseados em WordPress, conta com diversos plugins para a divugação nas redes sociais que tornam fácil a sua implementação, mas e nos sites corporativos, pessoais, hotsites e aqueles que utilizam um publicador mais limitado? Este post, mostra como inserir um botão de compartilhar das principais redes sociais utilizadas no Brasil.
Botão de Share do Twitter
Este é um dos mais simples, já que no twitter só se utiliza texto. O compartilhamento é feito criando 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/dV1pxJ
Faça o teste: Divulgue no Twitter
Botão de Share do Orkut
O compartilhameno no Orkut, principal rede social do Brasil, funciona de forma muito semelhante a do Twitter, endereço de share + parâmetros, com a diferença de que 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/wp-content/uploads/2010/12/guilhermegrillo-100.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/dV1pxJ&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/wp-content/uploads/2010/12/guilhermegrillo-100.gif
Faça o teste: Divulgue no Orkut
Botão de Share do Facebook
Dos 3, 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 os que são 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/dV1pxJ
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 que é 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 que você passou, é 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.html
Este 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/wp-content/uploads/2010/12/guilhermegrillo-100.gif" />
<script type="text/javascript">
function init() { window.location = 'http://webmkt.me/dV1pxJ'; }
window.onload = init;
</script>
</head>
<body>
</body>
</html>
Faça o teste: Divulgue no Facebook
Perceba que 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 que você deseja compartilhar, esse JavaScript serve justamente para fazer o redirecionamento desta para a página que contém o conteúdo. Nada impede de você utilizar apenas as meta tags do Facebook na página que contém o conteúdo, é desse jeito mesmo que deveria ser feito. 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.
Este post contou com a contribuição de Ailton Ribeiro.
Tags: Compartilhamento > Compartilhar > Facebook > MSN > Orkut > Share > Twitter
Comentários
40 Respostas para “Share para Facebook, Twitter e Orkut”
Deixe um comentário
Sobre
Blog sobre desenvolvimento web, consultoria de SEO e SEM, Web Marketing e Analytics para os principais Mecanismos de Busca.
Social Media
February 11th, 2011 @ 18:03
Excelente post Grillo. Com certeza vai ajudar muita gente que achava complicado compartilhar seus conteúdos e na verdade não é.
February 11th, 2011 @ 18:40
[...] This post was mentioned on Twitter by Biss G. Lee III and maicololiveira, Guilherme Grillo. Guilherme Grillo said: Como compartilhar (#share) conteúdo no #twitter #facebook e #orkut – http://webmkt.me/dV1pxJ #socialmedia [...]
February 15th, 2011 @ 03:14
Bem bacana o código, mas… como fazer para inserir mais de uma imagem no share???
February 15th, 2011 @ 10:51
Olá Rodrigo, cada um dos links “Faça o teste” é um link comum, está com texto, mas você poderia colocar a imagem de cada uma das redes sociais.
Por exemplo:
<a href="http://www.facebook.com/sharer.php?u=http://guilhermegrillo.com/share/share-this-post.html" rel="nofollow"></a>
Agora, se você quer ter apenas um botão de share e quando passar o mouse sobre ele aparecer as 3 opções então você terá que fazer isso com Javascript (jQuery) e CSS. Coloque os 3 links de share em uma DIV e dê show/hide via jQuery por exemplo.
February 15th, 2011 @ 15:24
Rodrigo,
Acho que agora entendi sua pergunta de outra forma. Quando você faz um link direto de share do Facebook sem informar a imagem ele tenta buscar dentro da página as imagens para que você possa escolher. Por exemplo: http://www.facebook.com/sharer.php?u=http://guilhermegrillo.com.br/share-para-facebook-twitter-orkut, neste caso aparecerão 3 imagens para o usuário escolher com qual ele quer compartilhar a mensagem.
February 16th, 2011 @ 12:08
Excelente! Me salvou no Facebook! Parabéns!
February 23rd, 2011 @ 13:38
Ve se consegue me dar uma ajuda …
Eu inseri o share dentro de um projeto em flash através do geturl do botão enviando para o share-this-post e ficou 100%. Tem alguma forma de fazer o Like nessa mesma linha ?? apenas url ??
abs
February 23rd, 2011 @ 15:50
Oi Leonardo. Ainda não existe API para o Like, então, a única forma é através do botão mesmo, infelizmente.
abs.
Grillo
March 14th, 2011 @ 22:24
[...] serão seus seguidores dedicados que contribuirão ativamente para promover a sua marca através de links de compartilhamento, re-twittar, ou espalhar a sua empresa através da [...]
April 2nd, 2011 @ 20:43
Procurei pra todo lado como colocar botão share do Facebook no meu site, mas com as palavras que eu escolhesse, e não o título da pagina, e só consegui graças as suas dicas.
Muito obrigado !!!
April 4th, 2011 @ 11:12
Que bom Tiago… abs.
April 14th, 2011 @ 04:40
[...] você se interessou e também quer compartilhar conteúdo nas Redes Sociais, saiba como aqui. Esta entrada foi publicada em As Redes. Adicione o link permanenteaos seus favoritos. ← [...]
April 16th, 2011 @ 16:45
Estou com dificuldade pra fazer de forma automática a codificação para o twitter e orkut. O site que passou ele converte, mas preciso de forma automática para uma página que puxe os dados do BD.
Já procurei na net e não encontro.
April 18th, 2011 @ 15:46
Tudo bem?
Desenvolvo e-mails marketing para uma empresa e gostaria de adicionar 3 botões no topo do e-mail como forma de compartilhamento (Twitter, Facebook e Compartilhar e-mail com amigos).
Procurei algum aplicativo que possa aplicar RT ou CURTIR automaticamente com o subject do e-mail enviado, mas não achei. Encontrei apenas links que toda vez que fosse desenvolver um e-mail, teria que fazer manualmente o assunto, a frase (ou subject) e inserir o link encurtado.
Recebo diariamente e-mails de inúmeras lojas online e site de marcas. A grande maioria usa esses dispositivos que redirecionam automaticamente (ou eles tem o tempo de fazer manualmente cada link desses? [acredito que não, rs])
Aguardo contato. Caso não tenha ficado claro, segue o meu e-mail para qualquer esclarecimento de dúvida.
April 23rd, 2011 @ 09:02
Oi Márcio, tudo bom? Isso tem a ver com a linguagem que você está utilizando, como eu trabalho mais com Front-end, não tenho muita experiência nessas conversões, mas o povo que trabalha comigo faz essa conversão automaticamente no PHP e no Flash. Procure na linguagem de programação que você está utilizando sobre URL encode / decode. Vou me informar com eles e caso tenha alguma informação útil posto aqui pra você.
Abs.
Guilherme
April 23rd, 2011 @ 09:05
Leandro, é um assunto bom pra pesquisar, vou dar uma olhada nisso e qualquer coisa te respondo.
abs.
Guilherme
May 1st, 2011 @ 00:08
show!! funcionou perfeito!!
May 3rd, 2011 @ 16:38
Deus o abençõe! Estava tentando colocar o botao de like numa aplicação autenticada e estava ficando maluca. Só me dei conta que o facebook não ia conseguir pegar os dados por conta da autenticação, lendo este post!!! Muito obrigada
May 26th, 2011 @ 11:37
Post fodástico eim =D, so falta um agora simplificando o botão curtir/recomendar do facebook, eu também peno pra caramba ateh conseguir
June 3rd, 2011 @ 10:27
Cara parabens, otimo post.
Mas por ele ainda não consegui resolver meu problema…
Seguinte. O face lê a pagina toda, pega as imagens, o titulo, mas na descrição ele ta pegando um paragrafo que tem lá no final falando sobre cadastro no site. E não o subtitulo da notícia ou o principio do texto.
O site em questão é http://www.flamengo.com.br
Se puder me ajudar…
grato!
June 3rd, 2011 @ 11:10
Rafael, blz? Obrigado por comentar.
Não encontrei a página que tem o botão de share… você pode ser mais específico para que eu possa ver como o código está aplicado?
abs.
June 6th, 2011 @ 19:20
Oi Guilherme, tudo bem?
O seu post foi o que chegou mais perto de todas as tentativas que eu fiz! rs
Mas tenho uma dúvida: criei um botão padrão nas configurações do wordpress, qua aparece em todas as páginas do meu blog. Eu devo fazer um botão de compartilhamento para cada página ou há como ter uma URL padrão que adequa automaticamente o conteúdo da página em questão que o visitante quer compartilhar? Ou seja: eu devo configurar um botão para cada página do meu blog???
June 7th, 2011 @ 13:16
Oi Flávia, obrigado por comentar. Você não precisa criar um botão para cada página não. Basta utilizar a url de compartilhamento padrão:
Facebook
http://www.facebook.com/sharer.php?&u=<?php the_permalink() ?>
abs.
Guilherme Grillo
June 9th, 2011 @ 16:35
Olá Guilherme muito bom seu tutorial, mas estou com um probleminha no facebook fiz o share pelo flash, na janela de compartilhar aparece tudo certinho link, titulo, foto mas quando eu compartilho no mural do facebook aparece outro link. Aparece o link pagina principal do site, tem como desabilitar esse link.
segue o exemplo:
http://www.jotasg.com/HotSite
June 14th, 2011 @ 15:42
Olá Guilherme!
Seu post foi o mais objetivo e claro dos que pesquise, consegui implementar os botões do Orkut, Twitter e Facebook no Flash com facilidade.
Porem estou esbarrando em uma dificuldade: No Facebook criei o arquivo share-this-post, porem ao compartilhar ele “pega” o endereço do site onde o arquivo está hospedado e coloca como URL abaixo do Título. Essa URL não pode aparecer, eu preciso que seja outra URL ou que não apareça URL. Você sabe o que fazer?
Obrigada!
June 14th, 2011 @ 19:44
Jurandir e Rose, os problemas são parecidos. No caso do Jurandir, ele sempre coloca o domínio abaixo do título, se a pessoa clicar em Hydros vai para o hotsite, e no link, para o domínio onde o hotsite está hospedado. Para a Rose, você está compartilhando esta URL, por isso é ela que aparece abaixo do título, para mudar isso você precisa compartilhar a página mesmo se for possível. O arquivo “share-this-post” serve apenas para o caso de não ser possível para o Facebook, acessar a página devido a alguma restrição técnica, como login necessário, scripts de geolocalização, etc.
Espero ter ajudado e obrigado.
Guilherme Grillo
June 15th, 2011 @ 09:40
Guilherme,
O caso é parecido com o do Jurandir mesmo. Mesmo compartilhando direto a pagina ele coloca abaixo do título o domínio onde está hospedado e isso é o que não poderia aparecer.
Obrigada!
July 9th, 2011 @ 03:31
Parabéns pelo artigo, perfeito, muito bem explicado.
Forte abraço.
July 26th, 2011 @ 15:02
Olá Guilherme, eu tentei fazer de forma automatica utilizando .php passando os valores de titulo, descricao imagem e url de redirecionamento pelo $_GET[], porem, percebi que o facebook nao pega os dados pelo $_GET[].
Segue o link:
http://www.portalcatalao.com.br/portal/facebook.php?
tituloPagina=titulo da Pagina&descricaoPagina=Aqui vai a descricao&imgPagina=www.MEUSITE.com.br/imagem.jpg
&urlPagina=http://www.MEUSITE.com.br/teste.php
Segue o codigo:
<meta property="og:title" content="” />
<meta property="og:description" content="” />
<meta property="og:image" content="” />
function init() { window.location = ”; }
window.onload = init;
Se eu tirar o $_GET[] e colocar os textos funciona normalmente, porem com o $_GET[] nao funciona, sabe resolver esse problema?
É que eu nao posso ter um html para cada pagina que quero redirecionar, por isso preciso dessa solução.
Obrigado
July 26th, 2011 @ 15:35
Oi Luiz… essa página a parte em HTML serve apenas para os casos em que existe algo que impeça o Facebook de obter as informações da página. Se você não possui este impedimento, como redirecionamento por geoip, cookie, etc… não há porque utilizar esta página com o redirect. Você pode utilizar o share na página normalmente com todas as informações dinamicamente ou não e compartilhá-las via facebook.com/share.php?&u=SUAPAGINA.
Qualquer dúvida só falar. Abs.
July 26th, 2011 @ 18:43
Olá Guilherme, precisava de usar esse método seu por que o facebook estava capturando as imagens errada, havia uma forma de resolver isso mas eu teria que fazer redundancia de consulta sql para que fosse impresso nas tags do facebook dentro do ou teria que estar mudando boa parte do meu código para resolver o problema.
Mais graças a esse tutorial consegui resolver o meu problema sendo que ao invés de utilizar $_GET[] eu utilizei url amigável para resolver este problema onde passa o titulo, descricao, imagem e redirecionamento pela própria url.
Segue um exemplo de funcinando corretamente: http://www.portalcatalao.com.br/cinema/
Obrigado.
Este post foi de grande ajuda
July 27th, 2011 @ 10:53
Perfeito… que bom que deu tudo certo. Qualquer dúvida estou a disposição. Abs.
August 19th, 2011 @ 16:51
Boa tarde … Post muito legal…
Estou com pequeno problema… estou tentando fazer com o orkut e até que aparece a postagem, mas quando clico com “compartilhar” aparece a seguinte mensagem “Your client has issued a malformed or illegal request. That’s all we know.” O que será hein?
Valeu
September 1st, 2011 @ 23:21
Olá Guilherme, tudo bem?
Fiz tudo direitinho como no post. Só que inicialmente utilizei o texto do exemplo.
Agora tento modificar o texto, modificando o arquivo share-this-post.html e não consigo. O texto não muda de forma alguma. O que devo fazer?O endereço do meu share ficou assim: http://www.facebook.com/sharer.php?u=http://www.healthandnutrition.com.br/share/share-this-post.html
Mas o texto que insiste em permanecer é o “Veja como inserir botões para compartilhar seu conteúdo nas 3 principais Redes Sociais usadas no Brasil.”
O endereço que aparece abaixo do título também não é o que está na linha function init() { window.location = ‘http://webmkt.me/dV1pxJ'; } do meu código.
Me ajuda por favor! Estou precisando muito desta informação e o seu post foi o mais bem explicado.
Att,
Lucas Tinôco
September 2nd, 2011 @ 12:42
Oi Lucas, o Facebook guarda em cache quando você faz o Share, por isso a mensagem está aparecendo errado… daqui a algum tempo ele limpa o cache e atualiza, mas caso você queira testar, altere o seu endereço de share passando algum parâmetro e você verá a mensagem correta. Exemplo:
http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.healthandnutrition.com.br%2Fshare%2Fshare-this-post.html?=01234
Espero ter ajudado.
Abs.
Guilherme
September 5th, 2011 @ 11:52
Falae, vlw pela ajuda…
Estou com dificuldade em colocar a descrição e uma imagem nas materias que quero compartilhar.
Pode me ajudar ?
Abraço.
http://www.concenter.com.br
October 13th, 2011 @ 13:35
Olá Guilherme.
Já estou de cabelo branco de tentar buscar uma solução qdo cheguei no seu blog.
Espero que vc consiga me ajudar! Fiz a loja para minha cliente (link acima) e coloquei um “addthis” em cada produto.
Tanto no curtir qto no compartirlhar link vira mexe acontece o mesmo erro. O produto tá certo mas a imagem não tem nada haver. Pega aleatoriamente imagem de outros produtos. Se pelo menos pegasse a logomarca da loja, vai lá, mas pega de outros produtos que nem estão na mesma categoria.
Usei aquele debugger e não acusa erro, mas mesmo lá a imagem está errada. Vc tem como me ajudar pls!!!
October 13th, 2011 @ 14:48
Oi Márcia, o share do Facebook pega automaticamente aquela imagem pequena, no teste que fiz no seu site ele me deu mais de 30 opções de imagem, entre elas, a do produto que eu estava vendo. Tente colocar a seguinte tag na sua página e faça um teste pra ver se dá certo:
<meta property="og:image" content="http://caminho-das-imagens-do-seu-site/IMAGEM-DO-SEU-PRODUTO.gif" />
Lembrando que o ideal é que essa imagem tenha o tamanho de 100×100 pixels.
Se der certo avise pelos comentários…
Boa sorte.
October 31st, 2011 @ 14:46
Olá. Primeiramente parabéns pelo seu post.
Gostaria de saber como fazer para o facebook pegar a imagem daquela notícia? Pois, toda vez quando clico no botão compartilhar, ele funciona tudo certo, todos os links e textos aparecem no facebook, porém, a imagem é errada e não tem nada a ver com a notícia.
Eu vi sobre essa meta property=”og:image”, mas são imagens que o banco traz, imagens dinâmicas, toda notícia tem sua imagem. Então, como fazer para a imagem aparecer a certa?
Obrigado.
October 31st, 2011 @ 16:07
Leandro…basta você colocar o caminho das imagens e no final, a variável com o nome da imagem que está no banco…
Qualquer dúvida, só falar…
abs.
Guilherme