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(&quot;#fb-comments&quot;);'  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(&quot;#blogger-comments&quot;);'  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 == &quot;item&quot;'>
<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:


&nbsp;<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:

&nbsp;.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!




You Might Also Like

36 comentários

  1. 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
    1. Tenta mesmo você consegue :D

      Obrigada por sua visita querida *-* beijocas e volte sempre!

      Excluir
  2. adorei o tutoriaaaal ><
    ps: post novo, passa lá querida leitora ;*
    beijos,
    Pedaços de Lembranças

    ResponderExcluir
    Respostas
    1. Que bom querida *--* fico realmente feliz que tenha gostado :3

      Irei lá agorinha :3

      Obrigada por sua visita...Beijocas e volte sempre!

      Excluir
  3. Adorei o tutorial *-*
    Bejus, www.nossomosmoda.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou *--* fico bastante feliz :3


      Obrigada por sua visita...Beijocas e volte sempre :3

      Excluir
  4. 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
    1. Fico muito feliz que tenha gostado Nina *--* é um incentivo muito grande a mim seu comentário...

      Beijocas e volte sempre! Boa Sorte com o seu blog guria :3 to indo nele agorinha *--*


      Excluir
  5. Eu uso ele, bem útil.

    www.iasmincruz.com

    ResponderExcluir
    Respostas
    1. Verdade :D facilita a vida dos blogueiros :3

      Obrigada por sua visita querida. Beijocas e volte sempre!

      Excluir
  6. 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
    1. Ounw *--* muito obrigada Isa :3 Fico realmente feliz e lisonjeada com seu comentário, me incentiva muito a continuar :D

      Obrigada por sua visita querida...Beijocas e volte sempre guria!

      hahahaha >> Beijocas de morango :3 kkkkkkkkk

      Excluir
  7. Sumiu la do blog porque mesmo lindona??? haha Bjjj
    http://www.blogdosilvestrin.com/

    ResponderExcluir
    Respostas
    1. Desculpa Gaah :/ Mas vou voltar a aparecer por lá :3

      Obrigada por sua visita ^^

      Beijocas lindo!

      Excluir
  8. é tãooo simples né? amo o tuto.
    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. éééhh...Mais ou menos...kkkkkkkkkkkkkkkkkkkk

      Obrigada por sua visita guria ^^

      Beijocas e volte sempre!

      Excluir
  9. 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
    1. Tenta! :) você consegue *-* ...Obrigada por sua visita querida.

      Beijocas e volte sempre!

      Excluir
  10. 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
    1. Tenta tirar mais partes que você consegue querida :)

      Obrigada por sua visita...Beijocas e volte sempre!

      Excluir
    2. Oi, desculpe pela demora em te responder, o blog pasou por um hiatus e só retornou agora. Em alguns templates o código não funciona. Alguns templates FREE bloqueiam alguns códigos, talvez, se o seu for seja esse o motivo. :/ espero ter ajudado, tente outra vez, com mais calma. Espero te ver por aqui mais vezes :3

      Excluir
  11. 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
    1. Não Tauane :/ deve ser mais uma vez as configurações do blog...
      Obrigada por sua visita...Beijocas e volte sempre!

      Excluir
  12. 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
    1. :( Que pena que seu blog não permitiu nas configurações, :(

      Obrigada por sua visita Tauane :3

      Beijocas e volte sempre!

      Excluir
  13. 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
    1. É sempre um prazer ajudar querida *-*

      Obrigada por sua visita...

      Beijocas e volte sempre!

      Excluir
  14. 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
    1. ÉÉ em complicadinho mesmo rsrsrs tem que fazer com muita calma, um pequeno erro e já era o aplicativo rsrsrs

      Obrigada por sua visita querida.

      Beijocas e volte sempre que puder :3

      Excluir
  15. Fiz tudo certinho e não apareceu nada . :(

    ResponderExcluir
    Respostas
    1. Olá desculpe pela demora em te responder, o blog passou por uma longa pausa mas está voltando, pouco a pouco...Sobre o seu comentário, esse tutorial está dando certo para uns e para outros não. Realmente não sei qual o problema, pode ser o Facebook, o template que bloqueia ou a plataforma do blogger. Espero que tenha conseguido. Espero que você possa vir mais vezes. :3

      Excluir
  16. 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
    1. Olá, você precisa mexer na configuração do seu layout, cada layout tem um código específico, a busca terá que ser feita no HTML, algums templates permitem a mudança outros não. Desculpe pela demora em te responder. O blog estava em hiatus e só entrei agora, espero te ver por aqui mais vezes :3

      Excluir
  17. 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
    1. Oi querida, creio que esse tutorial já está desatualizado. A página inicial do Facebook foi modificada. É uma pena :/ Espero te ver por aqui mais vezes, visitarei seu blog com muito carinho :3

      Excluir

~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.

Related Posts Plugin for WordPress, Blogger...

Subscribe