Visitar na Amazon

quarta-feira, 5 de julho de 2017

Os melhores plugins e botões sociais para Blogger

Enviado em 10:50 - por Diguinho - Marcadores :

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!

Sobre o autor
Gabriel Medina é o autor deste blog, atualmente estuda eng. elétrica, ama jogar damas, assistir desenhos, filmes e séries, além de praticar esportes saudaveis.
Inscrever-se neste Blog via Email :

0 Comentários:

Observação: somente um membro deste blog pode postar um comentário.

© 2017 Webzoon. Designed by Bloggertheme9
Powered by Blogger.
back to top