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

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"