15.1 Botão de curtir do Facebook
Boa parte dos sites atuais possui a funcionalidade de curtir do Facebook. É um botão simples mas integrado com a rede social que permite aos usuários curtirem a página atual e compartilhar essa informação em seus perfis.
É uma poderosa ferramenta de marketing, já que permite a recomendação pessoal de produtos e serviços de maneira viral.
Incluir essa funcionalidade no nosso site é bastante simples. O Facebook provê um código JavaScript e HTML para copiarmos na nossa página, onde podemos passar diversas configurações.
O botão é representado por um div vazio cheio de parâmetros:
<div class="fb-like" data-send="false" data-layout="box_count" data-width="58" data-show-faces="false"></div>
Mas só esse div vazio, obviamente, não fará o botão aparecer. Precisamos também importar um arquivo JavaScript deles e rodá-lo:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Esse código é colocado uma vez só no final da página. Podemos ter vários botões na mesma página.
Melhor que digitar esse código é usar a documentação no site do Facebook que nos permite customizar o botão e já dá o código pronto para ser copiado:
https://developers.facebook.com/docs/reference/plugins/like/
15.2 Exercícios: Facebook
-
Configure o script do Facebook na página de Produto. Antes de fechar a tag body, adicione:
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/pt_BR/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> -
O botão em si é um div que devemos colocar na página onde queremos exibi-lo. Para nós, coloque logo após os elementos de título e preço do produto.
<div class="fb-like" data-href="http://www.mirrorfashion.net" data-send="false" data-layout="box_count" data-width="58" data-show-faces="false"></div>
Teste a página e veja o botão renderizado.
- (opcional) Posicione o botão melhor na página usando CSS.
15.3 Para saber mais: Twitter
Você também pode acrescentar o botão de postar tweet. Basta seguir a documentação do Twitter:
https://dev.twitter.com/docs/tweet-button
O botão em si é um link que será transformado pelo script:
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
E o script deve ser colocado no final da página também:
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src="http://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
15.4 Para saber mais: Google+
Podemos também colocar o botão de +1 do Google+. Para obter o código, basta ir em:
http://www.google.com/webmasters/+1/button/
O botão é um div vazio, parecido com o do Facebook:
<div class="g-plusone" data-annotation="inline"></div>
E o script deve ser colocado no final da página:
<script type="text/javascript">
window.___gcfg = {lang: 'pt-BR'};
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
Além disso, o Google+ possui metadados próprios diferentes daqueles do OpenGraph:
<!-- Update your html tag to include the itemscope and itemtype attributes -->
<html itemscope itemtype="http://schema.org/Product">
<!-- Add the following three tags inside head -->
<meta itemprop="name" content="Fuzzy Cardigan">
<meta itemprop="description" content="O Fuzzy Cardigan é fantástico para a
meia estação, quando o friozinho começa a chegar. Seu estilo
parisiense combina com o charme da estação.">
<meta itemprop="image"
content="http://www.mirrorfashion.net/img/produtos/foto2-verde.png">
Google+
-
Acrescente o botão do Twitter na página. Obtenha o código em: https://dev.twitter.com/docs/tweet-button
Ou use o botão vertical com:
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
Além disso, no final da página, importe o script do Twitter:
<script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){js=d.createElement(s);js.id=id; js.src="http://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); </script> -
Coloque também o +1 do Google, cujo código está em:
