viernes, 19 de septiembre de 2008

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:
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:
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>.
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.

17 Comentarios:

FraNXu dijo...

me has alegrado el dia... llevo 3 dias buscando alguien q comparta algo asi... mil gracias :)

Mario dijo...

Mas me alegra a mi saber que te ha sido util FraNXu ;D, espero verte otra vez por aquí.

Denada¡¡

Heru! dijo...

grax men me resulto bm...

solo q no puede ponerle un margen del borde de la pagina.. del lado izquierdo...
con que codigo se hace?

GRAx!

Mario dijo...

Heru disculpa la tardanza de mi respuesta, ahora toy un poco liado con parciales y me queda poco tiempo para dedicarme al blog. Si prefieres para que te conteste mas rápido envíame tus consultas a mi correo, mariolemes@hotmail.com.

La respuesta a tu duda es simple, el primer apartado del código css en .coment-form, tenemos el atributo margin, allí eliges como quieres situar el formulario, siendo el primer parámetro para el margen superior, el segundo para el derecho, el tercero para el inferior y el 4 parámetro para el margen izquierdo, por lo que sera este el que tendrás que modificar dejando los demás a 0. (margin:0 0 0 200px;)

Espero haberte ayudado y disculpa la demora de la respuesta, ya sabes, si tienes alguna otra duda no dudes en comentarlo.

Saludos

Raúl dijo...

gracias master me saco el sombrero

me ayudó un montón gracias

Mario dijo...

Denada raúl, ya sabes si necesitas algo déjate caer por aquí que te intentaremos ayudar en todo lo posible.

Saludos ;)

Mario dijo...

Por supuesto¡¡ podrías especificar cual es tu problema ;)

Nathan yo dijo...

Lo que sucede es que cuando hago el proceso me da el siguiente mensaje Por favor, corrige el siguiente error y envía la plantilla de nuevo.
"No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The content of elements must consist of well-formed character data or markup.", y yo lo hago exacto como lo explicas

Mario dijo...

Bueno a lo que íbamos, el mensaje al que haces referencia, te lo muestra Blogger cuando has incluido código incompleto, por lo que no sabe donde empieza o donde termina.

Por ese motivo toda etiqueta o instrucción en HTML posee de dos indicadores que delimitan la zona de código donde empieza <… y donde termina …./>.

Para incrustar el formulario en la entrada de cada post es necesario añadir dos bloques de código en HTML, cerciórate al copiar el código de que cada instrucción de cada uno de los bloques tiene su indicador de inicio y de final como son <b: includable> y </b: includable> o <div> y </div>.

Otro motivo por el cual te puede salir dicho mensaje es porque a lo mejor sin darte cuenta lo estas pegando en el sitio equivocado, esto puede ocasionar que algunas instrucciones se solapen de tal manera que se cierran antes de lo debido o al revés.

También y buscando más posibilidades a tu problema, puede ser que a la hora de sustituir el segundo código estés dejando alguna etiqueta como <p> o </p> fíjate en borrar el bloque entero y sustituirlo por el bloque correspondiente. Si te fijas, tanto el bloque de código que eliminas como el bloque por el que sustituyes empiezan y terminan con las etiquetas <p> y </p> por lo que el cambio debe ser exacto.

Se me olvidaba, por último, aunque yo lo advierto en el post es que tienes que comprobar que no estás duplicando los códigos ya que en algunas plantillas que no son las propias de Blogger suelen diseñar las plantillas de forma totalmente diferente por lo que te puede suceder que te falten secciones como las que se indican en el post donde debes pegar el código, o en cambio puede suceder que tengas códigos duplicado y estén surgiendo incompatibilidades.

Bueno espero que poco a poco y con las posibilidades que te he dado puedas avanzar o solucionar el problema, de no ser así no desesperes y vuélvelo a comentar que no tenemos problema en ayudarte todo lo que necesites.

Saludos y suerte¡¡ ;D

Nathan yo dijo...

todaviía no he intentado lo que me dijistes pero he necontrado un truco de los links que talvez tu quieras postear pues, hace que al pasar el mouse se encienda el link de el color que tu quieras dime si te intresa bueno si ya lo sabías o si ya lo posteastes llege tarde jajajaja AVISAME

Mario dijo...

Parece interesante, agradecemos el detalle, si quieres puedes dejar la fuente y ya le echaremos un vistazo aunque no te prometo que lo publiquemos de aquí a corto plazo dado que estamos un poco liados, en cuanto pasemos el temporal retomaremos el blog como lo hemos estado llevando.

De todas maneras me vuelvo a repetir, te agradezco el detalle.

Un saludo ;D

Anónimo dijo...

Esta genial yo lo quiero agregar a mi blogg pero al intentar agregar lo del segundo codigo no me sale igual y cuando lo pego me aprece un error, me podrias ayudar por favor.

Publicar un comentario