Tutorial: Aprenda a colocar a opção de Facebook em seus comentários!

sexta-feira, setembro 27, 2013

~Yoo Galera~

Olá guris e gurias como estão? Espero que estejam muito bem!

Como todos vocês já sabem hoje é o dia de TUTORIAIS (visitem o cronograma) e o tutorial de hoje foi um pedido da leitora Tauane Kraemer do blog “Calma, tô quase pronta” que pediu um tutorial explicando como colocar comentários do facebook direto no blog...Por exemplo sabe quando você vai em um blog e quer comentar mas não esta logado no Google e sim no Facebook? Então ai com sua conta no Facebook você pode comentar livremente...Então o tutorial de hoje é explicando exatamente como integrar os comentários do facebook com os do blogspot colocar esta opção em baixo das suas postagens...Vamos lá!

Mas primeiro, confiram o pedido dela:

Agora, antes de tudo...Vou alertando que esse é um dos tutoriais mais “chatinhos” de se fazer e exige bastante atenção da sua parte, eu tentarei fazê-lo o mais simples possível para que consigam realizá-lo;

Click em "Mais Informações" para ver a postagem completa!

◄PROCESSO DE REGISTRO ►

1º) Acesse seu perfil no Facebook, quando estiver logado em sua conta no mesmo click AQUI . Abrirá então uma página então click na opção "REGISTER NOW" mais ou menos com esta imagem abaixo :

2º) Abrirá uma outra página com algumas opções , logo você vê um quadradinho para ser marcado, então nessa parte click em:

“I accept the Facebook Platform Policy and the

Política de Privacidade do Facebook”

Em seguida click em CONTINUAR logo ao lado, veja o exemplo abaixo:

3º) Nesta etapa você deve colocar seu número de telefone e em seguida escolha a opção que você deseja receber o código que vai validar seu aplicativo, como na imagem abaixo:

4º) basta apenas configurar para quem deseja que seu número de telefone apareça, você pode configurar para “Somente Eu” se não deseja exibi-lo e em seguida click em CONTINUAR como na imagem abaixo:

5º) Nas próximas etapas que se seguirem você pode clicar em PULAR depois em DONE e então sua conta esta confirmada!

◄CRIANDO O APLICATIVO ►

6º) Nesta etapa click na opção “ + Criar Novo Aplicativo” como na imagem abaixo:

7º) Nesta etapa você apenas precisará ir seguindo o que for sendo pedido e por fim receberá seu ID do aplicativo , é com isso que você poderá colocar seu aplicativo no blog! Ele aparecerá como uma imagem semelhante a essa abaixo:

◄COLOCANDO O APLICATIVO PRONTO NO BLOGGER ►

8º) Vá para a parte de MODELO do seu blogger;

9º) Click na opção “Fazer Backup/Restaurar”

ATENÇÃO

10º) Quando clicar na opção anterior abrirá uma janela, nesta janela click em

“Fazer Download do Modelo Completo” é muito importante que você baixe a versão atual do seu blog isso vai baixar seu visual atual do blog, evitando que se ocorrer algum problema ou se seu blog não ficar como você deseja você possa retornar ao modelo anterior (escolhendo a opção “Escolher Arquivo” ai você procura isso que você acabou de baixar e clica em fazer “Upload”)

11º) Após você ter clicado em “Fazer Download do Modelo Completo” clique em FECHAR

12º) Após isso você clica em “Editar HTML” quando abrir click dentro do espaço com os códigos e depois nas teclas do seu teclado “CTRL + F” coloque dentro do espaço de busca que aparecer o seguinte código , depois click em enter

<div class='comments' id='comments'>

13º) As vezes você não encontra ele todo de uma vez pelo modo de busca então tente colocar por partes , por exemplo:

● <div class='comments'

OU

● id='comments'>

14º) Após achar o código completinho ABAIXO dele cole o seguinte código:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comentários no Facebook'>

<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>

<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

15º) SALVE!

16º) Faça então o mesmo processo click dentro do espaço com os códigos e depois nas teclas do seu teclado “CTRL + F” coloque dentro do espaço de busca que aparecer o seguinte código , depois click em enter:

</head>

17º) Após achar esta tag cole então ANTES dela o seguinte código:

 <script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='COLOQUE AQUI SEU ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

18º) Onde você pode ler no código anterior a frase “COLOQUE AQUI SEU ID” coloque então o ID que você obteve na 7ª etapa e SALVE!

19º) Agora faça mais uma vez click dentro do espaço com os códigos e depois nas teclas do seu teclado “CTRL + F” coloque dentro do espaço de busca que aparecer o seguinte código , depois click em enter:

]]></b:skin>

20º) ACIMA da tag anteriormente encontrada cole o seguinte código:

 .comments-page {background-color: #f2f2f2;}
#blogger-comments-page {padding: 0px 5px;display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

21º) SALVE!

PRONTO!!!

Se você fez tudo como foi explicado e fez todas a etapas agora seu blog contará com mais uma opção para os leitores poderem comentar, além de comentarem com o Google também poderão escolher a opção Facebook, basta estarem logados para comentar!

◄RESULTADO FINAL ►

◄MODERANDO OS COMENTÁRIOS DO FACEBOOK NO SEU BLOG ►

Se você deseja moderar o que vai aparecer no seu blog quando comentar com o Facebook basta clicar AQUI então abrirá uma janela para você configurar da forma desejada , como na imagem abaixo:

● Click então na parte onde esta escrito “CONFIGURAÇÕES” em seguida escolha a opção desejada:

EXPLICAÇÃO:

ü MODO DE MODERAÇÃO: É aqui que você escolhe se quer moderar ou não

ü PALAVRAS NA LISTA NEGRA: Escolha bloquear o uso de algumas palavras

ü MODERADORES: Escolha os perfis dos moderadores dos comentários

ü OUTROS PROVEDORES DE LOGIN: Escolha se os usuários podem comentar com outros provedores

ü COMPOSITOR DE COMENTÁRIOS: Escolha se quer mostrar ou não

ü FILTRO DE GRAMÁTICA: Corrigi erros gramaticais

Pronto galera a postagem é essa, deu um baita de um trabalho para fazer essa postagem hahahahahahaha mais consegui \õ/ espero que tenham gostado.

Beijocas!

36 comentários

Anônimosexta-feira, setembro 27, 2013
Bem bacana, eu ja tentei mas nunca consegui ma svou tentar de novore, passa la no meu blog tem post novo lá..Beijinhos Mariiah ....
Complicada e Imperfeita Adolecente-Instagram- Post Novo aqui<-
ResponderExcluir
Respostas
Kellen Oliveirasexta-feira, setembro 27, 2013
adorei o tutoriaaaal ><
ps: post novo, passa lá querida leitora ;*
beijos,
Pedaços de Lembranças
ResponderExcluir
Respostas
Victoria Thomazsexta-feira, setembro 27, 2013
Adorei o tutorial *-*
Bejus, www.nossomosmoda.blogspot.com
ResponderExcluir
Respostas
Nina Spinsexta-feira, setembro 27, 2013
Caraaaaaaaaaa, amei a dica!!!!!!!! Fiz o blog a pouco tempo, to aprendendo ainda a mexer nesses trecos HAHAHAHA Super valeu vir aqui e amei o blog todo!!! Tô seguindo!
Se quiser olhar o meu depois, é www.explorandoestilos.blogspot.com
Bjoca e muito sucesso *-* ♥
ResponderExcluir
Respostas
Anônimosábado, setembro 28, 2013
Eu uso ele, bem útil.

www.iasmincruz.com
ResponderExcluir
Respostas
Unknownsábado, setembro 28, 2013
Voce ja sabe que te acho um genio neh?!! E sei que tem que ter dedicação mesmoooooooooooooooooooo e adoro seus tutorias e meu blog tem ficado cada dia melhor graças a sua dicas!!! Obg e beijos

Obs: Toda vez que vou comer morango,me lembro de vc hahahahaha

Beijinhos de Morango =)
ResponderExcluir
Respostas
Unknownsábado, setembro 28, 2013
Sumiu la do blog porque mesmo lindona??? haha Bjjj
http://www.blogdosilvestrin.com/
ResponderExcluir
Respostas
whateverdomingo, setembro 29, 2013
é tãooo simples né? amo o tuto.
http://euamotutoriais.blogspot.com.br/
ResponderExcluir
Respostas
Fuxicos e Rabiscossegunda-feira, setembro 30, 2013
Eu sempre quis por a opção comentar com o face no meu blog, mas nunca consegui...vou tentar através do seu tutorial, afinal sempre funcionou né?

Bjs flor!

http://detudoumpouco28.blogspot.com.br/
ResponderExcluir
Respostas
Unknownquinta-feira, outubro 03, 2013
Obrigada sua linda por ter feito o tutorial que pedi, mas infelizmente eu não consegui fazer :( chega na parte de achar o : código de comentários não encontro, nem tirando alguma das partes como você sugeriu! :(
ResponderExcluir
Respostas
Unknownsexta-feira, outubro 04, 2013
Oi Hilda querida, eu até acho por exemplo div class=fecha_dia ...mas não acho nada de comments ou de referente a comentários! :/
Sabe como posso resolver isso? Se não souber tudo bem, ao menos esse tuto ajudou outras pessoas. Obrigada *-*. beeijinhos
ResponderExcluir
Respostas
Unknowndomingo, outubro 06, 2013
pois é, não sou muito sortuda nesse ponto, sempre dá problema nas configurações :(
mas obrigada mesmo assim querida pela ajuda... fico feliz que ajudou outras pessoas. beeijos
ResponderExcluir
Respostas
Unknowndomingo, outubro 06, 2013
aah sim, que pena :( não tenho muita sorte com esse negocio de configurações... mas obrigada mesmo assim querida, fico feliz que ao menos esse tuto ajudou outras pessoas. Beijinhos *-* e obrigada pelo carinho e atenção de sempre! :)
ResponderExcluir
Respostas
Cíntiasegunda-feira, outubro 28, 2013
Tentei também mas não consegui, devo ter feito alguma coisa errada hahaha vou ver se meu noivo consegue fazer alguma hora dessas, mas ficou muito bom seu tutorial!
ResponderExcluir
Respostas
Garotas Criativassexta-feira, novembro 15, 2013
Fiz tudo certinho e não apareceu nada . :(
ResponderExcluir
Respostas
Hey Myliequarta-feira, dezembro 04, 2013
Oi, adorei seu tutorial mas o fundo do meu blog é escuro então não dá pra ler o que se escreve... como faço pra mudar a cor da letra? http://heymylie.blogspot.com.br/
ResponderExcluir
Respostas
Fuxicos e Rabiscossexta-feira, março 14, 2014
Poxa não deu certo...primeira vez que um tutorial do seu blog não dá certo comigo.
O link ai ( primeiro) não abre na página que vc falou não, mostra outra página aqui...ai não consigo seguir a sequencia pq não mostra.

http://detudoumpouco28.blogspot.com
ResponderExcluir
Respostas

Adicionar comentário

~REGRAS PARA COMENTAR~

-Não desrespeite ninguém.
-Não xingue ou use palavras de baixo calão.
-Sempre que puder comente é uma forma de incentivar a trazer sempre novidades.

Pages

Tutorial: Aprenda a colocar a opção de Facebook em seus comentários!

36 comentários

A Autora...

TRADUTOR

AFILIADOS

Versículo do Dia ♡

SEGUE? ♥

SEGUIDORES ♡

Like us on Facebook

WE HEART IT

PARCERIA

POSTS RECENTES

ARQUIVO DO BLOG

MARCADORES | TAGS

MAIS VISTOS

Pages

Tutorial: Aprenda a colocar a opção de Facebook em seus comentários!

Share This Story

You Might Also Like

36 comentários

A Autora...

TRADUTOR

AFILIADOS

Versículo do Dia ♡

SEGUE? ♥

SEGUIDORES ♡

Like us on Facebook

WE HEART IT

PARCERIA

POSTS RECENTES

ARQUIVO DO BLOG

MARCADORES | TAGS

MAIS VISTOS

Subscribe