Esto es muy útil si deseas crear un sitio de frases, página de confesiones, sistema similar a un foro o alguna otra cosa que se te ocurra.
Para ello, he creado un formulario a base de PHP básico y algo de CSS3, el cual podrás ponerlo dentro de un iframe en alguna parte de tu blog y así conseguir que otros publiquen artículos en él. Para ver un demo en funcionamiento puedes visitar el siguiente enlace:
El tutorial:
Primero les explicaré cómo funciona el sistema: Consta básicamente de un formulario que envía un correo electrónico a la dirección de tu Mail2Blogger. Al hacer esto, el sistema automáticamente publicará el artículo, o lo dejará en tu borrador según tu configuración. Para poder moderar las publicaciones te recomiendo que establezcas la segunda alternativa por defecto, pero si lo deseas puedes dejar el paso libre a cualquier post.
Paso 1: ¿Cómo configurar Mail2Blogger?:
Habilitar la característica de envío de entradas por correo electrónico es muy sencilla, símplemente en nuestro escritorio Blogger vamos a la opción "Configuración | Móviles y Correo electrónico", en ella estableceremos nuestras SecretWords y eliges la configuración que desees más conveniente:
Paso 2: El formulario PHP y su configuración básica:
Descarga este archivo .zip (Actualizado) y descomprímelo en donde desees, dentro hay un archivo con la extensión .PHP, en él busca la siguiente línea:
$tu_mail2blogger = 'usuario.secretwords@blogger.com'; // Inserta aquí tu correo Mail2Blogger
Reemplaza el correo que aparece por el que usas en Mail2Blogger, guarda el archivo y estará listo para subirse a algún servidor.
Puedes modificar algunos otros valores, pero te recomiendo únicamente que modifiques los atributos de la hoja de estilos para hacerla coincidir con tu blog.
Paso 3: Subir e insertar el formulario en tu blog:
Para este paso es necesario un servidor web (No Dropbox, Google Sites o similares), te recomiendo Nixiweb ya que posee ancho de banda y espacio ilimitados.
Una vez que hayas subido el archivo a tu servidor, lo insertas en la plantilla de la siguiente manera:
<iframe src='URL_ARCHIVO_PHP' style='height:320px;border:0; width:100%;' />
Modifica los valores width y height para cambiar el ancho y el alto del iframe, respectivamente.
Extra: Configurar la apariencia de las entradas en tu blog:
Por defecto he establecido el siguiente formato de salida al correo:
<span class="post-autor">Escrito por: Cloudx18</span>
<div class="post-body-enviado">
Este es el cuerpo de la entrada.
</div>
Nota: El título del post se agrega automáticamente dentro de la entrada normalmente.
Para poder establecer los atributos necesarios deberás utilizar los siguientes selectores CSS:
.post-autor {
/*Atributos del nombre del autor*/
}
.post-body-enviado {
/*Atributos del texto de la entrada*/
}
Nota: Para que los usuarios puedan hacer saltos de línea, es necesario que utilicen la etiqueta breakline o <br />
Si consideras que el editor es demasiado simple, puedes añadirle un editor WYSIWYG, o si lo amerita, puedo actualizar la entrada mas adelante con el editor avanzado.
Actualización Viernes 30 de Noviembre de 2012:
El sistema tenía muchos contras, uno de ellos era que los usuarios podían insertar HTML sin restricciones, un gran fallo de parte mía ya que los usuarios podían escribir etiquetas <script> y <style> (Gracias a Emilio Cobos por informarme sobre tamaño desastre y descuido).
Puedes descargar el sistema nuevamente modificado por Emilio, o bien descargar la actualización y corrección que incluí por mi cuenta, ambas opciones deberían funcionar correctamente.
La lista de opciones que incluí fueron las siguientes (Reescribí el sistema desde 0):
- Validador del formulario: Necesario para que los usuarios deban escribir un mínimo de carácteres para poder enviar el artículo. Para cambiar los parámetros deberás modificar los siguientes datos:
Para el nombre:
if (validador.nombre.value.length < 4) {Para el título:
if (validador.titulopost.value.length < 10) {Para el post:
if (validador.mensaje.value.length < 20) {
Tampoco olvides modificar las siguientes líneas:
Para el nombre:
Mín. 4 CarácteresPara el título:
Mín. 10 CarácteresPara el post:
Mín. 20 Carácteres
- Se ha añadido además el formulario dentro de una tabla para mantener los elementos alineados correctamente según el ancho del iframe.
- Se agregó un Doctype y se corrigieron problemas de síntaxis.
- Las palabras que lleven tilde y eñe (Ñ) debieran mostrarse correctamente.
- Ya no se pueden ejecutar scripts ni aplicar hojas de estilos en ninguno de los campos ya que las etiquetas se suprimen y dejan el contenido fuera, puedes modificar la lista de etiquetas utilizables desde la siguiente línea:
// Usamos strip_tags para permitir sólamente algunas etiquetas, si alguna otra existe dentro del código, ésta se suprimirá y dejará el contenido ---- No incluyas las etiquetas <SCRIPT> ni <STYLE> por una cuestión de seguridad.
$cuerpo_seguro = strip_tags($cuerpo_post, '<p><a><br><b><u><i><ul><ol><li><span><img><blockquote><h1><h2><h3><h4><h5><h6><strike><stroke><div><font><input><button>');
Si deseas agregar un editor WYSIWYG, puedes usar Nicedit, es un sistema muy útil que sirve para reemplazar todos los textareas de una página web:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
Este código debes pegarlo arriba de
</head>
No hay comentarios:
Publicar un comentario