Como colocar os comentários do Google+ no Blogger

O Blogger acabou de anunciar mais um recurso incrível para ser usado em blogs que usam a plataforma: os comentários do Google+. Com o recuso você pode inserir um sistema de comentários muito mais atraente para os seus leitores e recheado de recursos incrivelmente funcionais, que permitem integrar ainda mais seu blog com a rede social da Google.

O sistema funciona de forma muito semelhante ao já conhecido sistema de comentários do Facebook. A única desvantagem dessa nova ferramenta é que para comentar é necessário ter uma conta ativa, e apesar de o Google+ já ser bastante conhecido, muitos internautas ainda não o aderiram.

Caso queira ver uma demonstração do novo sistema em funcionamento clique aqui.

Alguns recursos dos comentários do Google+

• Quando um leitor deixar um comentário no seu blog ele terá a opção de compartilhar automaticamente o post no Google+, o que ajuda não só na divulgação, como também no SEO, já que o Google leva em conta os links postados em sua rede social;
• Caso o recurso acima seja marcado pelo usuário, o comentário será publicado no perfil do mesmo e todos as respostas deixadas por outros usuários também aparecerão no blog, e vice-versa;
• O usuário ainda tem a opção de escolher quem pode ver os comentários, se eles serão públicos, se só aparecerão para os amigos, ou para um determinado amigo;
• Como autor do blog você receberá uma notificação assim que um comentário for publicado em seu blog;
• Os seus leitores poderão escolher em qual ordem desejam ver os comentários, se serão em ordem de publicação ou importância;
• Os leitores também podem marcar os comentários dos outros usuários com "+1", uma espécie de "curtir" que permite aos usuários dizerem que gostaram do comentário;
• Os novos comentários aparecem para os outros usuários automaticamente sem ser necessário a atualização da página.

Como inserir os comentários do Google+ em seu blog

Um bug que percebi no sistema é que em alguns templates personalizados (como aqui no Como Blogar) ele não funciona corretamente. Mas não se preocupe, pois assim como ocorreu quando o Blogger lançou a opção "Responder" no sistema antigo de comentários, em breve será disponibilizado aqui no blog uma solução para isso.

Antes de mais nada é necessário que seu perfil do Blogger esteja vinculado ao Google+. Caso ainda não esteja, acesse o seguinte artigo e descubra como fazê-lo:

• Associar perfil do Blogger ao Google+ - Dicas Blogger

Assim que seu perfil do Blogger estiver associado ao Google+, siga o seguinte processo:

1° passo: Acesse o painel do Blogger e clique na opção do blog que você deseja inserir o novo sistema;

2° passo: Clique na aba "Google+" localizada no menu esquerdo da página;

3° passo: Marque a opção "Usar comentários do Google+ neste blog".

Pronto! O sistema de comentários do Google+ já está ativado em seu blog.

Caso ele não funcione corretamente, ou você desista de usá-lo, basta desmarcar a opção novamente e tudo voltará ao normal.

Espero que tenham gostado. Até breve!

Personalizar comentários do Blogger - Versão 2

Já ensinei aqui como personalizar os comentários do Blogger, e devido ao sucesso desse artigo que recebe dezenas de visitas por dia oriundas do Google, decidi publicar um segundo tutorial ensinando a customizar essa área de comentários para deixá-la mais bonita e elegante afim de incentivar o interesse dos leitores a deixar um comentário.

Essa nova versão contará com três estilos diferentes, azul, rosa e verde, para que você possa escolher a cor que melhor combina com o template do seu blog.

• Clique aqui para visualizar uma demonstração

Antes de começar a instalar esse recurso em seu blog, é recomendável que você faça um backup do seu template, assim, se ocorrer algum erro, você poderá voltar ao seu template original.

1° passo: Acesse o painel do blogger, escolha o blog que você deseja instalar, selecione a opção modelo e clique em "Editar HTML".

2° passo: Agora você deve escolher qual estilo deseja adicionar aos comentários do seu blog, copiar o código correspondente e colar acima da tag ]]></b:skin> (procure usando o Ctrl F).

Estilo azul

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9EsbZ98zrel5-JyFlu-Enf3OPRT7nok9eqJ3ebdMrpgs_Yj299RcnWsPPewzgHZ0vNL80BqgkU3PHHtBBAn39fuX95ugx6-tBHAVn72H-YQrVmC7gff4ZLBkNfDfTI5cLCu6gnvCK-7o/s320/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

Estilo rosa

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibChvwN2aPl48gXEGY7BVu5B9hhwWeZwm1QSbZ1bhOQ83ccbckFNchQdgGpR4G0flMsx6tZqlkjnhxvkGXu5LCeMrQ6X8zrDB0ExhMtWlFzsNPBJ9RhKB7RJKp0vTGRPjsULt-gj5KUPo/s320/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

Estilo verde

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdnxsHzqfDnC2Nbo6vDmTBC8mhmCoTblnzYt-_S7bAJGWTHe_ZpGOeBg68a-SS_JumK7egiETsDRUC2QOezsb_QliLtDyPZteeWhzp7RBRap5m8M6s4mLQans0fTCpU4ymLO5x7jjknY/s320/picresized_1338989738_comment-author-green.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
3° passo: Clique em "Salvar modelo" e veja o resultado.

Atenção: Se a opção responder não estiver funcionando após a inserção de um dos códigos acima, é porque os "Threaded Comments" não estão ativados em seu blog. Se esse for o seu caso ative agora mesmo a opção responder nos comentários do Blogger.

[Fonte: Spice Up Your Blog]

Colocar emoticons nos comentários do Blogger

A possibilidade de deixar comentários ao fim dos artigos é uma das características mais importantes dos blogs, pois possibilita a interação do leitor com o blogueiro e ainda enriquece o artigo. Existe várias técnicas que ajudam a aumentar o número de comentários recebidos, dentre elas, deixa-lo mais interativo usando emoticons.

Os emoticons são ícones baseados em expressões faciais que traduzem o estado emocional do leitor. Por exemplo:

"Ótimo artigo, me ajudou muito (estou feliz)"
"Obrigado pela dica, mas infelizmente não funcionou em meu blog (estou triste)"

Existe muitos scripts que adicionam esse recurso nos comentários do blogger, porém, depois do lançamento dos Threaded comments (opção responder comentário), todos eles pararam de funcionar, mas felizmente um blog da indonésia desenvolveu um script que funciona perfeitamente mesmo nos threaded comments, e são baseados nos famosos smileys do Yahoo messenger.

• Clique aqui para ver uma demonstração.

Colocando emoticons nos comentários do Blogger

Antes de tudo, é necessário que a opção "responder comentário" esteja ativada em seu blog. Caso não esteja, leia o tutorial de como ativá-la clicando aqui. Com o recurso já ativado, siga o tutorial abaixo e em pouco tempo seu sistema de comentários estará muito mais interativo.

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2° passo: Agora usando o Ctrl F, procure por:
</body>
3° passo: E acima dele adicione o seguinte código:
<!-- Emoticons nos comentários do Blogger - ComoBlogar.com -->
<script src='http://comoblogar.googlecode.com/files/emoticons-blogger.js' type='text/javascript'/>
4° passo: Clique em "Salvar modelo".

Leia também:

• Como personalizar os comentários do Blogger

Ativar opção responder comentários no Blogger

Recentemente eu publiquei um artigo que ensinava como personalizar os comentários do Blogger, afim de deixa-los mais atraente, só que muitos blogueiros se queixaram que a opção "responder", que foi lançada recentemente pelo Blogger simplesmente não funciona. Isso acontece quando o blog em questão usa um template que foi desenvolvido antes do lançamento desse recurso.

Se essa opção também não funciona em seu blog, siga o tutorial abaixo e em poucos minutos seu blog terá a opção "responder" funcionando devidamente.

Ativando a opção responder comentários no Blogger em templates personalizados

Antes de começar a ativar esse recurso, é recomendável que você faça um backup do seu template, assim, se ocorrer algum erro, você poderá voltar ao seu template original.

1° passo: Acesse o painel do blogger, escolha o blog que você deseja instalar, selecione a opção modelo, clique em "Editar HTML" e marque a caixinha "Expandir modelos de widget".

2° passo: Agora usando o Ctrl F, procure um trecho igual ou parecido com o seguinte:
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
3° passo: Agora substitua todo o trecho pelo seguinte:
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
4° passo: Clique em "Salvar modelo" e veja o resultado.

É provável que esse recurso não funcione em templates que tenha à área de comentários muito personalizada. E a melhor opção nesse caso é mudar de template.

Como personalizar os comentários do Blogger

Em janeiro o Blogger anunciou o lançamento dos "threaded comments", um novo sistema de comentários que possui a opção "responder" nativamente. Mas esse não foi o fim dos problemas com o sistema de comentários do Blogger, pois ele ainda continua bastante simples  e a cada dia apresenta novos bugs. Por esse motivo muitos blogueiros se "rendem" aos sistemas de comentários externos, como o Disqus ou o Intense Debate, que deixam o blog muito mais lento, e dificulta, ou até mesmo impossibilita, uma possível migração de plataforma. E para diminuir o problema, trago a vocês, um código que vai dar uma repaginada nos comentários do seu blog, deixando-o muito mais atraente.

Personalizando os comentários do blogger

Antes de começar a instalar esse recurso em seu blog, é recomendável que você faça um backup do seu template, assim, se ocorrer algum erro, você poderá voltar ao seu template original.
1° passo: Acesse o painel do blogger, escolha o blog que você deseja instalar, selecione a opção modelo e clique em "Editar HTML".
2° passo: Agora usando o Ctrl F, procure pela tag ]]></b:skin>, e insira o seguinte código acima dela:
/* Início do código de personalização dos comentários desenvolvido por http://www.spiceupyourblog.com e editado por http://www.comoblogar.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZRLOvwkxh0iGgsBAk0T3oUuz-tQZhf0ibo1QIuThnAeHH0KXqRk80wafiKeg6Fvhe3RlF000CMhEQmb-ziPE2d0UkV9qt8NFiLg7FVCSqO_xjnbkmFfOsQ08_MqSRKxegJuSO2Q8Ml04/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* Fim do código de personalização dos comentários desenvolvido por http://www.spiceupyourblog.com e editado por http://www.comoblogar.com */
3° passo: Clique em "Salvar modelo".

Pronto, seu sistema de comentários está muito mais bonito e atraente.

Obs.: Caso mesmo depois de instalar essa personalização, a opção "Responder" não funcione, acesse o seguinte artigo e ative a opção responder comentários no Blogger.

Não gostou desse modelo? Então veja a segunda versão desse artigo onde temos um modelo ainda mais moderno:

• Personalizar comentários do Blogger - Versão 2

[Fonte: Spice Up Your Blog]