Os melhores plugins e botões sociais para Blogger

28 de janeiro de 2014

19 comentários:
Sempre digo que o compartilhamento de um blog é muito importante. Neste artigo estarei listando alguns dos melhores plugins sociais de compartilhamento usados no blogger, e como configura-los de maneira correta, para que sejam totalmente funcionais.

Facebook Like Button

Usado para recomendação de páginas e artigos, é muito útil em seu blog.  Além de tornar simples a interação entre seu blog e a maior rede social do mundo.

O botão pode ser gerado através desta página. Veja abaixo a maneira correta de preencher cada campo:

URL to Like: Aqui deverá ser inserido o url do seu blog, caso queira tornar o botão fixo ao blog. Se desejar tornar o botão flexível a postagens e páginas, basta deixar esta área em branco, e possibilitará a publicação de todo o conteúdo do seu blog.
Layout: Será o modelo usado no botão. É possível configurar alguns modelos, no entanto acho mais interessante usar o layout "button_count". Lembrando que a escolha do layout não irá interferir na funcionalidade do botão.
Width: É aonde você configurará a largura do botão. Se deixar em branco, o conteúdo será configurado automaticamente (o mais recomendado).
Action Type: E por fim o campo onde você configurará a ação a ser executa: curtir ou recomendar. Existe pouca diferença entre as ações. O botão recomendar, geralmente é usado em blogs de notícias.
Após configurar o botão, clique em "Get Code". O código gerado poderá ser inserido através de um gadget HTML/JavaScript em seu blog. Lembrando que, para que o gadget funcione é necessário que insira o código JavaScript junto ao conteúdo do gadget. Ou seja, será necessário copiar os dois códigos que são gerados, e colar no conteúdo do gadget. O conteúdo do gadget ficará semelhante a este:
<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 = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=492814520829136";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
 O código destacado de vermelho é o código JavaScript. Já o código com listagem normal, em preto é o código de incorporação do gadget, em HTML.

Botão +1 do Google+

Outro recurso muito interessante. O botão +1 possibilita que recomente conteúdo do seu blog diretamente no Google+. O botão +1 poder ser gerado nesta página. Entenda o que preencher:
Tamanho: São as dimensões do botão. Os tamanhos podem variar conforme seu interesse ou layout do blog.
Nota: Se você deseja ver seu botão em forma de balão ou em linha.
Idioma: Bem simples, qual o idioma deseja ver o botão.

Um exemplo de como seria o código:
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
<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/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
A instalação pode ser feita com o mesmo processo do botão anterior. Através de um gadget HTML/JavaScript. Ou se desejar, é possível usar o gadget que o blogger disponibiliza, que gera o código do botão e o insere automaticamente em seu blog com um gadget próprio.

Tweet Button do Twitter

Este outro botão é gerado através desta página. Ele tem como função o compartilhamento do conteúdo do seu blog na página do twitter de quem realizar o compartilhamento. O botão é semelhante aos anteriores, tanto na função, quando no procedimento de configuração. Entenda um pouco mais sobre cada campo de preenchimento:

Share URL: Este campo é o que definirá qual url compartilhar ao twitter. Por padrão, é sugerível que mantenha a opção "Use the page URL" habilitada, para que todas as páginas de seu blog, tanto de postagens, como páginas estáticas possam ser compartilhadas.
Tweet text: Campo correspondente ao título a ser inserido no Tweet que será criado. Sugerível também que mantenha a opção "Use the title of the page" habilitada.
Show count: Esta opção deve ser habilitada caso deseje que o botão tenha um contador de Tweets. Eu particularmente gosto de manter um contador de compartilhamento, para ter uma noção do alcance do conteúdo do blog.
Via, Recomend, Hashtag: Configurações opcionais, que não afetaram no funcionamento do botão.
Large button: Habilite esta opção se desejar que o botão seja relativamente grande, comparada ao seu modelo padrão.
Opt-out of tailoring Twitter: Opção relacionada a Sugestões personalizadas do Twitter.
Language: Define o idioma do botão.

O código gerado seria semelhante a este:
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="pt">Tweetar</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
O processo de instalação é o mesmo usado nos outros dois botões anteriores, do Facebook e G+, com o gadget HTML/JavaScript.

Instalando os botões no rodapé de suas postagens

Embora eu ensinar a como inserir o botão individualmente através do gadget HTML/JavaScript, creio que é algo muito útil o uso de uma barra de compartilhamento abaixo de cada post. Conforme já ensinei neste artigo, é possível cria-la de uma maneira prática, sem a necessidade de criar botão por botão e configura-los. No entanto, como já estamos com os botões criados, não custa nada configurarmos estes botões abaixo das postagens. O procedimento necessita de uma boa atenção, para que tudo ocorra de forma correta.

A primeira coisa que precisamos fazer é o alinhamento e junção dos 3 botões em uma única linha. Poderíamos usar CSS, mas para poupar tempo e explicação, criaremos uma tabela simples com HTML (3x1), e iremos inserir os botões em cada célula da tabela:
<table>
  <tr>
    <td><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 = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=492814520829136";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" expr:href='data:post.url' data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div></td>
    <td><div class="g-plusone"></div>
<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/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</td>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-lang="pt">Tweetar</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</td>
  </tr>
</table>
Eis o código pronto, bastando inserir no blog. Vamos em "Modelo" › "Editar HTML". Cliquem na caixa de código, e pressione as teclas "Ctrl + F". Procure por:
<div class='post-footer'>
Você encontrará dois códigos. Cole o código abaixo do segundo código que você encontrar. Ou do trecho que estiver na parte mais inferior do código do blog. Salve as edições.

Você receberá esta mensagem de erro: "Erro ao analisar XML, linha 1434, coluna 62: The reference to entity "appId" must end with the ';' delimiter.", este erro ocorreu comigo em todas as vezes que fiz o procedimento de inserir este código JavaScript do Facebook diretamente no HTML do blog. Para resolve-lo bastará alterar esta linha de código: js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=492814520829136;";

Alterando appId, por amp;appId. Ficará assim:   js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&amp;appId=492814520829136;";

Agora, salve novamente as alterações, e verá que o erro desapareceu, e a barra de compartilhamento está aparecendo normalmente abaixo de todas as postagens do seu blog.



A imagem acima ilustra a barra de compartilhamento que criamos em funcionamento.

Um ponto muito interessante a ressaltar é a questão de problemas provenientes ao compartilhamento com o facebook. Já fiz um tutorial sobre isso, e reforçando que para melhor interação entre o facebook e seu blog, é necessário que crie postagens fáceis de serem identificadas pelo sistema de compartilhamento do site. Criando imagens quadradas (com a mesma dimensão de altura e largura), e criando breves descrições no início das postagens. E é isso, espero que gostem!

19 comentários:

  1. Boa tarde Henrique, muito bom o seu artigo , fiz as alterações no meu blog para tentar ajustar um problema que estou tendo com o botão curtir do Facebook, infelizmente não funcionou, estou com o meu blog hospedado no Blogger, você sabe informar se há alguma configuração extra a ser realizada ?

    Segue o site do Meu blog:
    http://marteeparaosfracos.blogspot.com.br/

    ResponderExcluir
  2. Olá Genival,

    Seria este seu problema?
    http://henriquezenny.blogspot.com.br/2013/10/problemas-com-miniaturas-no.html

    Boa sorte!

    ResponderExcluir
  3. Não consigo!! Já tentei de tudo!!
    Tinha conseguido um tempo atrás, mas fui as cores do template, e sumiu... depois nunca mais consegui colocar...

    ResponderExcluir
  4. Olá Henrique, meu parabéns pela postagem. Muiito explicativa e útil. Estou com um probleminha que acredito seja simples mas não sei como resolver. Ao compartilhar as postagens do meu blog que está hospedado no Blogger, nunca aparece o texto da postagem. Sempre é um trecho do cabeçalho do blog. Por favor, você pode me informar como eu devo fazer pra que em vez do cabeçalho, no compartilhamento apareça um trecho da postagem?
    Fico-lhe desde já grato.

    ResponderExcluir
  5. Olá Henrique, parabéns pelo blog, encontrei bastante coisa útil. Porém não estou conseguindo alinhar os botões mesmo eles estando na mesma linha. O G+1 e o twetter ficam um pouco acima do curtir e comentar e não sei o que fazer para corrigir. Veja no rodapé no final dos posts como ele está ficando. http://blogamadaamanda.blogspot.com.br/
    Agradeço se puder me ajudar.

    Obrigada

    ResponderExcluir
  6. Olá meu nobre, ótimo trabalho e parabéns pela sua ajuda.
    Estou com dúvida, funcionou perfeitamente, entretanto, no meu blog ele não ficou um próximo ao outro, e sim separados. O que poderia ser? Se puder dar uma olhada, ficaria grato.

    Att.

    http://www.novosadms.com.br

    ResponderExcluir
  7. Olá Henrique, muito obrigada pelas informações que achei aqui! Você me ajudou muito! Esse erro XML nos plugins estava infernizando minha vida, mas agora está tudo funcionando direitinho, graças a você. Inclusive usei esse "amp;" em outras situações e também funcionou.

    Valeu demais!
    http://www.blogperfila.com.br/

    ResponderExcluir
    Respostas
    1. Publiquei com o erro, tendo o objetivo de explicar como resolver. Pois sei que muitos sofrem com ele, até porque, encontrei essa solução em um blog em inglês, e achei interessante compartilha-la :)

      Excluir
  8. Oi Henrique tudo bem? O Post é muito bom e funcionou no meu blog, porem, eu gostaria de saber como fazer para que os botões se associem com o link de cada post, mesmo na pagina inicial, como se vê em vários blog, onde a contagem e compartilhamento se refere a cada post individualmente e não ao link da pagina. No meu blog, quando se curte um post, a curtida se refere a pagina que estou, por ex na primeira pagina ou na segunda... assim curtindo todos os post dessa mesma pagina. O que poderia ser feito? Muito obrigada, beijos.

    ResponderExcluir
    Respostas
    1. Olá Marina,

      Os códigos que disponibilizei já estão modificados para exibir exatamente o compartilhamento específico para a postagem, independente de estarem na página inicial ou não.

      Conforme você deve notar, ao invés de definir um link específico eu usei: expr:href='data:post.url' - que é uma tag nativa do blogger, que buscará o url específico ao post, assim, criando um compartilhamento específico, mesmo na página inicial.

      Abraços!

      Excluir
  9. Oi Henrique,

    Muito obrigada pela dica! Já faz tempo que estou atrás desses botões com contador e em formato de barra para o meu blogger e não estava tendo muito sucesso pra encontrar ou implantar... Copiei esse último código que vc sugeriu no meu HTML e o resultado foi QUASE perfeito. Saiu no local que eu queria e alinhado, porém os nomes dos botões do FB ficaram em inglês (like e share) e ficou aparecendo uma borda cinza ao redor da barra dos botões, dividindo-os em 3 colunas - uma pros dois botões do FB, outra para o G+ e outra para o Twitter. Você saberia me dizer o que posso corrigir para ficar exatamente igual ao modelo que você mostrou na foto desse post?

    Muito obrigada desde já!

    ResponderExcluir
  10. O melhor post sobre o assunto. Muito pratico e bem explicado. Obrigado!

    ResponderExcluir
  11. Olá eu coloco o código e quando faço o teste "curtindo" a postagem, logo em seguida pede pra confirmar, eu confirmo da esse erro: " Esta mensagem contém conteúdo que foi bloqueado pelos nossos sistemas de segurança." Gostaria de colocar o mesmo código de compartilhamento que você utiliza no fim do post

    ResponderExcluir
  12. Parabéns pelo tutorial e pelo blog, será que poderia me ajudar? Entre no meu Blog e veja meus botões de compartilhamento, seria possível adicionar apenas a caixa de contagem? Pois gostei muito dos icons e não queria retira-los. Segue de volta?

    http://blogdomvo.blogspot.com.br/

    ResponderExcluir
  13. Muito obrigado pela ajudar

    Segue de volta ?

    https://segredodeumacacheada.wordpress.com/

    ResponderExcluir
  14. Oi!

    Tenho uma questão.

    Consigo partilhar a mensagem acabada de escrever com imagem correta, no facebook, só que o texto que aparece na miniatura da publicação, não condiz com o texto da mensagem. (A situação acontece no blogger).

    Qual poderá ser o impasse aqui?

    ResponderExcluir
  15. Olá Henrique, parabéns pelo post! Consegui adicionar o codigo no blog da minha empresa, porém de uns dias para cá o botão de compartilha do face aparece a seguinte mensagem ao clicar: "Aplicativo não configurado: Este aplicativo ainda está em modo de desenvolvimento, e você não tem acesso a ele. Mude para um usuário de teste registrado ou peça permissão a um administrador do aplicativo." O que pode ser?

    ResponderExcluir