Cómo utilizar las imágenes alojadas en Dropbox y Google Drive en una página web

Posted on by
Dropbox y Google Drive como servidores de alojamiento de imágenes/archivos para enlazar en una página web

En general se suele utilizar el mismo alojamiento web que tengamos contratado para almacenar las imágenes y otros archivos que vayamos insertar en nuestra página web. El espacio de alojamiento web suele ser limitado y caro por lo que hay que tratar de optimizar su uso de la forma más eficiente posible.

En ocasiones la cantidad de imágenes, su tamaño global o el espacio necesario para alojarlas pueden resultar lo suficientemente grandes como plantearse utilizar otras opciones de alojamiento externo para estos elementos.

Existen servicios de servidor almacenamiento de imágenes gratuitos (como Imgbb, Photobucket o Imgur) que permiten almacenar imágenes en la nube para luego enlazarlas a páginas web, pero la mayoría almacenan sólo temporalmente, por lo que tienen un tiempo de expiración limitado tras el cual las imágenes se borran del servidor. Además siempre se corre el riesgo de perder lo almacenado y sus enlaces si estos sitios cierran definitivamente.

Alternativamente existe otra opción que proporciona una solución permanente y gratuita. Se trata de los servicios de alojamiento de archivos en la nube como Dropbox, Google Drive o OneDrive, entre otros, que permiten el uso compartido de su contenido. En ellos podemos almacenar archivos de imagen pero con la ventaja añadida de poder alojar también todo tipo de elementos como música, videos y documentos multiformato.

ENLACES COMPARTIDOS vs. ENLACES NATIVOS

Los enlaces para compartir que proporciona Dropbox o Google Drive de los archivos almacenados en su nube se generan con la finalidad de ser compartidos internamente y para ser abiertos desde el visor de archivos propio de cada plataforma. Estas URL no sirven para el propósito de ser enlazados externamente.

Por el contrario, el enlace nativo o directo de un archivo apunta a la carpeta del servidor físico donde se encuentra alojado. Conseguir el enlace nativo a nuestros archivos es muy útil si se desea enlazar en una página web, sobre todo en el caso de las imágenes, así como para realizar la descarga directa de loa archivos alojados en la nube. En relación a esto último, para un webmaster es muy importante tener un enlace directo para los elementos descargables porque los usuarios no necesitan salir de un sitio web para descargar un archivo.

Para obtener el enlace nativo de su correspondiente enlace compartido deberemos someter este a un sencillo proceso de conversión. Este proceso de transformación de uno en otro es lo mostramos más adelante aplicado para Dropbox y para Google Drive.

VENTAJAS E INCONVENIENTES DE UTILIZAR ENLACES NATIVOS EN TU WEB

Las plataformas de almacenamiento en la nube son una herramienta muy interesante que nos van a permitir trabajar de una manera más independiente y más amplia que los servidores de imágenes. Además, entre las ventajas del uso de los enlaces directos podemos señalar las siguientes:

  • Sencillez de uso.
  • La versión gratuita de estos servicios ofrece espacio de almacenamiento limitado pero normalmente suficiente.
  • No consume espacio de alojamiento ni ancho de banda de nuestro host. Los archivos de medios pueden ocupar mucho espacio en el servidor y consumir el ancho de banda asignado. El almacenamiento en la nube puede ayudar manteniendo los medios separados y sirviéndolos rápidamente, como una red de entrega de contenido (CDN).
  • No comprometemos la velocidad de carga de nuestra web, incluso disminuyendo los tiempos de carga de los elementos enlazados.

Pero también tiene sus riesgos e inconvenientes:

  • Limitaciones en el uso, ya sea por la cantidad y el tamaño de los archivos como por las limitaciones en el uso del ancho de banda se pueden tener límites de descarga de los servidores.
  • Caídas del sistema. Se trata de problemas temporales cuando el servicio no esté disponible en algún momento y eso impida acceder al contenido.
  • Cierre de las plataformas. Lógicamente esto no va a pasar de la noche a la mañana, pero sin duda es algo que requeriría de trasladar todo el contenido a otro servicio online. Que una plataforma funcione de forma permanente es una cuestión que está fuera de nuestro control.

Lo que veremos a continuación está orientado, sobre todo, a proporcionar herramientas para insertar imágenes almacenadas en Dropbox y Google Drive en una página web. Será, en realidad, aplicable a todo tipo de archivos, en cuanto las imágenes son un tipo particular de archivo. Completaré la información con una serie de observaciones en forma de notas porque, como dijo aquel, “Dios está en los detalles“.

DROPBOX COMO SERVIDOR DE ALOJAMIENTO DE IMÁGENES

Dropbox es un servicio de almacenamiento de archivos en la nube ☁️ con una opción gratuita (2GB de espacio de almacenamiento) que nos permite subir todo tipo de archivos para almacenarlos o para compartirlos mediante una URL interna.

Debemos tener una cuenta en Dropbox, así que si no la tenemos podemos entrar en la dirección https://www.dropbox.com/register y crearla. Una vez hecho esto, subiremos a Dropbox los archivos que queramos enlazar en nuestra página web y así utilizarlo como servidor de imágenes/archivos.

1. CONSEGUIR EL ENLACE INTERNO PARA COMPARTIR ARCHIVOS

Para poder enlazar externamente un archivo desde Dropbox habrá que obtener la dirección del enlace nativo que permita acceder a él externamente. Pero en primer lugar debemos obtener el enlace interno al archivo que proporciona Dropbox cuando el archivo se configura como compartido. Son varios los caminos para hacerlo:

  • Inmediatamente después de subido un archivo se muestra en la parte inferior un cuadro que da opción a copiar el enlace al portapapeles.
  • Seleccionando el archivo mediante marca con un tic en el cuadro de selección. Veremos que aparece un panel a la derecha mostrando los datos del archivo. Haciendo clic en el botón Compartir se abrirá ventana emergente con opción a copiar el enlace.
  • Eligiendo la opción Copiar enlace en el menú desplegable que se abre haciendo clic sobre los tres puntos (•••) que se activan cuando el archivo se encuentra seleccionado o cuando el ratón pasa sobre el campo del archivo, y seleccionando la opción Copiar enlace.
  • Igual que en el punto anterior pero haciendo clic sobre el icono que muestra un enlace.

Con cualquiera de las anteriores opciones se copiará al portapapeles la dirección URL de la imagen o fichero al que queremos enlazar. Esa URL es el enlace interno de Dropbox para compartir el archivo que hemos subido, pero no a la URL nativa en la carpeta del servidor donde se encuentra alojado.

Para utilizar externamente es necesario disponer de la dirección del enlace nativo pero Dropbox no nos facilita esa URL directa sino que sólo nos da una URL interna que abre esa imagen en su galería, no el archivo nativo.

2. CONSEGUIR EL ENLACE NATIVO DEL ARCHIVO

Existe una manera de modificar la URL del enlace compartido anterior y transformarla en otra que apunte directamente al archivo alojado en el servidor.

  • Modificación del enlace para COMPARTIR archivos de imagen.

Para ello, únicamente deberemos reemplazar en la cadena ‘https://www.dropbox.com/‘ por ‘https://dl.dropboxusercontent.com/‘.

Aplicado a un ejemplo:
La URL interna de Dropbox tendrá esta forma:
https://www.dropbox.com/s/9kqmv2jmy01lch4/Subir-Dropbox.PNG?dl=0
La nueva URL transformada para enlazar en una página web:
https://dl.dropboxusercontent.com/s/9kqmv2jmy01lch4/Subir-Dropbox.PNG

Esta nueva URL es un enlace nativo o directo que ya podemos utilizar como enlace a la imagen o archivo, en general, en nuestra página web convirtiendo a nuestra cuenta en Dropbox en un auténtico servidor de imágenes/archivos gratuito y permanente. En el caso de una imagen, con esta URL podrás abrirla en una pestaña aparte, incluirla en tu sitio web o compartirla.

Nota: Dropbox tiene una limitación de ancho de banda para los archivos en sus servidores. Las cuentas gratuitas no pueden exceder de 20GB/día o 100.000 descargas/día, y en las de pago los límites son de 200GB/día con descargas ilimitadas. Advierte que las cuentas que superen estos límites serán eliminadas.

  • Modificación del enlace para DESCARGA directa de archivos.

Para conseguir el enlace de descarga directa de un archivo almacenado en Dropbox bastará con modificar de forma sencilla la URL del enlace compartido que hemos copiado. El nuevo enlace modificado permite a los usuarios iniciar la descarga con sólo hacer clic en el enlace.

El proceso consiste en sustituir el último carácter del enlace de “0” a “1”.

Aplicado a nuestro ejemplo:
La URL interna de Dropbox:
https://www.dropbox.com/s/9kqmv2jmy01lch4/Subir-Dropbox.PNG?dl=0
La nueva URL transformada para descarga directa:
https://www.dropbox.com/s/9kqmv2jmy01lch4/Subir-Dropbox.PNG?dl=1

  • Herramientas online de conversión.

Podemos encontrar en la red algunas herramientas online de conversión que automatizan y facilitan el proceso de modificación de los enlaces compartidos de Dropbox para generar enlaces nativos de descarga directa.

Nota: El link nativo de descarga se puede utilizar de la mismo forma que el de compartir para insertar imágenes en una página web. El enlace para compartir únicamente mostrará la imagen en la página web o, si está enlazada a la URL de la imagen, mostrará la imagen en otra ventana de forma independiente. El enlace para descarga mostrará también la imagen en la página web, pero su URL no mostrará la imagen sino que la descargará directamente.

GOOGLE DRIVE COMO SERVIDOR DE ALOJAMIENTO DE ARCHIVOS

Google Drive es uno de los servicios de almacenamiento de archivos en la nube más populares desarrollado por Google (15GB de almacenamiento gratuito). Al crear un enlace compartido, se pueden compartir internamente los archivos que se almacenan en Google Drive. Pero, ¿cómo obtener un enlace directo/nativo, esto es, un enlace permanente, para los archivos de Google Drive?

Como la mayoría de los servicios en la nube para compartir archivos, Google Drive no proporciona enlaces nativos para los archivos que almacena. Pero como en Dropbox, insertar imágenes desde Google Drive en una página web es muy fácil modificando el enlace interno con unos sencillos pasos.

En este caso partiremos de una situación en la que ya estamos registrados, tenemos una cuenta y hemos subido a la nube de Google Drive los archivos que queremos enlazar.

1. COPIAR EL ENLACE PARA COMPARTIR ARCHIVOS DE GOOGLE DRIVE

Para obtener un enlace permanente se realiza un proceso similar al visto anteriormente con Dropbox a partir de un enlace compartido. Lo que sí es un requisito necesario es que los archivos tengan dentro de Google Drive una configuración de uso compartido, que debe establecerse correctamente para que el proceso funcione.

  • Abra la carpeta de Google Drive que contiene el archivo que desea compartir y luego seleccione el archivo.
  • Haga clic con el botón derecho en el archivo y haga clic en Compartir.
  • Se abrirá una nueva ventana, haga clic en Obtener enlace .
  • Establezca la configuración de uso compartido en Cualquier persona con el enlace.

  • Seleccione Copiar enlace y haga clic en Hecho.

Si el archivo estaba ya previamente configurado como compartido, en la parte superior aparecerá un icono de enlace después de seleccionar el archivo. Haga clic en el icono de enlace y luego, en la ventana emergente, en Copiar enlace.
El enlace del archivo para compartir se copiará en el portapapeles. Ahora pegue este enlace en el bloc de notas o navegador para modificarlo y convertirlo en un enlace nativo.

2. MODIFICAR EL ENLACE PARA COMPARTIR DE GOOGLE DRIVE

El enlace para compartir los archivos de Google Drive que se acaba de copiar se ve de esta forma:

https://drive.google.com/file/d/1JhPrKxIVO_NqrANmnjjxGWU7HZ-tJn30/view?usp=sharing
  • Modificación del enlace para COMPARTIR archivos de imagen (view).

Hay que retocar este enlace para obtener un enlace directo o nativo. El texto resaltado es código identificador del archivo. Pegue este ID al final de la siguiente URL:

https://drive.google.com/uc?export=view&id=

Después de esta modificación, para el ejemplo, el enlace debería quedar así:

https://drive.google.com/uc?export=view&id=1JhPrKxIVO_NqrANmnjjxGWU7HZ-tJn30

Este es el enlace directo/nativo para compartir y enlazar a archivos de imagen de Google Drive y es un enlace permanente. Así mismo, se puede utilizar como enlace a cualquier otro tipo de archivo (pdf, música, video…). El enlace directo/permanente omitirá el visor web de Google Drive. Puede probar el enlace que compartimos tomado como ejemplo para explicar el proceso.

  • Modificación del enlace para DESCARGAR toda clase de archivos (download).

Otra cosa que se puede hacer es establecer una dirección URL de descarga directa del archivo. El procedimiento es similar. En este caso se modifica el enlace de forma que se pega el ID del archivo al final de la siguiente URL:

https://drive.google.com/uc?export=download&id=

(Con el operador uc solicitamos el control de usuario del archivo y luego exportamos directamente ese archivo usando el comando de descarga.)

Después de la modificación el enlace quedará de esta forma:

https://drive.google.com/uc?export=download&id=1JhPrKxIVO_NqrANmnjjxGWU7HZ-tJn30

 En este caso, la prueba del enlace descarga el archivo.

Nota: Se hace la misma observación que para Dropbox respecto a los efectos del uso del link nativo para compartir y para descargar con archivos de imagen insertados en una página web. Compruébalo haciendo clic en la imagen.

Nota: Google Drive no proporciona un enlace nativo o permanente para archivos grandes. No es posible para archivos de más de 100 MB de tamaño, opción que sí permite OneDrive. Para descargar archivos grandes de Google Drive, debe ir al visor web para el archivo compartido. Luego, debe hacer clic en “Descargar de todos modos” para descargar el archivo.

Nota: Reiterar, como se ha dicho, que esto funcionará sólo si la carpeta y los archivos son públicos, algo que debemos establecer con la opción Compartir. Si se establece como “restringido”, solo las personas que inician sesión en Google y que se les haya otorgado acceso al archivo podrán abrir el enlace directo.

3. MEDIANTE LA HERRAMIENTA GOOGLE DRIVE DIRECT LINK GENERATOR

Una alternativa que nos evita tener que hacer la conversión de los enlaces manualmente es utilizar la herramienta oficial Google Drive Direct Link Generator online desarrollada por Google.

Esta herramienta le permite generar un enlace de descarga directa a los archivos que ha almacenado en Google Drive a partir de su correspondiente enlace compartido. Un enlace directo comenzará inmediatamente la descarga del archivo, en lugar de abrir una vista previa en Google Drive.

Existen algunas otras páginas no oficiales que ofrecen el mismo resultado y desde las que se pueden crear esos mismos enlaces de descarga directa para los archivos de Google Drive. También existe otro tipo de herramientas online que convierten los enlaces si las conectas a tu cuenta.

Nota: Estas herramientas no funcionan para documentos de Google (documentos, hojas de cálculo, presentaciones, etc.) que se crearon dentro de Google Drive. Si desea crear un enlace directo para estos documentos de Google, primero descárguelas a su ordenador y luego cargue ese archivo de nuevo en Google Drive.

HERRAMIENTAS DE CONVERSIÓN DE ENLACES ONLINE MULTIPLATAFORMA

Están disponibles, incluso, herramientas de conversión online de enlaces que facilitan enlaces nativos o permanentes, siempre de descarga directa, para varias de las plataformas de almacenamiento de archivos simultáneamente. Estos son sólo algunas de ellas:

Para generar enlaces de descarga directa, todo lo que necesita hacer es copiar las URL de uso compartido del almacenamiento en la nube para las que necesita enlaces de descarga y luego hacer clic en el botón “Generate“.

Referencias

Publicaciones relacionadas:

  1. Métodos para descargar archivos GRATIS desde Usenet
  2. SiteScan.php – Script para automatizar permisos en directorios (755) y archivos (644) de sitios web
  3. PhotoRec, herramienta de recuperación de archivos
  4. Análisis de los servicios de alojamiento web gratuito (Free web hosting)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *