soy Kseso y esto EsCSS

Añade los comentarios de Google+ a cualquier página respetando los existentes

Cómo añadir los comentarios de G+ en cualquier página. También en blogger respetando los comentarios previos y la caja de comentarios tradicional

Añade los comentarios de Google+ a cualquier página respetando los existentes

·Por Kseso ✎ 4

Al revuelo que se ha armado con la "buena nueva" de los comentarios de G+ y su integración en las páginas, voy a sumarme también yo.

Así que aquí va otra manera de meterlos en cualquier página, también en blogger, sin anular los comentarios preesistentes o tener que renunciar a la forma clásica de hacerlos: la caja tradicional. Y a esto añade que si usas blogger no es necesario vincular tu cuenta en él con la de G+

Aquí va el código base con la particularidad de que los comentarios de G+ no se actualizan de forma automática y en caliente con la página ya cargada. Para ello ve al final del artículo y en el segundo enlace de este párrafo tienes cómo hacer que sean dinámicos.

<script src="https://apis.google.com/js/plusone.js"></script> <div class="g-comments" data-href="[URL]" data-width="600" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"> </div>

Sólo tienes que cambiar la cadena [URL] por la ruta a la página que quieras (permalink) y ajustar la anchura indicada en data-width="600"

Recuerda que esto es para cualquier página. No sólo blogger.

Así que si quieres integrarlo en blogger manteniendo todo lo anterior a esta api sólo tienes que ir a tu editor de la plantilla e integrarlo allí donde quieras o necesites y para indicar la dirección hacer uso de data correspondiente

Para pruebas y en lo que verifico en correcto funcionamiento en esta entrada van a ir colocados aquí, dentro del cuerpo del post.

Pero hay algún problema que he detectado de entrada. La altura inicial es demesurada, dejando un gran espacio vacío en ausencia de comentarios. Y en caso de ser muchos los comentarios puede resultar un post kilométrico. Hasta verlo con más detenimiento una solucción temporal sería incluir el código anterior en un div y darle la altura al gusto y un su overflow correspondiente.

Adaptando el código para blogger

Para añadirlo a blogger sólo es cuestión de modificar el data-href para que cada articulo tenga su propio link.

Así mismo sólo interesaría permitir esta vía en aquellos post donde se tenga permitido comentar, así que añadimos esa condición.
Quedando así el código con esas dos premisas: a cada artículo sus comentarios y sólo en los artículos que desde el blog los permitamos:

<b:if cond='data:post.allowNewComments'> <h4>Comentarios en GooglePlus</h4> <div class="comment-form"> <h4>Reacciones en G+</h4> <script src="https://apis.google.com/js/plusone.js"></script> <div class="g-comments" expr:data-href="data:post.url" data-width="600" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"> </div> </div> </b:if>

Pero como puedes ver en algún otro artículo, también esnifa y duplica los comentarios realizados mediante el formulario tradicional. Ouch!!

De momento lo dejo activado en el blog hasta investigarlo más a fondo.

Y sin más, aquí te dejo una demo, tras el formulario de los comentarios del blog.

Créditos y otras formas

Visto por medio de un tuit de @DanielUlczyk

Que me llevó a este artículo y de él a este otro post con más información

Si no te convence esta forma de hacerlo no te preocupes. A día de hoy ya hay las suficientes variaciones y a medida que pasen los días seguirán surgiendo otras que pulirán las pegas de las actuales.
Para muestra un botón:

  1. Comentarios de Google+ en plantillas modificadas y un par de cosillas más en Oloblogger
  2. Habilitar comentarios de Google+ en Blogger en Amor Sevillista
  3. Bringing Google+ Comments to Blogger en el blog oficial de Blogger

Comentarios vía G+

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso