02 dezembro 2013

02 dezembro 2013

Dicas para blogueiros: Comentários via Facebook no Blogger

Não sei se todas vocês já repararam, mas os posts agora têm duas opções de comentários: a opção padrão, via Blogger, e os comentários via Facebook, que foi um sacrifício pra colocar! Juro que li uns dez tutoriais e não conseguia fazer funcionar. Parece que com as atualizações mais recentes do Blogger, os códigos mudaram um pouco, mas aproveitei alguns tutoriais antigos e só mudei um pouco a ordem das coisas. Acabaram funcionando e eu decidi mostrar pra vocês como eu fiz. Vamos lá!

1. Esteja logado no seu Facebook (o seu perfil normal, não sua página) e clique na imagem abaixo. Clique em Create New App (onde está circulado em vermelho).


2. Preencha apenas as duas primeiras caixas. Dê qualquer nome e espere o Facebook verificar como 'valid'. Salve.


3. Uma tela com informações semelhantes às abaixo irá abrir. Copie o número do APP ID, você vai usar no próximo passo.


4. Agora vamos para o HTML. Você não precisa saber nada de HTML pra instalar esse código, viu? Entre no seu painel do blogger, vá em Modelo e clique em Editar HTML. Na tela que vai abrir, procure pela tag '<head>'. Ela geralmente fica nas primeiras linhas do código. (Exemplo) Se você não conseguir encontrar, dê CTRL + F e digite head. Abaixo dela, cole o código a seguir, substituindo o 'APP ID' pelo número gerado:

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='APP ID' property='fb:admins'/>

5. Dê CTRL + F de novo e encontre o código "<div class='comments' id='comments'>" e cole o código abaixo seguido dele. Eu colei o meu acima de "<b:if cond='data:post.commentPagingRequired'>", é outra opção também, caso você não encontre o primeiro código.

<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='52' width='640'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'/>

* Você pode substituir o código '640' pelo tamanho em pixels da largura da sua área de postagem.

O resultado vocês veem aqui embaixo, nos comentários do Pedras. :) Qualquer dúvida, podem perguntar! ;)




15 comentários:

Vitória Regina - Fil Rosa em 2/12/13 disse...

Boa dicas

Passa lá no blog!
Blog > Filrosa.blogspot.com
Twitter > @FilRosaOficial

@Vitória Regina

Karina Oliveira em 2/12/13 disse...

Uso ele (: Eu queria um de data do post. Já testei vários e NUNCA dá certo no meu blog! Faz?

Dona do blog
www.ataldacandy.com

Mayara em 2/12/13 disse...

@Karina Oliveira Data personalizada? Colorida, com fundo etc?

Larissa Souza em 2/12/13 disse...

Parece otimo, vou tentar assim que arranjar um tempinho!
blog-cherrie.blogspot.com

Alexia Cavalcante em 2/12/13 disse...

Adorei May, vou fazer isso no meu Blog.

Papo de Meninas
Sorteio

divulgablogsite muro em 8/12/13 disse...

Gostaríamos de propor parceria entre nossos sites com troca de Banners.

Seria um prazer por o vosso Banner em nossa área de parceiros: http://divulgablog.divulgablogsite.com/ranking.php


Pedimos que coloque em sua área de parceiros um dos nossos banners:
http://divulgablog.divulgablogsite.com/linkus.php

Agradecemos pela sua atenção.

Lissa Morgenstern em 9/12/13 disse...

Deu super certo, amei ^^

Danielle Marques em 21/12/13 disse...

Amo os teus tutoriais May, sempre ótimos. Beijos

http://www.tudoparaasgurias.com/

Luder em 9/1/14 disse...

Boa! Passo a passo e não tem erro!
http://luderking5.blogspot.com.br/

Larissa Huayck em 26/1/14 disse...

Deu certo!!! :) Obrigada pela dica!
Meu blog é sobre unhas decoradas, se você se interessar acesse :)
http://pintandoavontade.blogspot.com.br

Malcon em 14/2/14 disse...

Deu certo. Muito obrigado pelo gadget. Agora fica mais fácil comentar. Eu queria também um que desse para comentar pela conta do Facebook.
Deem um pulinho no meu blog do mundo automotivo: http://artigos-de-carros.blogspot.com/

comprar seguidores instagram em 22/3/14 disse...

Muito top o blog

Márcia Dantas em 30/3/14 disse...

Oi, tudo bem?

Eu tô tendo dificuldades em achar a segunda parte do código. Será que ele não é compatível?
Bjos :*

Bianca Evelyn em 21/4/14 disse...

Você foi a minha salvação, sério. Tentei mais de mil tutoriais e nenhum deu certo, até encontrar o seu ♥♥
Obrigada <333
Ah, e eu adorei seu blog *-*
Bjs bjs

Fernanda Fernandes em 24/5/14 disse...

Consegui!!!! Ai, fiquei muito feliz!!! Também já tinha lido um montão de tutoriais e nada!!! Puxa vida, valeu mesmo!!!! Muito sucesso pra vc!!! Obrigada!!! <3

Postar um comentário

 

Design e programação por Mayara Sousa.