2

Adicionei ao meu blog um botão Curtir e compartilhar nos rodapés dos posts do meu Blog, para que o leitor tenha a opção de escolher Curtir ou não, somente aquele post. Mas ao clicar em Curtir, observei que o botão não compartilhava o post, mas sim o blog.

Alguém poderia me ajudar a resolver esse problema? Gostaria de saber como colocar um botão Curtir e compartilhar que permita que o leitor curta somente aquele post que está lendo?

A plataforma utilizada é o Blogger. Tenho algumas páginas estáticas e para essas, sim, gostaria que aparecesse a opção de Curtir essas páginas.
Utilizei o código gerado a partir do Facebook Developers, em Social Pluggins:

 <!-- Insere "curtir" e "compartilhar" do facebook -->
<div id='fb-root'/>
<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/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Código HTML:
<!-- insere o botão "curtir" e o "compartilhar" do facebook -->
<div class="fb-like" data-href="http://enchendoacaixa.blogspot.com.br/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

Desde já, muito obrigada!

2
  • 1
    Isto é um blog em WordPress? Blogger? outro? Se isto é uma página estática em HTML, vocè está a criar o código dos botões curtir, compartilhar e apontando os links de partilha para cada postagem? Qual a sua estrutura do código de compartilha para as redes sociais?
    – Chun
    Commented 6/02/2016 às 1:13
  • Estou usando o Blogger. O código que estou utilizando é aquele disponível na página do Facebook Developers. Vou editar minha pergunta e colocar o código para vocês verem. Commented 6/02/2016 às 14:41

2 Respostas 2

3

Isso acontece porque estás a definir o link da página inicial do teu blog como sendo o link para ser curtido/compartilhado no código que gera esse botão:

data-href="http://enchendoacaixa.blogspot.com.br/"

Para que ele funcione como um botão de compartilhamento para cada postagem, terás que modificar este código e alterá-lo para:

expr:href='data:post.url'

que é o código de rastreamento que pega as URL's de cada publicação do Blogger dispensado pela Google para estes e outros propósitos.

No entanto para que ele funcione e pegue cada link correto de cada postagem, o código precisa de estar inserido dentro do loop de cada item/publicação, ou seja deverá estar inserido dentro da estrutura/container que gera cada item/publicação única dentro do teu tema. Que será dentro de um código parecido com este abaixo:

<b:includable id='post' var='post'>
    ....
</b:includable>

Após encontrares este código já sabes que estás dentro do código que gera cada item/publicação.
Dentro deste mesmo excerto de código procura o melhor lugar no qual queres implementar o código do botão Like e cola-o dentro do post no melhor lugar que achares que vai ficar. Tudo junto o código ficará algo como:

<!-- Insere "curtir" e "compartilhar" do facebook -->
<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/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

<!-- insere o botão "curtir" e o "compartilhar" do facebook -->
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='true' expr:href='data:post.url'/>

Nota: Não te esqueças de sempre alterar as aspas " " por ' ', eu já fiz esse alteraçáo no código que gera os botões.

7
  • Obrigada! Deu certo! Só queria saber, e não sei se preciso abrir outra pergunta aqui: Quando vou compartilhar o post aparece apenas o título, mas não imagem do post, existe alguma forma de configurar isso? Commented 9/02/2016 às 15:58
  • Para a imagem do post aparecer, tens que fazer upload de uma imagem para o teu blog (ou seja a imagem que queres que seja a imagem de destaque para um certo post) e adicioná-la no início da postagem utilizando o editor de HTML no post que estiveres a editar, da seguinte forma: <img style="display:none;" src="https://i.sstatic.net/gL1sB.jpg" /> adiciona o style="display:none;" se não quiseres que esta og:image seja apresentada no post quando publicado, assim ela só irá servir como data para a og:image.
    – Chun
    Commented 9/02/2016 às 23:35
  • Podes também ver estas duas perguntas para te informar mais sobre isso: Facebook descrição e thumbnail é pequena e também: Facebook Open Graph meta tags para Blogger. Se ainda tiveres dúvidas é só dizer.
    – Chun
    Commented 9/02/2016 às 23:39
  • Não funcionou... Adiciono minhas imagens ao picasa web e utilizei o link, como você me sugeriu, mas não funcionou... Uma coisa que observei é o primeiro link de imagem da página que postei e depois troquei e não atualizou até agora... quis trocar porque o tamanho fica muito maior e quase não dá ver, até editei a imagem para que tivesse um tamanho de 355x355px, e troquei o link, mas ainda não mudou... goo.gl/Rz8n27 Você saberia me dizer se isso demora mesmo ou tem alguma forma de arrumar isso? Commented 10/02/2016 às 0:51
  • Se copias-te as meta tags da pergunta do segundo link, faz esta mudança no código das meta tags. Eu inspecionei o código fonte do teu Blog e vi que a imagem está lá, só que ele está a detetar uma imagem thumbnail demasiado pequena com o tamanho de 42px por isso que ela ainda não mudou. Depois de atualizares debuga o link da página que atualizas-te aqui no Object Debugger
    – Chun
    Commented 10/02/2016 às 1:25
2

Para o botao de compartilhar,vá no Editar HTML do seu blog e procure por

<div class='post-header-line-1'/>

Embaixo disso, coloque isso:

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Espero que consiga. Abraços. Dúvidas? Comente na minha resposta.

Esqueci de falar. Após feitas as alterações, vá em Design > Elementos da página

Procure o quadrado referente a "Postagens do Blog" e clique em editar. Então, marque as caixinhas referentes ao compartilhamento e salve.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .