No se si recuerdan hace algún tiempo en este blog tenía implementado lo de vista previa de comentarios, pues precisamente, hace unos días el buen de “Jorge Cocompech”:http://kuro.blogsome.com lo estaba preguntando, como le podía hacer para meter la vista previa de comentarios en su blog, y aquí les vamos a decir como hacerlo sin necesidad de tener que programar algo en PHP. Y bueno aquí está el tutorial completo, paso por paso, de como poner el preview en tus comentarios. Primer tutorial de agkamai.com, disfrutenlo.

UPDATE He aquí “un ejemplo”:http://agk.blogsome.com/2004/12/13/hello_world/ para la gente que desea implementarlo en “Blogsome”:http://blogsome.com

¿Como implementar la vista previa de comentarios en WordPress (o Blogsome y similares)?

Disclaimer

A partir de aquí tu te haces responsable por lo que hagas o dejes de hacer en tu blog, o por ningun daño causado por este tutorial — que no creo que suceda — estas a tiempo de arrepentirte si no le sabes a esto de la programación, y de ser así pus la neta yo que tu, desde aquí le dejaba y me quedaba con las ganas de tener una vista previa para los comentarios. Recuerda que no soy soporte tecnico, así que cualquier pregunta boba de, como o donde ponerlo, ni me molestaré en contestarla. En caso de que sea algun error grave o un bug, en ese caso responderé a tu llamado.

Descripción General

En primera instancia necesitamos un script Javascript, valga la redundancia, que nos actualice el contenido que hay en nuestro campo de comentarios, y si lo requerimos, en el campo del autor. El primer problema era ver que no interfiriera con “Smarty”:http://smarty.php.net/, ya que “Blogsome”:http://blogsome.com y posiblemente otros servicios gratuitos que ofrecen Wordpress como opción para un blog, utilizan este sistema para crear las plantillas del sitio, así que el PHP queda totalmente descartado, junto con el XMLHttpRequest, que sería una carga enorme para el servidor.

Necesitamos detectar que campos vamos a cachar, para que, cada vez que se teclee algo en cualquiera de ellos se mande al Javascript, y que refleje el valor del campo en el area que hayamos designado para la vista previa de los comentarios. Y basicamente esta listo.

Si, lo sé, es latoso, pero verán que es muy sencillo implementarlo. Ok, ahora si, los pasos para poner la vista previa de comentarios en tu blog Wordpress.

Haz backup

Recuerda hacer un backup de tus plantillas pa’ que luego no me salgan que por mi culpa ya no sirve su blog. En caso de tratar de echarme la culpa o demandarme, favor de leer el disclaimer nuevamente.

Implementar Javascript

Para los que utilizan blogsome o similares, necesitarán hacer lo siguiente:

Ingresar al administrador del blog.

Ir a la sección Templates.

Elegir en las opciones que se encuentran hasta abajo, la que dice Main Page.

Ubicar en el codigo fuente el tag o etiqueta que diga </head>.

Arriba de esta etiqueta pegar el siguiente código

{literal}

{/literal}

Si se fijan lo que está dentro de {literal} y {/literal} son etiquetas de “Smarty”:http://smarty.php.net para indicarnos que ese código no lo interprete como parte de la plantilla.

Para los que no usan Blogsome, repitan todos los demás pasos excepto el ultimo, ó unicamente abran el archivo que tiene la plantilla de la pagina principal, y si de pura casualidad utilizan plantilla para un articulo unico, en ese caso tienen que abrir esa. Y peguen el siguiente codigo

Notarán que hemos quitado los tags de “Smarty”:http://smarty.php.net

Y si son geeks, guardenlo en un archivo JS, que es lo más indicado e implementelo en donde les sea mas indicado, y que su virgen, y su dios los acompañen. ¡Ya saben como! :P

Modificando el formulario de comentarios

Nuevamente en tu plantilla de comentarios, busca la siguiente etiqueta o tag

(Blogsome y similares)

(Blogsome y similares)

, y size="22", puede variar dependiendo de como esté programado el HTML, pero eso sí el id tiene que ser id="author".


Y solo nos falta el campo de comentarios, que se identifica mas o menos así



Que aplica para todos, y lo sustituimos por esto



Lo que hemos hecho aquí ha sido solamente agregar onkeyup="ReloadTextDiv()" en el textarea de los comentarios. cols="60", rows="4" y tabindex="4" pueden variar en números, pero hay que identificar el id que en este caso es id="comment".Y ya casí estamos listos, recuerda haber hecho backup de tus plantillas.

Area para la vista previa

Aqui ya es a criterio de cada uno, donde lo quieran acomodar y como quieren que se vea, recuerden niños y niñas que deben utilizar CSS para que su area de vista previa se vea bonita. Los pasos a seguir son los siguientes:

Ingresar al administrador del blog.

Ir a la sección Templates.

Elegir en las opciones que se encuentran hasta abajo, la que dice Comments Page.

Ubicar el lugar donde se mostrará el area de la vista previa de comentarios y pegar este codigo


        
 

 Nota Aquí el markup es a criterio de ustedes, pero no modifiquen estos 2 divs, ya que son escenciales para que los datos del autor se muestren en la vista previa

Aquí ya aplica para todos, pero si tienes acceso a los archivos de plantillas, en este caso podrás editar a tu gusto y poner donde quieras el area de vista previa.

Dudas, Comentarios y Reclamos

Recuerda HACER UN BACKUP de tus plantillas, recuerdalo bien. Si algo está mal, comunicamelo aquí en los comentarios, o a el emilio ehidalgo [arroba] agkamai [punto] com  —  reemplazando los correspondientes caracteres, odio el spam. Una ultima cosa, NO SOY SOPORTE TECNICO, no me hago responsable por el daño que le puedas hacer a tu blog.

Agradecimientos


“Noscope”:http://www.noscope.com/journal/2004/11/textile-live-preview
“Hicksdesign”:http://www.hicksdesign.co.uk/


Créditos

Este tutorial se encuentra protegido bajo la licencia “Creative Commons Reconocimiento-NoComercial-CompartirIgual 2.0″:http://creativecommons.org/licenses/by-nc-sa/2.0/, en la cual tienes que darme créditos, no debe ser utilizada para hacer lucro y sacarla bajo la misma licencia, en caso de que desees copiar, distribuir y comunicar públicamente el tutorial, o hacer algun tutorial parecido, derivado de este.

Off-topic

Chole, hasta sueño me dio cuando termine esto… :P

				
				

					
						This entry was posted
												on Tuesday, January 25th, 2005 at 3:52 pm						and is filed under notes.
						You can follow any responses to this entry through the RSS 2.0 feed.

													You can skip to the end and leave a response. Pinging is currently not allowed.