Blogger Facebook abas comentários.

Volto a tentar um estudo de programação app-Facebook e aqui deixo alguns urls até para quando necessário possa consultar.
1- Para gerar key, bah! Chave SSH github https://help.github.com/articles/generating-ssh-keys use o Git Bash.
O comando que realmente funciona é este: ssh-keygen -t rsa -C "seu_email@verbratec.com" não esquece a senha hein!
2- Repositório https://github.com/jairdejesustec/php para configurar.
3- Url add aplicativo(App) verbratec para página empresa no Facebook: https://www.facebook.com/dialog/pagetab?app_id=679115758772241&display=popup&next=https://apps.facebook.com/679115758772241/
4- Arrumo de um lado estrago do outro bah!

---

O assunto de hoje é tutorial para formulário de comentários. Depois de ter lido em vários blogs diferentes os mesmos tutoriais fiquei bah! Creio que seja bem complicado ensinar o que não sabe, mas cada um com o seu "caum" não é mesmo.
É um tanto complexo, porém nada de extraordinário, no resumo tudo é simples.
Qual é o objetivo? Simplesmente permitir que o internauta possa escolher qual formulário verá na frente; Blogger na primeira aba e Facebook na segunda opção. Li vários comentários pedindo isso em vários blogs. Lembro que alguém foi humilde em citar que não sabia como fazer e era possível ver em seu blog, porém a humildade não se manteve e o carinha retirou tudo, até a postagem, kkkkkk.
Então mãos à obra, segue um tutorial destes tantos pois me recuso a repetir tudo aqui. Recomendo o tutorial da Vanessa - Mundo Blogger https://www.mundoblogger.com.br/2013/02/usar-moderar-sistema-de-comentarios-do-facebook-no-blogger.htm - Sim realmente é preciso criar um aplicativo no Facebook pois é nele que será adicionado o moderador, administrador e etc. Observe na imagem abaixo por favor o detalhe fb:admin: Jair de Jesus.


É tanta coisa e ao que parece o Blogger (engenharia de software) andou mudando alguns itens novamente, de formas que a codificação que funciona muito bem aqui já não serve para um novo blog/site que estou fazendo para o meu amigo Alam.
Resolvi então publicar esta postagem e ir editando aos poucos, pois aqui não podemos ter erros. Já criou o aplicativo no Facebook? Então vai lá e verifica se há erros para corrigir, use este link: Debugger. O vídeo mostra como deverá ficar depois de tudo ajustado para que possamos fazer uso das tags og.

Uma melhor definição de imagem pode ser obtida em tela cheia YouTube - vídeo.

As tags og permitirão ao programa verificar tudo instantaneamente e tratar o objeto de forma que lhe seja possível por exemplo, ao compartilhar um link para a postagem "X" de seu blog/site fazer a escolha da imagem que será mostrada no Facebook, ou até mesmo escolher uma imagem de seu computador. O melhor é que todos os dispositivos (comentários, curtir, like, etc.) tudo vai funcionar e lhe será permitido com as "devidas configurações" moderar os comentários feitos pelo formulário do Facebook na própria página "X" onde foi originado o comentário. Claro que poderás ir até o Facebook "usando seu aplicativo" para ver todos os comentários do blog/site em uma única página. Legal né? Como se observa nesta imagem:
Tenho observado muitos reclamando que o Facebook não notifica e é preciso ficar procurando os comentários. Então está explicado mais este mistério. Com seu aplicativo criado e corretamente aplicado ao blog/site lhe será possível ver a notificação na postagem "X", no Facebook e logicamente no seu aplicativo. Vamos as imagens:

A notificação na postagem "X" de que existe (1) comentário aguardando moderação, basta clicar no link que aparece no centro da imagem "Moderar comentários do aplicativo" e aprovar, deletar, ocultar, etc.
Ao entrar no Facebook poderá observar algo similar a imagem seguinte, notificação:

E tem mais, quando não tiver comentário aguardando aparece a mensagem informando que "nenhum comentário requer moderação":

Quando for copiar o código do plugin comments Facebook. Note que estando tudo correto com seu aplicativo, lhe será mostrado o nome do mesmo e o número appID está incluso automaticamente:

Não vale querer tudo na hora. O Facebook vai demorar dois dias (após todos os ajustes) para lhe enviar o e-mail cuja imagem está ao fundo logo abaixo do plugin de comentários Facebook neste blog. Isto é algo como um ok do controle de qualidade, está tudo certo, nada mais precisa ser feito.
As tags og devem ser colocadas no seu blog/site como neste exemplo básico:

Bah! Era para fazer as abas e colocar os três sistemas de comentários. De que adianta fazer abas se o plugin não funciona corretamente, pesa no carregamento, tem que ficar procurando comentários em cada página do blog/site e blá, blá, blá.
O sistema do Blogger já é um tanto complexo e queremos tudo funcionando, para tanto faremos devagar e bem feito.
 Nota:  É sempre importante ter o backup de seu template ao realizar qualquer alteração no HTML.
Depois de alguns ajustes, já com funcionamento satisfatório, vamos aos aprimoramentos. As tags colocadas da forma que mostra a imagem são estáticas. Precisamos usar b:f tradicional da plataforma Blogger para dar dinamismo as tags og. De formas que em cada postagem o programa puxará o o titulo o url o conteúdo e etc. assim sendo comente as tags og anteriores e coloque assim:
<b:if cond='data:blog.pageType != "data:blog.homepageUrl"'> <meta content='article' property='og:type' /> <meta expr:content='data:blog.title' property='og:site_name' /> <meta expr:content='data:blog.pageName' property='og:title' /> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image' /> <meta content='image/jpeg' property='og:image:type' /> <meta content='420' property='og:image:width' /> <meta content='320' property='og:image:height' /> </b:if> <b:else/> <meta expr:content='data:blog.title' property='og:title' /> <meta content='website' property='og:type'/> </b:if> <meta expr:content='"pt_BR"' property='og:locale' /> <meta expr:content='data:blog.canonicalUrl' property='og:url' /> <meta content='100001732873161' property='fb:admins' /> <meta content='163450027172111' property='fb:app_id' /> <meta content='html css, blog de ajuda do Blogger por Jair de Jesus.' property='og:description' /> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswN2AjwNizD_lBQG6Itj5pAZodW1_rmDDnIl-og7XUKFDSlFDaMLX40UzxL0TyLdsKf2KBP2tZWQUrKR8kHl-gtjG3hKfg6An-17xePuaXvO7bt09t14akVErNzV5OW7Sj8ZmbWCXde5K/s400/logo.jpg' property='og:image' /> <meta content='image/jpeg' property='og:image:type' /> <meta content='420' property='og:image:width' /> <meta content='320' property='og:image:height' />
 Este é apenas um demostrativo do que pode ser feito, se trata de algo para usuários avançados, que já familiarizados com includes podem aprimorar, melhorar e obter melhores resultados.

---

Há tutoriais sobre abas de fácil implementação em seu blog/site visite, pesquise! Se eu descobrir algo realmente bom publicarei aqui.

---

Não deixe de usar Twitter para divulgar seu trabalho, produto, serviço ou bah!

Com metas Twitter no Blogger. Teste em postagem: http://t.co/ElM8quRWDq

— Jair de Jesus (@verbratecajuda) September 8, 2013