Botones para añadir eventos directamente a calendario (Google Calendar y Outlook)

9
42384

Botones para añadir eventos directamente a calendario (Google Calendar y Outlook)

Continuando con nuestra intención de añadir cada vez más funcionalidad y complementos a nuestras noticias en Adictos,
vamos a ver cómo incluir unos botones que permitan al lector añadir un evento rápidamente a su calendario
(Google Calendar o Outlook).

Al final de nuestra noticia sobre la próxima charla gratuita Autentia
(http://www.adictosaltrabajo.com/detalle-noticia.php?noticia=234) podéis ver que hemos añadido un par de botones:

Ambos botones hacen exactamente lo que dicen .

Pulsando el primero,

se creará un nuevo evento en nuestro Google Calendar:

con toda la información de la charla. Así que, si hemos decidido ir (os lo recomiendo) no tendremos más que pulsar en Guardar.

El botón de Outlook funciona de modo muy similar.


En este caso, contiene un link a un fichero iCalendar – extensión .ics:

Si lo abrimos con Outlook, nuevamente nos creará un evento con toda la información sobre la charla:

y nuevamente, sólo tendremos que guardar.

Vamos a ver cómo podemos construir los botones y añadirlos a nuestras noticias.

Empezamos por Google Calendar.

Dentro de la ayuda de Google Calendar (curioso sitio para ponerlo), encontramos la «Guía del editor de eventos»:

Si pulsamos en ese link, y luego en el correspondiente a
Permite que la gente guarde un evento concreto de tu sitio web
, obtenemos la siguiente plantilla:

Rellenamos los datos de nuestro evento, elegimos qué botón nos gusta más, … y pulsamos en «Crear botón HTML»:

Y ya tenemos el HTML para copiar y pegar en nuestra página.

Como veis, no puede ser más fácil; de hecho, la principal dificultad
radica en encontrar el editor de eventos .

Para Outlook el proceso va a ser considerablemente más manual.

Para empezar, tendremos que hacer el botón nosotros mismos. Si queréis usar el que he hecho yo, adelante (incluso lo cuelgo en
grande, por si queréis editarlo):

     

Después crearemos un fichero ical (*.ics) con los datos del evento (no es más que un fichero de texto plano). En nuestro caso:

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
DTSTART:
20100527T183000
DTEND:20100527T2030000
SUMMARY:VIII Charla Autentia – Alfresco Community Edition
LOCATION:Avda. Castilla, 1. 28830 San Fernando de Henares, Madrid
DESCRIPTION:Alfresco es la alternativa de Código Abierto para la gestión de contenido empresarial
(ECM), proporcionando gestión documental, colaboración, gestión de registros, gestión de información, gestión del contenido web
e imágenes, … y más.

END:VEVENT
END:VCALENDAR

(los datos en azul son los particulares del evento … los demás, copiadlos tal cual).

La sintaxis es auto-explicativa, pero si tenéis curiosidad o queréis añadir otros campos (organizador, por ejemplo) podéis visitar

http://en.wikipedia.org/wiki/ICalendar

o

http://tools.ietf.org/html/rfc5545

Y ya sólo nos queda conectar botón y fichero (y pegar el HTML en nuestra página):

<a href=»http://www.adictosaltrabajo.com/noticias/alfresco.ics»><img src=»http://www.adictosaltrabajo.com/imagenes/outlook-logo-p.jpg» border=0></a>

La verdad, muy poco trabajo para un resultado bastante espectacular. Espero que os sea útil.

9 COMENTARIOS

  1. Hola Merce,

    Me alegro de que te haya sido útil.

    iCal emplea el mismo formato iCalendar (extensión .ics) que Outlook, por lo que funciona sin problemas (para que quede más mono, siempre puedes cambiar la imagen del botón para indicar \\\»Añadir a Outlook o iCal\\\»)

  2. Hola Miguel,

    He creado el botón y el archivo .ics, pero cuando clico en el botón, no logro instalar el contenido en el calendario del usuario, en su lugar el archivo se abre en la misma ventana y se ve el texto del archivo .ics.

    Como lo tendría que hacer? trabajo con dreamweaver y el archivo es html.

    Gracias

  3. Hola Merce,

    Debería funcionarte sin problemas si has puesto el link como indica el tutorial, y el fichero iCal en .ics (no es más que un fichero de texto plano y etiquetas con extensión .ics).

    Prueba pulsando en «Añadir a Outlook» en la siguiente noticia (http://www.adictosaltrabajo.com/detalle-noticia.php?noticia=297), para ver si el problema está en cómo publicas la noticia o en la configuración de tu navegador.

    Debería aparecerte la siguiente pantalla: http://www.adictosaltrabajo.com/tutoriales/calendario/test-ics-mac.jpg

    Ya me dirás.

  4. Hola Miguel,

    He hecho varias pruebas, lo que se me ha ocurrido. El enlace de tu página me funciona bien. Te explico:

    – pongo un enlace en mi pag directo a tu página a \\\»refactoring.ics\\\» y funciona bien (he podido instalar el evento en el ical sin problema).

    Luego lo siguiente no funciona (quiero decir que abre una ventana en el navegador con el texto pero no activa la instalación del evento).
    – descargo \\\»refactoring.ics\\\» y hago un link desde mi pag al archivo
    – creo un txt y luego le cambio el nombre a ics
    – exporto el evento desde iCal (mac), crea un archivo ics

    No sé que más probar.

    Gracias

  5. Hola Miguel,

    Se me ha ocurrido hacer otra prueba y tengo parte del problema. Resulta que estoy trabajando con un servidor de la persona de la que hago la web y he pensado en hacer el enlace desde otro servidor y funciona. Ahora tendré que averiguar porque en ese servidor no se pueden ejecutar los archivos ics.

    Muchas gracias por todo y saludos,

    (si tienes alguna idea sobre lo del servidor será bienvenida 🙂

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad