Anos atrás eu publiquei um tutorial que ensina como usar no blog, ao mesmo tempo, os comentários do Facebook e os do Blogger.
Relembre:
Colocar os comentários do Facebook junto com os do blog
Ele funciona mas de lá pra cá o Facebook passou por atualizações e as telas que mostro no tutorial mudaram, bem como a forma de criar o aplicativo que faz a mágica acontecer.
Então, bora atualizar o tutorial, e incluir melhoramentos nele?
Quer aprender? Vem comigo!
Importante:
Para começar você precisa ter um aplicativo criado no Facebook Developers. Caso você já tenha um aplicativo criado pode pular essa etapa.
Se ainda não tem siga o passo-a-passo abaixo e crie o seu; ele é indispensável para este tutorial.
Como criar um aplicativo no Facebook
Para começar, caso você nunca tenha criado nenhum app assim no Facebook for developers você verá essa tela:
Clique em Começar (ou Criar um aplicativo, podem aparecer ambas as formas no botãozinho azul).
Você será então direcionado para esta tela (caso nunca tenha criado nenhum app):
Clique em Avançar.
A tela seguinte será essa:
Preencha com o captcha pedido e a seguir clique em Enviar.
Aparecerá a tela:
Clique em Revisão do aplicativo e na janela que expandir marque a opção Sim em Tornar seu aplicativo público.
Confirme a opção, escolha uma categoria para seu aplicativo (sobre o que é seu blog? Escolha a categoria mais próxima disso) e pra finalizar clique em Confirmar.
Essa parte terminamos.
Mantenha a página aberta pois você precisará do ID do aplicativo daqui há pouco.
Agora abra também a página com os códigos necessários à realização do tutorial:
Agora vamos ao painel do blog onde você deseja inserir os comentários via Facebook. Sugiro que teste antes em um blog de testes que tenha o mesmo template de seu blog oficial, ok?
Como instalar os comentários do Facebook junto com os comentários do blog
No painel do blog acesse a aba Tema (ou Modelo, é a mesma coisa) e clique em Editar HTML.
Dentro da caixa do código-fonte tecle Ctrl+F e na barra de busca que expandir digite <head> e tecle Enter para localizar.
Abaixo de <head> cole o CÓDIGO DE PROPRIEDADE.
Observe que é <head>, uma tagde abertura, diferente de </head> que é uma tag de fechamento que usaremos daqui há pouco. Ok?
Copie o número de identificação de seu aplicativo, aquele que aparece em ID do aplicativo e cole no campo marcado com SEU ID DO APLICATIVO.
No campo marcado com SEU USUÁRIO FACEBOOK coloque seu nome de usuário do Facebook, exatamente como aparece no seu perfil. O meu, por exemplo, é elainegasparetoparada.
Fez todas as inserções?
Salve.
Na barra de pesquisa digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS.
Salve.
Na barra de busca digite </head> e localize.
Acima dessa tag de fechamento cole o CÓDIGO JAVASCRIPT.
Salve.
Agora, na barra de pesquisa digite isso:
E tecle Enter para localizar.
Você achará essa ocorrência 2 vezes.
Abaixo de ambas as ocorrências cole o CÓDIGO HTML.
Sim, abaixo das duas ocorrências do trecho localizado cole o CÓDIGO HTML.
Salve.
Se tudo deu certo você verá os comentários do Blogger e do Facebook exatamente como em meu exemplo.
Preste atenção agora as dicas extras que ensinarão como personalizar cores, fontes, ícones e como moderar os comentários feitos via Facebook.
Dicas extras sobre como personalizar, notificações e dúvidas frequentes
1- Notificações dos comentários feitos via Facebook:
Você receberá notificações em seu Facebook, normalmente como recebe qualquer notificação.
Mas caso prefira acesse https://developers.facebook.com/tools/comments e veja se há comentários feitos em seus posts.
Eu acesso ao menos uma vez por dia pra não perder nada.
2- Para funcionar sem erros seu formulário de comentários precisa ser do tipo Incorporado.
Altere, caso precisar, em Configurações/Postagens, comentários e compartilhamentos/Comentários/Local do comentário.
Não pode usar os comentários do G+, apenas os nativos do Blogger, ok?
3- Para alterar coisas como cor de fundo das abas, tamanho e tipo da fonte e tamanho dos ícones F e B das abas o local é o CÓDIGO CSS.
Para alterar a imagem dos ícones o local é o CÓDIGO HTML. Deixei marcado em negrito o endereço dos ícones, altere se desejar pelo endereço dos ícones que preferir.
4- Caso queira alterar a frase Comentários via Blogger e Comentários via Facebook o local para isso é o CÓDIGO HTML.
Não esqueça de manter igual em ambas as vezes que colar esse código, ok?
Execução em vídeo do tutorial Como usar os comentários do Facebook e do Blogger ao mesmo tempo- aperta o play!
Para não deixar dúvidas eu gravei a execução do tutorial em uma vídeo-aula.
aperta o play, se inscreve no canal de apoio aos tutoriais do blog e se tiver perguntas, diz aí e eu ajudo no que for preciso!
Ah, não deixa de pelo menos curtir o post, tá? Sei que nem sempre dá tempo de comentar, mas só um clique em Curtir já me deixa tão felizinha...
#curte....
Dias online
Postagens
comentários
Vira e mexe tudo muda e lá os tutoriais ficam obsoletos, aff...
ResponderExcluirEu queria essa paginação como essa interna do teu blog, que invés de mostrar postagens antigas/recentes, mostra o título respectivo. Vc tem o tutorial? Se não tem, põe na fila dos próximos, please 🙏🙏🙏
Gratidão!
Elaine, Boa Noite, tenho acompanhado o seu blog e gosto muito das postagens, me ajudam bastante... Agradeço muito a sua disponibilidade em ajudar os blogueiros de primeira viagem, parabéns pela iniciativa.
ResponderExcluirPreciso que vc me ajude em uma coisa, eu estava aqui mexendo nas configurações do meu blog e sem querer eu ocultei o box de comentários das postagens, eu já tentei e eu já mexi nas configurações-->comentários-->local dos comentários--> aqui eu coloco incoporado, mas não aparece nada no meu blog, o que eu faço agora? as permissões para as postagens estão todas corretas tbm, o box do meu blog teste também sumiu, tentei instalar o Disqus mas também não funcionou.... Já Restaurei o Html do Blog e nada, Tem como resetar as configurações pra voltar tudo como era antes??
Espero que vc me responda, estou desesperada...
Oi!
ExcluirQual o endereço do seu blog?
Deu tudo certo, obg!
ResponderExcluirOi Elaine, desculpe incomodar, mas será que você poderia me ajudar?
ResponderExcluirUso um dos seus templates gratuitos, ele veio com a caixa de comentários do facebook inclusa, as pessoas conseguem comentar normalmente, só que eu não recebo notificação de que as pessoas comentaram nem aparece no meu painel da ferramenta de moderação (developers.facebook.com/tools/comments)os comentários dessas pessoas (o que me obrigaria a ter que ir de post em post todo dia ver se tem comentário novo).
Tentei colocar esses códigos do tutorial para ver se eu passaria a conseguir ver esses comentários, mas continuo não vendo os comentários das pessoas no painel developers.
Você tem alguma ideia do que possa estar acontecendo? Ou poderia me dizer qual parte do Template Aquarela Rosa eu tenho que tirar para tirar a caixa de comentários do facebook do blog e tentar recolocá-la para ver se volto a ter acesso ao comentários do facebook?
Marijleite, eu não sei dizer o que há.
ExcluirSe fez a criação do app certinho e configurou corretamente deveria estar vendo os coments...
Para retirar os comentários siga o tutorial que listei acima, no começo deste post, mas ao contrário. Ao invés de acrescentar vá localizando os códigos e excluindo-os.
Foi ele que segui quando desenvolvi o template.
Espero que ajude :)
bjss
Fiz no meu blog de testes e deu certinho! Farei no blog oficial depois! Muito obrigada por sempre nos ajudar, Elaine! <3
ResponderExcluirBeijos
Blog Tamaravilhosamente
Oi Elaine, este gadget seria útil demais ao meu blog, assim como outros. Os responsivos (Emporio) será que aceitam? Por favor Elaine, se você puder fazer menção nos seus tutoriais se são aplicáveis ou não a estes novos templates, ficaria grata e eu deixaria de fazer sempre esta pergunta para que você não tivesse que sempre que se repetir. Vi uma resposta que me deu sobre estes novos Templates e aproveito para te agradecer - disse que na sua análise superficial, percebeu que eles não são muito abertos à personalização e que foram, por este motivo, decepcionantes para você, mas você ficou de estudá-los mais profundamente e produzir um tuto sobre. Sempre acompanho seus posts e vejo que outros blogs que acompanho também ainda pouco sabem sobre estes novos templates. Sei das suas dificuldades em função do seu esposo e isso altera seus estudos.
ResponderExcluirGratidão e tudo de bom a você e a ele...
Bjo
Regina, via de regra nenhum dos tutoriais que eu publico aqui poderão ser usados nos modelos responsivos do Blogger.
ExcluirEles não aceitam nenhuma personalização que não seja via painel. Não me dedico mais a eles porque não gostei, e isso de não permitir quase nada é um empecilho... infelizmente não creio que vá fazer tutoriais para eles, ao menos não tenho planos por enquanto...
beijossss
Ola Elaine! Preciso que me ajude em algo. O meu plug-in de comentários do face está funcionando normal no blog. Mas quando alguem comenta nas postagens através do face, os comentários aparecem apenas no face, nas configurações e não aparece no blog! Como faço para esses comentários parecerem no blog?! Desde já obrigada!
ResponderExcluirLuuh, até onde testei e uso os comentários só vão aparecer no blog se forem feitos na fanpage vinculada ao aplicativo e desde que o link do post tenha sido compartilhado usando os botões do blog.
ExcluirSe colar o link do post na fanpage, perfil ou grupos o comentários não aparecerão no blog.
Lembre que o Facebook é uma rede fechada em si mesma e isso não há como alterar.
Falou, garota?
bjssss.
Porque os comentários não espelham mais no blog?
ResponderExcluirOs meus estão espelhando, mas desde que sejam feitos nas publicações compartilhadas na fanpage usando o botão do Facebook. Se compartilhar no perfil eles não espelham, e também precisa configurar isso nas configurações da sua fanpage.
ExcluirCreio que houve alteração no próprio Facebook e por isso as regras mudaram...
Saudações. Atualizar é sempre bom e esse tuto ficou 10! Mas gostaria de deixar os comments do Face aparecendo primeiro, com a opção de usar os do Blogger clicando na aba respectiva. Mexendo no código até consegui trocar as abas de lugar, mas as cxs para comentar... nada, Rsrs. A aba do Face ficou servindo pro Blogger e vice-versa. Pode ensinar a fazer essa mágica corretamente? Desde já agradeço.
ResponderExcluirJonnay, antes era assim, eu que mudei porque acho mais lógico que os coments do Blogger apareçam antes.
ExcluirNão lembro direito mas acho que pra inverter precisa apenas alterar a ordem do código html, nas duas vezes que colar.
Separe a parte do código que diz respeito ao Blogger da parte que diz respeito ao Facebook e inverta ambas.
Faz tempo, não lembro direito mas pé por aí...
Ah, não lembro se precisa inverter também o código javascript, tem que testar...
Obrigado, Elaine. Como já sou seu aluno há anos não foi difícil ;). Consegui colocando o "div" do Face antes do Blogger, no códg html, e também alterando as linhas "window.document" no script, mantendo a última parte contendo "block" ou "none". ## TODAVIA ##, encontrei um possível bug no código original, postado por vc, que (lógico!) continuou após minhas alterações, só não tinha avisado antes pq estava realizando mais testes: No smartphone, na aba Blogger, só consegui responder a comentários, postados por mim ou por terceiros, usando um navegador logado no Blogger (Chrome). Ao acessar a pág com outros navegadores, sem logar no Blogger (Firefox, por ex) eu até consigo postar o primeiro comentário, mas depois disso o links responder e adicionar (novo) comentário ficam inativos. DETALHE: Tentei num template "virgem" e o resultado foi o mesmo. Já se deparou com esse problema ou saberia como resolvê-lo? Desculpe o jornal, desde já agradeço!
ExcluirDona Elaine? Fazendo testes tbm??
ExcluirJá te falei hoje, o tanto que você é linda e mora no meu coração?
ResponderExcluirDeu certoooo.... Obaaaa!!!! Pela milésima vez, obrigada!!!!!
porque você não usa os comentários do facebook no blog?
ResponderExcluirPaula, eu usei por uns anos mas nunca gostei de fato, e como tenho me afastado do Facebook pois detesto achei melhor não manter :)
Excluir