Contador de comentarios Blogger y Google+ por separado y totalizado | Oloblogger En una entrada anterior vimos una forma de mostrar los comentarios de Google+ sin renunciar a los cl...

23 de julio de 2013

Contador de comentarios Blogger y Google+ por separado y totalizado

En una entrada anterior vimos una forma de mostrar los comentarios de Google+ sin renunciar a los clásicos de Blogger. Poco antes también mostramos un par de pequeños hallazgos en el nuevo código, entre los cuales se encontraba uno que nos permitía mostrar el número total de interacciones en Google+ (mayor que el número de comentarios propiamente dicho).

Sin embargo no se me ocurrió hilarlo todo y para los que usan ambos sistemas a la vez, explicar cómo ver el número de comentarios de uno y otro sistema por separado. Pero en Blogger Code sí que lo han hecho y la autora ha montado un pequeño sistema que integra todo en cuanto a contadores se refiere: cantidad de comentarios clásicos, número de comentarios Google+ y el total de ambos.

Lo podéis ver funcionando en esta demo que tiene ambos sistemas operando simultáneamente.

Comentarios Blogger, comentarios Google+ y total


La base de todo son estas variables que recogen los datos que necesitamos:

  • Comentarios Blogger: data:post.numComments
  • Comentarios Google+: class='g-commentcount' asociada a la dirección del post (data:post.url)

Este último se usa en primera instancia partiendo de cero (data-preexisting_count='0') por lo cual sólo muestra los comentarios de Google+ y en segunda contando a partir de los comentarios clásicos existentes, consiguiendo de esta manera el total que también buscamos.

El código para mostrar todo queda como sigue y se puede insertar en la plantilla en el lugar que cada uno desee, pero siempre en la zona de entradas. Por ejemplo se podría poner dentro de la caja que forma la cabecera de un post (<div class='post-header-line-1'>) o en cualquiera de las líneas del pie de las entradas (<div class='post-footer-line post-footer-line-1'>).

<b:if cond='data:post.allowComments'>
<b:if cond='data:post.allowNewComments'>
<div class='comments-count-blo-goo'>
<div class='comment-blogger'><data:post.numComments/> comentarios</div>
<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-total'>Total : <div class='g-commentcount' data-color='#666666' data-font-family='arial' data-font-size='13px' expr:data-href='data:post.url' expr:data-preexisting_count='data:post.numComments'/></div>
</div>
</b:if>
</b:if>

Si alguien no quiere el total sólo tiene que quitar el div completo que lleva la clase comment-total.


Y evidentemente, para que salga como en la página de prueba hay que darle algo de estilo. Este es el usado en esa demo:

.comments-count-blo-goo {
padding: 5px;
background: rgb(248, 248, 248);
margin-top: 15px;
border: 1px solid rgb(229, 229, 229);
border-radius: 3px;
color: #666666;
line-height: normal;
vertical-align: top;
font-size: 13px;
font-family: arial;
}
.comment-blogger, .comment-google {
padding-left: 18px;
height: 16px;
display: inline-block;
width: 130px;
}
.comment-blogger {
background: url("//www.blogger.com/img/logo-16.png") no-repeat;
background-size: 14px;
}
.comment-google {
background: url("//www.google.com/images/icons/ui/gprofile_button-16.png") 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 {
vertical-align: top !important;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

18 comentarios :

  1. Que interesante, yo tengo algo parecido pero con Facebook, se podrá hacer lo mismo para que sume el numero de comentarios de ambos???

    ResponderEliminar
    Respuestas
    1. Con este sistema no porque aprovecha variables de Google+ que no tienen en cuenta -como es lógico- los datos de Facebook. Para sumarlos habría que desarrollar alguna rutina en JavaScript.

      Verlos por separado parece fácil:
      http://ajmrdesign.com/2013/06/anadir-contador-de-comentarios-de.html
      http://www.tecmez.com/2012/07/contador-de-comentarios-de-facebook-en.html

      Eliminar
  2. Hoy hice una prueba con el contador de Google+ y me encontré dos cosillas:

    1. Carga el número y una palabra (comentarios), que en mi caso carga en inglés (comments) por algún motivo. Como yo solo quería el número, ya no me vale.

    2. El número indica cuantas veces se ha compartido en Google+ de forma pública o en tus círculos, pero ahora los comentarios de Google+ también muestran los comentarios de Blogger, incluso los que fueron escritos hace años. Parece que la sustitución total está cerca...

    ResponderEliminar
    Respuestas
    1. 1- La palabra comments la puedes pasar a español añadiendo al script que carga el plusone.js, una línea:
      window.___gcfg = {lang: 'es'};
      Si no lo encuentras, simplemente añádela entre etiquetas SCRIPT.

      Por otra parte, si quieres sólo el número, prueba a ocultar el resto:
      #widget_bounds span {
      width: 5px;
      overflow: hidden;
      }

      2. No sé si está cerca la sustitución total, pero han habilitado la carga de comentarios clásicos del blog casi por obligación. De lo contrario no se pasaría a los nuevos ni el Tato porque pienso que nadie estaría dispuesto a perderlos ;)

      Eliminar
    2. Mil gracias siempre, Oloman. Lo he probado y hay otro problemilla. El número que da son las interacciones en Google+ (veces compartido y comentarios generados), pero ahora como integra los comentarios de Blogger en la misma ventana pone un número de interacciones total y queda confuso poner "Ver 3 interacciones en G+" y que luega aparezca una ventana con 15 comentarios. No sé, me da la impresión de que aún no está todo hecho en este tema, así que lo voy a dejar así de momento. Me da la impresión de que en algún momento forzarán la sustitución obligatoria, y si no lo hacen ya es porque saben que generará mucho rechazo.

      Eliminar
    3. Desde luego que no esta todo hecho, pero desde nuestro punto de vista y el de nuestras necesidades. Desde el de Google sospecho que sí.

      Eliminar
  3. Hola,

    he intentado colocar este contador que has puesto aquí pero no se me muestra, por lo que sea mi plantilla siempre ha tenido problemas para eso :S

    No hay otra forma de que el número de comentarios se actualice bien? Tenía comentarios hechos por gente en google+ y ni me había enterado...

    Respecto a los comentarios que tenía de siempre se han fusionado con normalidad con los de google+.

    ResponderEliminar
    Respuestas
    1. Hola. Por lo que he visto tú sólo tienes comentarios de Google, así que este código tal cual no te sirve. Mira en esta otra entrada. Allí indico como sacar ese número.

      Eliminar
  4. Hola Oloman, estamos haciendo un blog para nuestra boda y no sabemos por qué no aparece la opción de poner el comentario. No sé si es aquí donde debería escribir esta duda, pero he estado buscando por tu blog y no encontraba el sitio preciso. Nuestro blog es bodavirgiali.blogspot.com.es . Por cierto, tu blog es completísimo, y ya me ha ayudado ha resolver algunas cosillas. Felicitaciones.

    ResponderEliminar
    Respuestas
    1. Hola Alicia. Asegurate de que en el Escritori > Configuración > Entradas y comentarios, tienes bien seleccionadas las opciones de mostrar comentarios.

      Luego ve a una entrada cualquiera, edítala y en el panel de la derecha "Configuración de las entradas" > "Opciones", comprueba que está marcada la opción "Permitir" del apartado "Comentarios". Esto último lo deberás hacer con todas las entradas que llevas publicadas.

      Una vez hecho las siguientes ya te aparecerán por defecto con comentarios.

      Eliminar
    2. Gracias Oloman, era lo de permitir en las entradas. Vaya chorrada y qué quebraderos de cabeza nos ha dado. Gracias de nuevo, nos ha sido de granayuda.

      Eliminar
    3. Las PEQUEÑAS chorradas que se desconocen causan GRANDES problemas ;)

      Eliminar
  5. buen dia; pudiera decirme como colocar el contador de visitas de google+ en mi blog? gracias

    ResponderEliminar
    Respuestas
    1. Que yo sepa no existe un contador de visitas de Google+, sin embargo puedes encontrar en el Panel de Control de Blogger un apartado de "Estadísticas" que te da datos de visitas.

      Eliminar
  6. 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

    ResponderEliminar
    Respuestas
    1. Hola Roger
      No sé qué tipo de comentarios tienes en tu sitio ni tampoco puedo ver esa parte de la plantilla desde aquí, pero en esta entrada tienes el código completo de esa parte (antes de las modificaciones que propongo para el caso). Comprueba que lo tienes igual por si tu plantilla lo tiene modificado.

      Eliminar
  7. Hola!! una pregunta y si quiero que estos se sumen juntos, me he dado cuenta que mis entradas aparecen sin comentarios, pero cuando entro a ellas sin tienen :(, me podrías ayudar, por favor

    ResponderEliminar
    Respuestas
    1. Hola. Eso es precisamente una de las cosas que comento en el post. Lo logras con todo el código que hay dentro del DIV con clase comment-total

      Eliminar