Apêndice - Mais integrações com serviços Web


Description

"Pessoas viviam em fazendas, depois foram viver nas cidades. Agora todos nós vamos viver na Internet" -- Sean Parker

 

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.

 

like.png

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

  1. 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>
    
  2. 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.

     

    like.png
  3. (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>

 

tweet.png

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+

  1. 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>
    
  2. Coloque também o +1 do Google, cujo código está em:

    http://www.google.com/webmasters/+1/button/

 



Recommended Comments

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a Comment

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.