Formulário de contato

Nome

E-mail *

Mensagem *

Comentários no Blog com abas para comentar com Facebook, Google Plus e Blogger

Para glória do Senhor Jesus!
Gente, estou refazendo alguns tutoriais e este não poderia faltar, pois foi com a graça de Deus e muuuuita persistência, que consegui aperfeiçoar o hack do sistema de comentários do Blogger, que, além de ter a opção de comentar com formulário padrão do Blogger e/ou Facebook, pode-se ter uma aba a mais para comentar pelo Google Plus também. Ah! E funciona no celular (sim, consegui ativar comentários do Facebook pelo celular também)! Claro, que sempre há o que se melhorar.

Por exemplo, os comentários feitos no formulário do Blogger são mostrados também na aba do Google Plus, e os do Facebook feitos pelo celular não aparecem quando visualizamos pelo computador e vice-versa.


Não encontrei nenhum tutorial de como fazer isso, apenas de como ter no blog os formulários de comentários para Blogger e Facebook juntos pelo computador. Como base, usei o tutorial fornecido pelo blog Dicas para Blogs: Corrigir Problemas dos Comentários do Blogger e Facebook Juntos no Blog, que aliás já foi um aperfeiçoamento feito, num excelente e primoroso trabalho, pela Yara G. - www.schreiindeutsch.net.
Então, antes de tudo, em consideração também ao meu esforço em aperfeiçoar esse hack, peço que ao utilizá-lo ou divulgá-lo, não retirem meus créditos do mesmo, ok?
Para começar a instalação, primeiro você tem que já ter criado um aplicativo no Facebook para seu blog, e feito as devidas instalações. (COMO CRIAR  E INSTALAR APP DO FACEBOOK). Você também precisa ter seu perfil no Google Plus ativado.

Entre no painel do seu blog no Blogger em “Modelo” e faça backup do seu modelo (Como fazer backup).

Agora entre em "EDITAR HTML"


Ache a tag:

</head>

ACIMA dela cole o seguinte:

<!-- script para Comentários do Blogger e Facebook Simultaneamente - Sem bugs! Autoria de Yara G. - www.seethehalo.net / Adição de aba G+ por Rosemeri Pellens - atijesus.blogspot.com NÃO RETIRAR CRÉDITOS -->
<b:if cond='data:blog.pageType != "static_page"'>
<script language='JavaScript'>
function showComments(tipo) {
if (tipo == 1) {
window.document.getElementById('fb-comments-page').style.display=&quot;block";
window.document.getElementById('blogger-comments-page').style.display=&quot;none";
window.document.getElementById('gpluscomments-page').style.display=&quot;none";
window.document.getElementById('fb-comments').style.background=&quot;#f2f2f2&quot;; //cor da aba ativa editavel
window.document.getElementById('blogger-comments').style.background=&quot;#bdbbbb"; // cor da aba inativa editavel
window.document.getElementById('gpluscomments').style.background=&quot;#bdbbbb"; // cor da aba inativa editavel
} else if (tipo == 2) {
window.document.getElementById('blogger-comments-page').style.display=&quot;block";
window.document.getElementById('fb-comments-page').style.display=&quot;none";
window.document.getElementById('gpluscomments-page').style.display=&quot;none";
window.document.getElementById('blogger-comments').style.background=&quot;#f2f2f2&quot;; // cor da aba ativa editavel
window.document.getElementById('fb-comments').style.background=&quot;#bdbbbb"; // cor da aba inativa editavel
window.document.getElementById('gpluscomments').style.background=&quot;#bdbbbb"; // cor da aba inativa editavel
} else if (tipo == 3) {
window.document.getElementById('gpluscomments-page').style.display=&quot;block";
window.document.getElementById('blogger-comments-page').style.display=&quot;none";
window.document.getElementById('fb-comments-page').style.display=&quot;none&quot;;
window.document.getElementById('gpluscomments').style.background="#f2f2f2"; // cor da aba ativa editavel
window.document.getElementById('blogger-comments').style.background=&quot;#bdbbbb"; // cor da aba inativa editavel
window.document.getElementById('fb-comments').style.background=&quot;#bdbbbb"; // cor da aba inativa editavel
}
}
window.onload = function(){
showComments(1);
}
</script></b:if>
<!-- fim script para Comentários do Blogger e Facebook Simultaneamente - Sem bugs! Autoria de Yara G. - www.seethehalo.net / Adição de aba G+ por Rosemeri Pellens - atijesus.blogspot.com NÃO RETIRAR CRÉDITOS -->


Agora ache:

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

São duas ocorrências, cole ABAIXO de cada uma das duas ocorrências o seguinte:

<!-- Comentários blogger e fb com adição de aba G+ por Rosemeri Pellens - atijesus.blogspot.com NÃO RETIRAR CRÉDITOS -->
<b:if cond='data:blog.isMobile'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='comments-tab' id='fb-comments' onClick='showComments(1);' title='Comente pelo Facebook'>
<img class='comments-tab-icon' src='https://lh5.googleusercontent.com/-DKdhCsau6z0/UkMVsOe99nI/AAAAAAAAE3w/2RNLrnNMNyk/s256/Facebook.png'/>
</div>
<div class='comments-tab' id='blogger-comments' onClick='showComments(2);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://lh4.googleusercontent.com/-duH9TUMGflM/UkMVnQbvXEI/AAAAAAAAE3g/LcsnWwGdpMQ/s256/Blogger.png'/>
</div>
<div class='comments-tab' id='gpluscomments' onClick='showComments(3);' title='Comente pelo Google Plus'>
<img class='comments-tab-icon' src='https://lh6.googleusercontent.com/-kO6A4QZ2IEQ/UvN-pu54W1I/AAAAAAAAKiU/-1vun1dxmiI/s256/Google.png'/>
</div>
<div class='clear'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='comments-tab' id='fb-comments' onClick='showComments(1);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='https://lh5.googleusercontent.com/-DKdhCsau6z0/UkMVsOe99nI/AAAAAAAAE3w/2RNLrnNMNyk/s256/Facebook.png'/>
</div>
<div class='comments-tab' id='blogger-comments' onClick='showComments(2);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://lh4.googleusercontent.com/-duH9TUMGflM/UkMVnQbvXEI/AAAAAAAAE3g/LcsnWwGdpMQ/s256/Blogger.png'/>
</div>
<div class='comments-tab' id='gpluscomments' onClick='showComments(3);' title='Comentários no Google Plus'>
<img class='comments-tab-icon' src='https://lh6.googleusercontent.com/-kO6A4QZ2IEQ/UvN-pu54W1I/AAAAAAAAKiU/-1vun1dxmiI/s256/Google.png'/>
</div>
<div class='clear'/>
</b:if>
</b:if>
</div>
<div class='comments-page' id='gpluscomments-page'>
<b:if cond='data:blog.isMobile'>
<b:if cond='data:blog.pageType == "item"'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='260' expr:data-href='data:post.url' id='gpluscomments-page' num_posts='7'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='620' expr:data-href='data:post.url' id='gpluscomments-page' num_posts='7'/>
</b:if>
</b:if>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.isMobile'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='7' width='260'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='7' width='620'/>
</b:if>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<!-- Fim comentários blogger e fb com adição de aba G+ por Rosemeri Pellens - atijesus.blogspot.com NÃO RETIRAR CRÉDITOS -->


OBSERVE:
  • Onde há os números 260 e 620, você configura a medida de largura para o formulário de comentários conforme seu layout de celular e computador respectivamente. E onde há o número 7, você configura o número de comentários a aparecer.
  • Esse hack não funciona em páginas estáticas.
Agora vamos configurar o CSS. Ache:

]]></b:skin>

E ACIMA cole o seguinte:

/* comments FB BLOGGER G+ */
.comments-page {
background-color:transparent; /* fundo formulário editável */
}
#blogger-comments-page {
padding: 5px 5px;
display: none;
}
.comments-tab {
float: left;
width: 40px; /* largura das abas */
padding: 5px;
margin-right: 3px;
cursor: pointer;
background-color: #f2f2f2; /* use a mesma cor que você colocou lá no script */
}
.comments-tab-icon {
height: 40px;
width: auto;
margin: 0px;
}
.comments-tab:hover {
background-color: #bdbbbb; /* também é editável */
}
.mobile .comments-tab {
float: left;
width: 40px;
padding: 5px;
margin-right: 3px;
cursor: pointer;
border-radius:5px;
background-color: #f2f2f2; /* use a mesma cor que você colocou lá no script */
}


Salve as configurações. Agora vamos configurar a moderação dos comentários do Facebook, pois deve aparecer um link semelhante a este no formulário do seu blog:


Acesse https://developers.facebook.com/tools/comments. Selecione seu blog e depois "Settings":


Configure como moderador o seu nome de exibição do Facebook (Clique no seu nome). Mais abaixo, moderação "Fechado". E notificações deixe mostrando "Sim":


No mais configure como convier para você.

NOTA: Nas postagens que você já publicou ou publicar com o blog não aberto para o público, o link de moderação do Facebook não vai aparecer. Para aparecer, abra o blog ao público, refaça o post. Não adianta republicar. Copie a postagem, abra o editor para nova postagem, cole seu post ali e publique. Depois exclua o post antigo.

É isto. Comenta aí se conseguiu instalar ou não.
Beijokas!
Gratidão
Author Image

Meri Pellens
Cristã, mãe e blogueira com necessidades físicas especiais. Aprendiz e amante viciada de xadrez, busco viver cada dia como único, valorizando todos os momentos com olhos fitos no Senhor. Amo trabalhar com blogs e artes digitais.

Nenhum comentário:

Postar um comentário