12 noviembre 2013

Contador de comentarios Google+, Blogger y Facebook para los comentarios todo en uno.

CONTADOR-COMENTARIOS

En una entrada anterior vimos la forma de mostrar los comentarios de Blogger, Google+ y Facebook todos juntos, sin embargo no se me ocurrió mostrar el número total de comentarios de todos los sistemas a la vez. Ahora con este tutorial veremos como llevarlo a vuestros blogs.

Comentar con Google+, Blogger y Facebook en Blogger

Este contador está extraido de Blogger Code pero modificándolo un poco y añadiéndole el contador de Facebook.  Lo podéis ver funcionando en este blog, que tiene los sistemas operando simultáneamente.

Como Instalarlo

Si ya habéis instalado la anterior entrada de comentarios, seguid estos pasos:
Paso # 1: Copia de seguridad de la plantilla!
Paso # 2: Plantilla >> Editar HTML (* Pulse Dentro Editor * Presione CTRL + F para activar el cuadro de búsqueda) y buscar el siguiente código:

<div id='com-header'>

Paso # 3:y debajo de ello agrega el siguiente código:

<div class='comments-count-blo-goo'>
<div align='center'>
<div class='comment-google'><div class='g-commentcount' data-color='#666666' data-font-family='arial' data-font-size='13px' data-preexisting_count='0' expr:data-href='data:post.url'/></div>
<div class='comment-blogger'><data:post.numComments/> comentarios</div>
<div class='comment-facebook'><fb:comments-count expr:href='data:post.url'/> Comentarios</div>
</div>
</div>
<style>.comments-count-blo-goo {padding: 5px;margin-left:10px;background: rgb(248, 248, 248); margin-top: 5px; border: 1px solid rgb(229, 229, 229);border-radius: 3px; line-height: normal; vertical-align: top; font-size: 13px; font-family: arial; margin: 0 2px 15px 10px; }
.comment-blogger, .comment-google, .comment-facebook { padding-left: 18px; height: 16px; display: inline-block; width: 110px; }
.comment-blogger { background: url(&quot;//www.blogger.com/img/logo-16.png&quot;) no-repeat; background-size: 14px;}
.comment-google {background: url(&quot;//www.google.com/images/icons/ui/gprofile_button-16.png&quot;) no-repeat;background-size: 14px; vertical-align: top; line-height: normal;}
.comment-facebook { background: url(&quot;http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png&quot;) no-repeat; background-size: 14px; vertical-align: top; line-height: normal;}
.comment-total { font-size: 13px; vertical-align: top; display: inline-block; }
.comment-total div, .comment-google div, .comment-facebook div { vertical-align: top !important; } </style>

Con esto ya tendremos funcionando el número de comentarios de cada Red Social en nuestros blogs. Como siempre digo: si no entiendes algo "COMÉNTALO"

28 comentarios

Pues muy interesante amigo. En breve miraré de adoptarlo a mi blog. Gracias

Funciona perfectamente, gracias mil!!!

Otra vez yo y mis problemas por zarpotas.....lo he puesto y me aparece en el blog perfecto, pero a la hora de pinchar para comentar, no me hace nada de nada....que he roto ahora?....me podrías decir una vez mas si es que he tocado lo que no tenia que tocar?....muchísimas gracias

Atenea, si anteriormente a instalar esto último te funcionaba bien, pasa al paso #1, osea, sube la última plantilla que guardaste.

Si no hiciste ese paso, entonces deberás entrar en plantilla-editar html-restablecer plantillas de artilugios a valores predeterminados-buscar y marcar blog1 y recuperar valores...............

Ok. he restablecido platilla y voy a empezar de 0....si es soin muuuuu torpeeeee!!!! muchisimas gracias por tu interes...

Ok..funcionando...lo he dejado sin contador, pero funciona...!!!!!!! muchísimas gracias y perdon por lo latosa que soy...

muy buen articulo visiten mi blog http://libertadenlinea.blogspot.mx/

Este Ya está colocado, Gracias por tus aportaciones Antonio eres un Crack!, porcierto le he quitado el acento al apellido que creo que era el problema de mi url, ahora aver si google me la cambia.

Este comentario ha sido eliminado por el autor.

Hola Antonio, primero que nada ¡gracias por el código! Ahora mi consulta, dentro del css de este código hay un class "comment-total" pero no apunta a nada, ¿Será que esta de sobra?

Correcto Sebastian, no me había dado cuenta, con las pruebas lo puse en el html y luego lo borré, pero el css se me olvidó eliminarlo.

Gracias por tu comentario.

Una consulta más, si quisiera colocar el Total de comentarios que es a lo que por lógica apunta esa class, ¿Cómo se puede hacer?
De antemano muchas gracias!!!!

Sebastian, los comentarios totales de google+ y blogger si se pueden mostrar pero los de facebook son más complicados. Para ello habría que crear algún tipo de script.

hola quiero añadir el contador de comentarios pero quiero ocultar el que viene de serie en blogger el problema esta en que cuando lo oculto desde el widget el bloque de comentarios desaparece . como lo podria haceR?

Sergio, para eliminar el número de comentarios de blogger debes eliminar esta parte de la plantilla:
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

FUNCIONA BIEN PERO COMO HAGO PARA QUE APARESCA NO SOLO EN LAS ENTRADAS PUBLICADAS SI NO EN LA PAGINA PRINCIPAL http://laguaridahiphop.blogspot.com/ GRACIAS

Guarida busca este trozo de código: <h3 class='post-title entry-title' itemprop='name'> y verás 2, pega lo siguiente encima del 2 encontrado:
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='mblSocialFloat' id='mblSocialFloat'>
<table class='mblSocialFloat' width='100%'>
<tr><td><div class='sharertitle'><b>COMENTARIOS&#8594;</b></div></td><td>
<div class='sharertwitter'><div class='comment-google'><div class='g-commentcount' data-color='#666666' data-font-family='arial' data-font-size='13px' data-preexisting_count='0' expr:data-href='data:post.url'/></div> </div></td><td>
<div class='fb-like'><div class='comment-blogger'><data:post.numComments/> comentarios</div> </div></td><td>
<div class='sharergplus'><div class='comment-facebook'><fb:comments-count expr:href='data:post.url'/> comentarios</div></div></td></tr></table>
</div></div>

hola muy buen articulo una pregunta como hago para poner el contador en la parte superior de la entrada tal como lo tienes tu..gracias !!

Este comentario ha sido eliminado por el autor.

Juan para colocarlo antes del título como lo tengo yo instalado debes colocar el código antes del <h3 class='post-title entry-title' itemprop='name'> de tu plantilla.

Buenas tardes Antonio, enhorabuena por tu blog.

He añadido el contador de comentarios en mi blog, pero en los comentarios de Facebook me sale el contador a 0. ¿Sabrías a qué puede deberse?

Gracias, un saludo.

A mí me pasa lo mismo. Me aparece 0 comentarios de Facebook (y lógicamente no hay 0 comentarios).
Tengo otro problemilla, pero por no mezclar lo expongo en otro comentario.

bueno, lo primero gracias por todo!!!
he puesto los contadores de comentarios sobre el título de la entrada, tal y como lo tienes tú, pero me sucede que en la página principal del blog, no aparecen los iconos esos cuadraditos pequeños de G+, Blogger y Facebook. Sí aparece sin embargo, todo lo demás (lo de comentarios y el número de cada uno).
Pero al entrar en cada entrada en particular, ya si me aparece bien. Es solo en la página principal del blog.

Salpicón quizas te falte el comments plugin de Facebook.
Mira esta entrada>

Lo que me falla es el contador, que marca siempre 0 comentarios. Luego sin embargo sí aparecen los comentarios de Facebook. Es raro ver que hay 0 comentarios, cuando en realidad estás viendo en el blog que hay varios y se leen perfectamente.

hola amigo, estaba tratando de adaptar este sistema a mi blog de juegos. es: zerojuegospc. pero se me hace una linea laaarga y con el css quise darle width pero no vale. justo esta abajo, pero arriba de los comentarios de google+, se supone que debe ser 1 sola linea y estar entre los parentesis... solo use el css de google+ y el codigo de google+.

Gracias amigo.

RcZero para usar este truco debes colocar primero el sistema de comentarios todo en uno : COMENTARIOS TODO EN UNO y luego aplicar este código para el contador de comentarios.

Ten presente siempre hacer una copia de seguridad de tu plantilla porque hay que ejecutar muchos pasos y puedes destrozar la plantilla.

Saludos.

hola, mi problema es este, borre sin querer los comentarios y ahora solo me aparecen la fecha, podrias ayudarme a colocar denuevo los comentarios?
https://picload.org/image/ppplroc/capturadepantalla2015-12-0923..png


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"