Integrar comentarios Google+ en cualquier sitio. Simultanearlos con los clásicos

Ahora mismo podéis ver en este blog una manera de tener los comentarios de G+ sin dejar de usar los que estábamos utilizando hasta ahora y que he llamado clásicos para entendernos más fácilmente. Es un simple enlace que abre en una ventana emergente los de Google Plus de manera totalmente operativa y que pienso funcionará en cualquier plataforma con un pequeño cambio.

Pero dándole vueltas al tema se me ocurrió que quizás pudiera simultanear los dos sistemas en el blog sin necesidad de abrir más ventanas y así ha sido, por lo que vamos a ver ambas cosas.

Advierto que no he profundizado mucho ni me he molestado en crear un sistema estéticamente óptimo, porque todo esto está muy en pañales y cualquier día Google comienza a cambiar cosas y se queda obsoleto todo. Así que lo que he hecho han sido cambios muy básicos y un poco toscos, pero que funcionan y al mismo tiempo permiten una desinstalación fácil si fuera necesario. Las virguerías las dejo para los demás.

1. Ver comentarios en una ventana emergente

El primer sistema consiste en insertar un enlace con determinados parámetros que lleva al "generador" de los nuevos comentarios. Se podría poner en diversos lugares, pero para que se vea sólo cuando no tenemos activada la opción de Usar comentarios de Google+ en este blog ? (si los hemos activado no nos hará falta el botón) y que cuando no haya todavía comentarios también aparezca, el lugar que encontré más adecuado fue en el gadget comment_picker.

En gris las líneas de referencia y en negro lo que habría que insertar. Ambos segmentos insertados son idénticos y lo único que hay que cambiar son todas esas xxxxxxxxxxxxxxx por la ID de vuestro blog.

<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<!-- ENLACE A COMENTARIOS GPLUS -->
<a class='gplus-comment-link' expr:href='&quot;https://plusone.google.com/_/widget/render/comments?bsv&amp;href=&quot; + data:post.url + &quot;&amp;first_party_property=BLOGGER&amp;legacy_comment_moderation_url=https://www.blogger.com/moderate-legacy-comment.g?blogID=xxxxxxxxxxxxxxxxxxx&amp;view_type=FILTERED_POSTMOD&quot;' onClick='window.open(this.href, this.target, &quot;width=670,height=400,scrollbars=yes&quot;); return false;' target='_blank' title='Comentar en Google+'>Interacciones en Google+</a>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<!-- ENLACE A COMENTARIOS GPLUS -->
<a class='gplus-comment-link' expr:href='&quot;https://plusone.google.com/_/widget/render/comments?bsv&amp;href=&quot; + data:post.url + &quot;&amp;first_party_property=BLOGGER&amp;legacy_comment_moderation_url=https://www.blogger.com/moderate-legacy-comment.g?blogID=xxxxxxxxxxxxxxxxxxx&amp;view_type=FILTERED_POSTMOD&quot;' onClick='window.open(this.href, this.target, &quot;width=670,height=400,scrollbars=yes&quot;); return false;' target='_blank' title='Comentar en Google+'>Interacciones en Google+</a>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>

Actualización: Incluido un scrollbars=yes en el código para que la barra de desplazamiento vertical se vea en IE y Firefox. Detalle aportado por JorgeMG. Gracias.

Para poder dar estilo al enlace he incluido la clase .gplus-comment-link por lo que es a ese selector al que habrá que añadirle propiedades en el CSS de cada cual para que cambie su aspecto.

Para otras plataformas supongo que el enlace funcionará igual sólo con adaptar ese expr:href y la variable data:post.url, que es la que usa Blogger para guardar la dirección de cada post y sospecho que hasta el parámetro con la ID del blog es prescindible, pero como dije al principio, no he profundizado mucho.

Tras probar el nuevo sistema de comentarios Google+ en Blogger, cada vez me cuesta más llamarlo así y por eso puse lo de Interacciones, ya que en el iframe además de comentarios salen otras cosas como notificaciones de +1 hechos sobre el post y los posts de Google+ en los que alguien compartió el link de la entrada correspondiente.

2. Integrar los comentarios Google+ y los clásicos

Esta parte estaba a punto de terminarla cuando encontré una publicación de Browsing the Net que me facilitó mucho la cosa. En ella se detalla cómo montar los comentarios de Google+ en cualquier plataforma.

Con los códigos que allí se muestran se pueden realizar muchas variantes y esta seria sólo un ejemplo adaptada para Blogger y que podéis ver en la parte inferior de esta entrada de prueba.

Para hacer la instalación lo más sencilla posible para vosotros he usado jQuery y CSS inline, pero el que se atreva puede reordenar esto de mejor manera y modificar el código al gusto. El lugar también más simple que he encontrado para ponerlo sería justo después de <b:include data='post' name='post'/>

<style>#comments, #gpluscomments {display:none;} a.comentarios {margin: 10px auto; display:block;border:1px solid #eee; background: #333; text-align: center;font-size: 120%;}</style>
<a class="comentarios" onclick='$(&quot;#gpluscomments&quot;).slideToggle();' href='javascript:void();'>COMENTARIOS GPLUS</a>
<div id='gpluscomments'>
<div class='g-comments' data-first_party_property='BLOGGER' expr:data-href='data:post.url' data-view_type='FILTERED_POSTMOD' data-width='740'></div>
</div>
<a class="comentarios" onclick='$(&quot;#comments&quot;).slideToggle();' href='javascript:void();'>COMENTARIOS CLÁSICOS</a>

El data-width sirve para fijar el ancho de la caja de comentarios, por lo que la cifra ahí indicada tendréis que cambiarla según el diseño de vuestro blog.

Por similitud con el anterior sistema, el de la ventana emergente, es de suponer que podríamos añadir a este código un nuevo parámetro con la ID del blog en la forma data-legacy_comment_moderation_url='https://www.blogger.com/moderate-legacy-comment.g?blogID=xxxxxxxxxxxxxxx' y de hecho la prueba está montada con esa data, pero sinceramente aún no sé para qué sirve identificar el blog de origen. Por si acaso mejor incluirla.

Además de jQuery hace falta la librería de la API del botón +1, así que si no os funciona el tema es porque os falta alguna de las dos (o ambas). En ese caso estas serían las líneas para cada una de ellas que habría que insertar antes del </head> . Blogger lleva de serie la del +1, así que creo que en la inmensa mayoría de casos no os puede faltar otra que no sea jQuery.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script src='https://apis.google.com/js/plusone.js'/>

¿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

Google+

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter