Incrustar el formulario de los comentarios en Blogger

Como podréis ver, hemos habilitado la opción que permite incrustar el formulario de comentarios al final de cada entrada del blog. Esto la verdad que ayuda mucho a la hora de acercar al lector esa interactividad tan característica de la red 2.0 y que tanto se fomenta en los blogs, haciendo mucho mas facil escribir un comentario sin necesidad de cargar el formulario en terceras paginas.

Espero que esto incite a los usuarios a comentar mas, que siempre nos gusta leer sus opiniones y abrir debate en torno a ellos.

El trasfondo de esta articulo es enseñaros como poder hacer lo mismo en vuestros blogs en sencillos pasos y con la posibilidad de modificar si se quieres este formulario.

Lo primero es lo primero, haced una copia de seguridad de vuestra plantilla antes de llevar a cabo cualquier cambio.

Posterior a esto no dirigimos a la pagina de Blogger in draft, el cual es la pagina de Blogger donde se realizan todas las pruebas antes de implementarlas oficialmente. Se accede igual que en el Blogger normal, simplemente lo que veremos es una interfaz distinta en donde los desarrolladores prueban las betas antes de hacerlas públicas.

Por tanto, vamos a la pestaña Configuración allí accedemos a la opción Comentarios y buscamos Ubicación del formulario de comentarios, donde seleccionaremos Entrada incrustada a continuación. Esto es todo lo que tenemos que hacer en "Blogger in draft", al resto del proceso es indiferente donde lo hagáis, se puede hacer en el primero o en el Blogger normal.

Lo siguiente seria comprobar en vuestro blog, después de haber guardado los cambios, si ya se os ve el formulario en las entradas individuales. Digo esto dado que he comprobado que en algunas plantillas con hacer esto es lo único que se necesita para habilitarlo. En cambio si aun no lo veis seguiremos con lo siguiente:

Nos dirigimos a la pestaña Diseño y dentro de allí entramos en Edición de HTML. Activamos la casilla de la opción Expandir plantillas de artilugios. Con el acceso directo Ctrl + F buscaremos la siguiente linea: <b:includable id='backlinkDeleteIcon' var='backlink'>. Donde justo detrás haremos hueco para añadir el siguiente trozo:

<b:includable id='comment-form' var='post'><br /><div class='comment-form'><br /><a name='comment-form'/><br /><h3><data:postCommentMsg/></h3><br /><p><data:blogCommentMessage/></p><br /><iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/><br /></div><br /></b:includable>Cuidado, que este puede estar duplicado, ya que al marcar la opción en la configuración, esta añade el código automáticamente sin embargo por diversos motivo no funciona y hay que hacerlo manualmente. Por ello cercioraros de que el código anterior o similar es decir cualquiera que se encuentre dentro de <b:includable id='comment-form' var='post'> ... y ...</b:includable> no se repita y de ser así eliminarlo completamente y usad el expuesto aquí.

Por ultimo, debemos ubicarnos en la siguiente etiqueta <b:includable id='comments' var='post'> debemos buscar algo como esto:

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>

Y sustituirlo por lo siguiente:
<p class='comment-footer'><br /><b:if cond='data:post.embedCommentForm'><br /><b:include data='post' name='comment-form'/><br /><b:else/><br /><b:if cond='data:post.allowComments'><br /><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a><br /></b:if><br /></b:if><br /></p>Con todo ya estamos listo para guardar, y ver los resultados. Aparte queda la posibilidad de modificar ciertos parámetros del estilo de este formulario en la parte CSS de nuestra plantilla, solo basta con agregar los siguientes atributos antes de ]]></b:skin>.
(ENGLOBA TODO EL FORMULARIO, CON ESTOS VALORES LOS CENTRAS EN EL BLOG.)<br /><br />.comment-form {<br />margin: 0 auto;<br />width: 400px;<br />}<br /><br />(ESTE ES EL TITULO, "PUBLICAR UN COMENTARIO", PREPARADO PARA PONER UN ICONO AL LADO DEL TITULO.)<br /><br />.comment-form h3 {<br />background:transparent url(URL DE LA IMAGEN) no-repeat scroll left 50%; color:#6998CA;<br />font-size:19px;<br />line-height:35px;<br />}<br /><br />(AQUÍ CONFIGURAS EL CUADRO DE TEXTO DEL MENSAJE DE LOS COMENTARIOS.)<br /><br />.comment-form p {<br />background-color:#EFEFF7;<br />color:#000;<br />border:1px solid #02080e;<br />padding:10px;<br />width:375px;<br />}<br /><br />(LAS DIMENSIÓN DEL "IFRAME" SIENDO EL ALTO Y EL ANCHO RESPECTIVAMENTE.)<br /><br />#comment-editor {<br />height: 250px;<br />width: 350px;<br />}Espero que les sea de utilidad para poder habilitar el cuadro de comentarios. Ya sabéis que si tenéis alguna duda o problema comentadlo y ahora con mas razón que es mucho mas fácil.