Save to Drive un botón en tu web para guardar archivos en Google Drive

Google Drive es el servicio de almacenamiento en la nube desarrollado por Google. Hemos visto diversas utilidades que aprovechar con Google Drive para potenciar a Blogger: para alojar y servir una web completa, para alojar hojas de estilo o recursos  para nuestra web que no podemos almacenar en Blogger, para crear enlaces de descarga de archivos con los que complementar nuestras entradas (instrucciones, recetas, etc...), para mostrar una presentación desde nuestro Blog y darle el aspecto que deseamos, para almacenar componentes que no podemos utilizar en Blogger directamente e incluso para crear y almacenar formularios y recibir notificaciones por correo cuando nuestros usuarios los rellenan.

Hoy vamos a ver otra funcionalidad que nos ofrece Drive para que los usuarios de nuestra web o blog puedan almacenar archivos en su propia cuenta de Drive.

¿Qué es el botón "Save to Drive"?

Se trata de un botón desarrollado por Google Developers para que los usuarios de un sitio web puedan almacenar los archivos que se ofrezcan en una determinada web en su propia cuenta de Google Drive.

Si bien en Diarios de la nube se ha ofrecido la alternativa de realizar enlaces de descarga directa desde Drive al disco duro local del usuario, este botón le permitirá almacenarlos directamente en su cuenta de Google Drive. El usuario ya no tendrá que hacer "clic derecho" para acceder al menú contextual o "clic en un enlace" para descargarse el archivo, pulsando el botón "save to drive" podrá almacenarlo en la nube para abrirlo directamente sobre Drive o descargárselo en su disco duro desde casa.

¿Cómo funciona Save to Drive?

El usuario se conecta a la página web que desea y en ella se encuentra el código que a continuación detallo para poder dibujar el botón para guardar en Drive:

Un ejemplo del botón Save to Drive

El usuario, si no está autenticado con el perfil de Google se le solicitará autenticación. Si ya está autenticado en Google, directamente le aparecerá una ventana pulsar guardar o seleccionar la carpeta de su cuenta Drive donde desea almacenar el archivo.

Una vez que haya terminado la transferencia del archivo el botón avisa de la finalización del guardado en la cuenta del usuario.

¿Qué ventajas ofrece?

• El almacenamiento en la nube permite una portabilidad de la información sin límites: el usuario puede encontrarse "fuera de casa" y desear copiarse un archivo sin necesidad de utilizar un USB externo o similar... simplemente utiliza su cuenta de Google Drive y almacena el archivo para luego descargarlo en su ordenador en casa, abrirlo directamente en la nube o grabarlo en su Smartphone o Tablet.
• Pueden descargarse archivos de valor añadido que ofrezcas en tus entradas (instrucciones, recetas, itinerarios, etc...) sin necesidad de ocupar espacio en su disco duro y pudiendo tenerlos disponibles no sólo en su casa sino desde cualquier dispositivo móvil con el que trabajen.
• Si se trata de archivos con un "peso" excesivo en MB (vídeos, fotografías en formato maestro) podrán visualizarlas en streaming desde Drive sin necesidad de ocupar espacio en sus discos duros locales.

¿Qué inconvenientes tiene?

• Si no se cumple la directiva Cross Origin Resource Sharing (CORS) del consorcio W3C, el archivo no podrá ser almacenado en la cuenta del usuario:
• Esto es que si el archivo que deseas que el usuario se descargue no reside en la misma página web (bajo la misma dirección) desde la que el usuario pretende guardar el archivo, esto producirá error. Si yo tengo el archivo almacenado en www.mihosting.com y pongo el botón Save to Drive en www.diariosdelanube.com, como es distinto servidor, la transferencia no se realizará y dará error.
• Hay una manera de solucionar esto: la norma indica que el botón debe residir en la misma dirección que el archivo que se desea descargar, así pues, ponemos una página HTML simple en la dirección donde almacenamos el archivo que contenga el botón Save To Drive y apunte al archivo que deseamos que el usuario se descargue en su cuenta de Drive. Creamos un Iframe en nuestra página HTML que muestre esa página que almacenamos en la dirección donde almacenamos el archivo. Así, como el archivo que deseamos que el cliente almacene se encuentra bajo la misma dirección que el botón (los dos en el servidor donde se encuentra el fichero para el usuario), la descarga se ejecutará sin problemas.

¿Cómo pongo el botón Save to Drive en mi web?

Es muy sencillo, en la página HTML de una entrada de tu Blog o en la plantilla (donde prefieras), simplemente tienes que copiar y pegar el código que ofrece Google Developers:

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-savetodrive"   data-src="//example.com/path/to/myfile.pdf"   data-filename="My Statement.pdf"   data-sitename="My Company Name"></div>

• donde data-src="//example.com/path/to/myfile.pdf" es la ruta al archivo que quieres que el usuario se guarde en su cuenta de Google Drive.
• data-filename="My Statement.pdf" el nombre del archivo que deseas que el usuario vea.
• data-sitename="My Company Name" el nombre de tu web, blog o empresa.

Si quieres el botón Save to Drive con un mejor rendimiento para tu sitio web, puedes pegar justo debajo del código anterior este Javascript para que el navegador pueda dibujar el botón "save to drive" asíncronamente:

<script type="text/javascript">
  (function(w) {
    if (!(w.gapi && w.gapi._pl)) {
    var d = w.document;
    var po = d.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  }})(window);
</script>

Una demo del botón Save to Drive: 

Aquí tienes un ejemplo del botón Save to Drive con el que almacenar un archivo de mi Drive a tu cuenta de Google Drive.

En la vista HTML de mi entrada en Blogger he escrito el código del botón Save to Drive para descargar una imagen almacenada en mi cuenta de Google Drive: imagen en mi cuenta Google Drive

<div class="g-savetodrive" data-filename="imagen" data-sitename="prueba Diarios de la nube" data-src="https://googledrive.com/host/0Bwgc28XHjPA2dlFmMXJ6b0tLN2M"></div>

Donde data-src="https://googledrive.com/host/0Bwgc28XHjPA2dlFmMXJ6b0tLN2M es la ruta en Google Drive al archivo que te ofrezco para que guardes en tu propia cuenta de Google Drive.