martes, 27 de noviembre de 2012

Cómo hacer que cualquier usuario publique en Blogger sin ser autor (Actualizado)

En Blogger hay una interesante función conocida como "Mail2Blogger", muy pocos la conocen y hacen uso de esta característica. Para los que no sepan cual es su función, Mail2Blogger nos permite enviar entradas desde nuestro correo electrónico y así publicarlas en nuestro blog o guardarlas como borrador. Podemos hacer uso de esta interesante herramienta para que otros puedan publicar entradas sin necesidad de que establezcas su autoría.

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.

blogger multiautor


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:

correo-blogger

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ácteres
Para el título:
Mín. 10 Carácteres
Para 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