Blogger Facebook abas comentários.
Autor: Jair de Jesus | Publicado: 2013-09-01T02:29:00-03:00

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&amp;display=popup&amp;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. O Marcos Lemos lembro que foi humilde em citar que não sabia como fazer e é possível ver no Ferramentas Blogger. Sim eu sei que o tutorial é antigo, mas até hoje não se encontra a solução e as pessoas querem.


Então mãos à obra, segue um tutorial destes tantos pois me recuso a repetir tudo aqui. Recomendo o tutorial da Vanessa - Mundo Blogger usar moderar sistema de comentários do Facebook no Blogger. 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.





<embed src="https://www.youtube.com/get_player" type="application/x-shockwave-flash"
width="520" height="436" bgcolor="#FFFFFF"
flashvars="flvurl=https://redirector.googlevideo.com/videoplayback?requiressl%3Dyes%26id%3Dca0d2c930c7ad11a%26itag%3D5%26source%3Dblogger%26app%3Dblogger%26cmo%3Dsecure_transport%253Dyes%26cmo%3Dsensitive_content%253Dyes%26ip%3D0.0.0.0%26ipbits%3D0%26expire%3D1494944158%26sparams%3Drequiressl,id,itag,source,ip,ipbits,expire%26signature%3D156A83102EF33F0C8667615DF0352B1EB0BCC9FC.B54BAC0CCCD3F12C7A02FF2FAADC0F13398DE74D%26key%3Dck2&iurl=http://video.google.com/ThumbnailServer2?app%3Dblogger%26contentid%3Dca0d2c930c7ad11a%26offsetms%3D5000%26itag%3Dw160%26sigh%3DRSGeXfYVuUoSmrClgI24BsgtrS4&autoplay=0&ps=blogger"
allowFullScreen="true" />

Uma melhor definição de imagem pode ser obtida diretamente do 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.
&nbsp;Nota: &nbsp;É 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:
             


&lt;b:if cond=&#039;data:blog.pageType != &quot;data:blog.homepageUrl&quot;&#039;&gt;
 &lt;meta content=&#039;article&#039; property=&#039;og:type&#039; /&gt;
 &lt;meta expr:content=&#039;data:blog.title&#039; property=&#039;og:site_name&#039; /&gt;
 &lt;meta expr:content=&#039;data:blog.pageName&#039; property=&#039;og:title&#039; /&gt;
 &lt;b:if cond=&#039;data:blog.postImageThumbnailUrl&#039;&gt;
  &lt;meta expr:content=&#039;data:blog.postImageThumbnailUrl&#039; property=&#039;og:image&#039; /&gt;
               &lt;meta content=&#039;image/jpeg&#039; property=&#039;og:image:type&#039; /&gt;
               &lt;meta content=&#039;420&#039; property=&#039;og:image:width&#039; /&gt;
               &lt;meta content=&#039;320&#039; property=&#039;og:image:height&#039; /&gt;
             &lt;/b:if&gt;
&lt;b:else/&gt;
 &lt;meta expr:content=&#039;data:blog.title&#039; property=&#039;og:title&#039; /&gt;
 &lt;meta content=&#039;website&#039; property=&#039;og:type&#039;/&gt;
&lt;/b:if&gt;
  &lt;meta expr:content=&#039;&quot;pt_BR&quot;&#039; property=&#039;og:locale&#039; /&gt;
&lt;meta expr:content=&#039;data:blog.canonicalUrl&#039; property=&#039;og:url&#039; /&gt;
&lt;meta content=&#039;100001732873161&#039; property=&#039;fb:admins&#039; /&gt;
&lt;meta content=&#039;163450027172111&#039; property=&#039;fb:app_id&#039; /&gt;
 &lt;meta content=&#039;html css, blog de ajuda do Blogger por Jair de Jesus.&#039; property=&#039;og:description&#039; /&gt;
 &lt;meta content=&#039;http://2.bp.blogspot.com/-YHi_0JYAbzk/UgHjpfoJm3I/AAAAAAAACKU/a4-B5IeVhjM/s400/logo.jpg&#039; property=&#039;og:image&#039; /&gt;
  &lt;meta content=&#039;image/jpeg&#039; property=&#039;og:image:type&#039; /&gt;
  &lt;meta content=&#039;420&#039; property=&#039;og:image:width&#039; /&gt;
  &lt;meta content=&#039;320&#039; property=&#039;og:image:height&#039; /&gt;


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


A Meri possui um tutorial sobre abas de fácil implementação em seu blog/site visite Coisas da Meri abas e sistemas de comentários.


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&mdash; Jair de Jesus (@verbratecajuda) September 8, 2013