Hoje em dia a integração de sites com redes sociais passou a ser quase que “obrigatória”, não só por ser uma excelente forma de compartilhar conteúdo, mas também como uma forma de interatividade com as pessoas.
As pessoas gostam de mostrar às outras o que curtem e também de compartilhar algo que seja relevante a elas. Quem lê um conteúdo muitas vezes tem a intenção de passar o conteúdo adiante. Por exemplo, ao clicar em um botão curtir do Facebook sua página aparecerá no mural desse usuário e assim todos os amigos da pessoa verão e poderão visitar o site, e assim sucessivamente. O mesmo para o Retweet do Twitter e o +1 do Google Plus, mas cada um têm suas peculiaridades, que irei citar no decorrer do tutorial.
Irei começar mostrando como implementar o botão de Retweet. Através do link https://twitter.com/goodies/tweetbutton é possível escolher a aparência do botão, o título que vai aparecer no tweet, a URL, etc. É gerado o código para colar na sua página.
Figura 1. Configuração
Exemplo de código gerado:
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="www.devmedia.com.br" data-text="Teste" data-count="horizontal" data-via="aqui-seu-nome-de-usuario-do-twitter" data-lang="pt">Tweetar</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>Coloque na seção head ou antes da tag de fechamento da seção body.
Propriedades:
- data-url:URL de sua página que irá aparecer no Tweet;
- data-text:título do Tweet;
- data-via: conta do twitter queserá vinculada;
- data-count:estilo do contador (horizontal, vertical ou nenhum);
- data-lang:“pt” para português.
A Figura 2 mostra como aparecerá ao clicar no botão. Note que possui o título, a URL encurtada e o endereço da conta. Funciona parecido com o botão like do Facebook, pois ao enviar aparecerá para todos os amigos do usuário.
Figura 2. Clique do botão
Veja como ficou o código:
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://platform.twitter.com
/widgets.js"></script>
</head>
<body>
<table border="0">
<tr>
<!--BOTÃO TWITTER-->
<td valign="top"><a href="http://twitter.com/share"
data-text="Título Teste" data-url="http://www.google.com.br" class="twitter-
share-button" data-count="horizontal" data-via="brunowebdev"
data-lang="pt">Tweet</a></td>
</tr>
</table>
</body>Recentemente foi lançado o botão de Follow (Seguir) e também é fácil de implementar. Basta colocar o seguinte código (lembrando que o/span>script type="text/javascript" src="http://platform.twitter.com/widgets.js"> tem que estar no código):
<a href="https://twitter.com/seu-nome-de-usuario-aqui" class="twitter-follow-
button" data-button="grey" data-show-count=”false” data-link-color="800080"
data-text-color="800080">Follow @seu-nome-de-usuario-aqui </a>Propriedades:
- data-button:blue ou grey;
- data-link-color: cor do link (utilizar código sem o “#” por exemplo: 800080);
- data-text-color: cor do texto (utilizar código sem o “#” por exemplo: 800080);
- data-show-count: mostra a quantidade de followers (true ou false).
Google Plus
O Google Plus One é uma nova funcionalidade integrada ao buscador com o objetivo de capturar as recomendações dos usuários através dos resultados apresentados pela página de pesquisa.
O conceito é bem parecido com o do “Curtir” do Facebook, pois se a pessoa gostar de um determinado conteúdo de um site ou do resultado mostrado pela página de pesquisa poderá dar sua recomendação apertando o botão “+1”. Para fazer uso do Plus One a pessoa deverá estar logada na conta do Google e seus amigos verão suas recomendações ao fazer pesquisas.
O Plus One também auxilia o buscador a definir o melhor resultado para apresentar ao usuário que está fazendo a busca através das recomendações do círculo social do indivíduo. Outra vantagem é atrair mais visitantes para o site, onde a pessoa, ao ver um link que um amigo visitou, também se sentirá confiante para visitar o link.
A página de configuração do botão é a seguinte: http://www.google.com/webmasters/+1/button/index.html, como mostra a Figura 3.
Figura 3. Configuração do botão
Existem quatro configurações de tamanho e o script é gerado abaixo, basta colocar na página.
<!-- Inclua esta tag na seção head ou logo antes da tag de fechamento da seção body -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Inclua esta tag onde desejar que o botão +1 seja exibido -->
<g:plusone size="medium"></g:plusone>Para incluir um link a ser recomendado basta colocar o atributo href na tag. Veja o código como ficou:
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'pt-BR'}
</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</head>
<body>
<table border="0">
<tr>
<!--BOTÃO DO GOOGLE+-->
<td valign="top"><g:plusone size="medium" href="//www.devmedia.com.br"></g:plusone>
</td>
</tr>
</table>
</body>Há também um plugin do Plus One para o browser Chrome, que é possível recomendar qualquer página, até mesmo a que não possuem o botão “+1”.
Você certamente já deve ter reparado que hoje a maioria dos sites possuem o botão Like ("Curtir") ou o botão Share ("Compartilhar") do Facebook.Botões que permitem aprovar e compartilhar o conteúdo entre os amigos na rede social.É interessante oferecer tais recursos ao leitor do site, não só como uma excelente forma de espalhar e divulgar o conteúdo, mas também como uma forma de interação com o usuário.
As diferenças entre os botões "Curtir" e "Compartilhar" é que o primeiro significa gostar de um determinado conteúdo, seja foto, vídeo, texto ou qualquer outro conteúdo disponível no site. O botão "Curtir" também se remete a status, logo um site que tenha um grande número no contador passa mais credibilidade. Já o "Compartilhar" permite ao usuário enviar conteúdo para os amigos. Há a opção de compartilhar com todos os amigos, publicar no mural de um seleto grupo de amigos ou enviar por e-mail.
Há duas maneiras de colocar os botões no site, uma maneira é através de iframe e outra usando XFBML e Javascript SDK, a linguagem de marcação própria do Facebook. Vamos começar com a maneira mais simples.
Iframe
<iframe src="http://www.facebook.com/plugins/like.php?href=//www.devmedia.com.br&layout=button_count&
show_faces=true&width=380&action=like&colorscheme=light&height=30&locale=pt_BR" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:100px; height:25px;" allowTransparency="true">
</iframe>No atributo "href" basta colocar a URL da página que deseja e se desejar mudar outros atributos.Na página oficial do botão "Curtir" é possível configurar e personalizar da melhor maneira e gerar o código, depois basta inserir no site, como mostra a Figura 4.
Figura 4. Mudanças nos atributos
XFBML
Coloque o script antes do fechamento da tag head:
<script src="http://connect.facebook.net/pt_BR/all.js#xfbml=1"></script>E no local que deseja exibir o botão coloque o seguinte código:
<fb:like href= //www.devmedia.com.br " layout="standard"
show-faces="true" width="450" action="like" colorscheme="light" />Botão Share ("Compartilhar")
Ao clicar no botão é aberto um popup com informações da página como título, descrição, imagens associadas, etc. Tais informações aparecem no mural dos amigos com o link para a página.
Para implementar coloque, antes do fechamento da tag:
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>E no local que deseja que o botão apareça coloque:
<a name="fb_share" type="box_count" share_url="//www.devmedia.com.br"&
gt;</a>Há também a possibilidade de criar o botão com um texto personalizado:
<a name="fb_share" type="button_count">Texto personalizado aqui</a>Para conhecer mais sobre os plugins do Facebook, visite a página oficial.
