Comentarios incrustados en los posts

La idea de poner el formulario para enviar comentarios dentro de la misma página donde se muestra el post, viene de lejos, desde que una vez, Nico encontró esta página donde se mostraba como hacerlo pero, no estaba implementado para las plantillas nuevas.

Esto, significaría modificar uno de las cosas más molestas de Blogger para asimilarla a lo que hacen WordPress y muchos otros servicios, donde en una misma página, se muestra el articulo individual, los comentarios y un formulario de envío lo que nos evita el inconveniente de tener que abrir una nueva página y nos permite personalizarla para que no sea esa espantosa hoja blanca.

Mucho tiempo después, usando el mismo criterio y manipulando algunos códigos de la plantilla, creo que puede hacerse aunque ahora, ya no estoy muy seguro de si es útil o no. De cualquier manera, es un experimento y tal vez alguien pueda sacarle provecho.

Sólo se trata de insertar un IFRAME que contenga el formulario pero, como la página tiene los comentarios a la izquierda y el formulario a la derecha, antes que nada hay que establecer las opciones para que los comentarios se muestren en una ventana (popup) porque en ese modo, ambos sectores están uno sobre el otro. Para esto, vamos a OPCIONES / COMENTARIOS:

¿Mostrar comentarios en una ventana emergente? Sí No

Ahora, en Edición HTML de la plantilla, expandiendo los elementos, buscamos este código:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author'
expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id'
title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>
</b:if>

Y reemplazamos todo eso por:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<center>
<div id='comenta-outter'>
<div id='comenta-inner'>
<iframe align='middle'
expr:src='data:post.addCommentUrl'
frameborder='0' marginheight='0' marginwidth='0' scrolling='auto'
style='width:100%;height:100%;'/>
</div>
</div>
</center>
</b:if>

Ahora, buscamos este código:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link'
expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
</span>

Y lo cambiamos por este:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link'
expr:href='data:post.url + "#comments"' >
<b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
</span>

Por último, agregamos el estilo justo antes de la etiqueta </head>:

<style>
#comenta-outter {
margin: 50px 0;
}

#comenta-inner {
display: block;
height: 645px;
width: 500px;
margin:0;
border:none;
background-color: #000000;
}
</style>