Crear enlaces de descarga de archivos en una página web

Aprende a incluir un PDF descargable u otro archivo de descarga con un enlace desde tu web

Ernesto BarrachinaDesarrollo web, WordPress23 Comentarios

Agregar un PDF descargable o cualquier tipo de archivo para descargar desde un enlace, nos permite ampliar información y/o aportar valor al contenido sin tener que enlazar con otros websites.

Es por eso que en muchas webs veremos enlaces de descarga directa a catálogos, eBooks, manuales, PDFs, currículos… Como en el caso de mi web, en la que ofrezco descargar un curso de Photoshop solo por registrarte en mi lista de suscriptores.

Unos enlaces de descarga serán enlaces con «visualización previa» del archivo y otros serán enlaces de «descarga directa».

Pero ¿sabemos cómo se implementa un enlace de este tipo?

La verdad es que el procedimiento es muy sencillo, y aunque aquellos que no estén familiarizados con HTML pueden asustarse al principio, es una técnica para todos los públicos.




Así que, para que no tengas que preguntar a nadie, voy enseñarte cómo añadir un pdf o cualquier otro tipo de archivo descargable mediante un enlace de descarga, que podrás generar tú mismo/a, y que sabrás presentar en una de las tres variantes más utilizadas.

  1. El enlace para descargar con previsualización del fichero en la «misma ventana».
  2. El enlace de descarga con previsualización del documento en una «ventana nueva».
  3. Un enlace con «descarga directa» del archivo.

Podrás implementar este tipo de enlaces interactivos en páginas HTML, páginas web WordPress, PrestaShop, o en cualquiera en la que tengas acceso a manipular el código.

Dónde y cómo almacenar el archivo de descarga

Está claro que lo primero es disponer de un archivo al que apuntar el enlace para poder descargarlo a posteriori. Por tanto, cuando el archivo sea tuyo tendrás que subirlo a «algún sitio» que sea accesible desde cualquier dispositivo y lugar del mundo.

Sin embargo, si el documento a enlazar ya está en internet no tienes que preocuparte por nada. Más adelante veremos cómo enlazar el archivo externo para descargarlo mediante un link desde tu web.

Para enlazar el archivo de descarga lo primero que necesitamos es subirlo al hosting o tenerlo localizado en alguna plataforma de almacenamiento.
  • Puedes optar por subirlo al hosting por FTP.
  • Subirlo a la biblioteca de medios de WordPress.
  • Subirlo a otra plataforma tipo Dropbox.

Cualquier método que elijas permitirá crear un enlace de descarga más tarde.

Subir el archivo descargable al hosting por FTP

Este sistema es universal y vale para cualquier página web 😉

Lo único es que para acceder al hosting tienes que descargar WinSCP en tu ordenador.

El proceso consiste en crear una carpeta en el hosting e introducir en ella el archivo al que darás acceso a través del enlace. Realmente no es preciso que esté dentro de ninguna carpeta, pero es mejor para que no se entremezcle con los ficheros que conformen la página web.

  1. Accede al hosting por FTP.
  2. Crea una nueva carpeta en la raíz de tu sitio web llamada «descargas-pdf».
  3. Abre la carpeta recién creada (clicando sobre ella).
  4. Desde la parte local, navega por tu ordenador hasta encontrar la carpeta donde almacenas el archivo para descargar.
  5. Añade dentro de la carpeta «descargas-pdf» tu archivo descargable, arrastrándolo desde el lado local hasta el lado hosting.
Para subir el archivo PDF de descarga al hosting utiliza un programa FTP

La ruta para acceder al archivo de descarga será parecida a esta:

http://tudominio.es/descargas-pdf/pdf-descargable.pdf

Subir un archivo para descargar posteriormente a la biblioteca de medios de WordPress

Si no te convence el acceso por FTP y usas WordPress, es muy cómodo subirlo a la biblioteca de medios como si se tratase de una fotografía.

El archivo para descargar desde el enlace puedes subirlo a la biblioteca de medios de WordPress

Clicando sobre la miniatura del archivo recién subido accederás a los detalles del documento, y a la url que incluiremos en el link de descarga.

La ruta para el enlace de descarga la encontrarás en los detalles del archivo adjunto

Subir un archivo a Dropbox y crear un enlace para compartir

Otro lugar donde ubicar los archivos descargables son las plataformas de almacenamiento como Google Drive o Dropbox.

La ventaja de Dropbox es que se puede descargar el archivo directamente, sin necesidad de registrarse o tener una cuenta.
  1. Sube el archivo a Dropbox.
  2. Clica el checkbox para que se muestre el botón de compartir.
  3.  Crea un enlace para acceder al archivo.
Dropbox crea enlaces de descarga para enlazar archivos desde tu web

El enlace será asignado por Dropbox automáticamente, y tú solo tendrás que guardarlo para añadirlo al link de descarga más tarde.

Sea cual sea el método elegido, ya tienes el fichero para enlazarlo con el enlace de descarga.

Cómo crear un enlace de descarga de archivos en WordPress

Voy a centrarme en WordPress porque existen muchas probabilidades de que este sea tu CMS. No obstante, el tutorial te dará pistas para añadir enlaces de descarga en cualquier gestor de contenidos.



Está claro que todo esto puede hacerse a través de plugins, que además ofrecen otras posibilidades como el conteo de descargas, pero soy partidario de no instalar complementos innecesarios.

Como ya hemos subido el fichero (en este caso un PDF), solo nos falta crear el enlace para la posterior descarga del documento, cosa que es posible hacer de 3 formas diferentes:

  1. Crear un enlace al archivo multimedia.
  2. Generar un enlace desde el editor visual.
  3. Crear el enlace en el editor de HTML.

Crear un enlace de descarga desde la biblioteca multimedia

Puedes crear el enlace en una página o un post insertando el archivo «igual que cuando añades una foto», desde Añadir objeto, y enlazándolo a Archivo multimedia.

PDF enlazado a archivo multimedia para su descarga

En este caso, al no ser una imagen lo que se mostrará es el texto que hace de enlace o anchor text, y que corresponde al nombre del fichero.

➡ En el ejemplo el anchor text «visualmente» quedará así: pdf-descargable.pdf

Con esto habrás creado el enlace, y clicando sobre él accederás directamente al archivo.

Crear un link de descarga desde el editor visual

También se puede añadir el enlace al PDF descargable como lo haces con cualquier otro enlace, desde las herramientas del editor visual.

Escribe el anchor text y selecciónalo para convertirlo en enlace desde el botón del editor.

Enlace al archivo PDF descargable desde editor visual de WordPress

Añade la url y listo. Tienes tu enlace de descarga 😎

Crear un enlace al archivo descargable desde el editor HTML

Si lo prefieres, también puedes añadir el enlace de descarga desde el editor de código HTML de WordPress escribiendo su código directamente.

➡ Utiliza el siguiente HTML como referencia:

<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf">Descargar archivo desde aquí</a>

El código y el resultado de todo esto será el mismo para cualquiera de los tres sistemas, aunque si has subido el archivo a la biblioteca de medios, la url te la proporcionará WordPress y quedará algo así:

http://tudominio.es/wp-content/uploads/2017/04/pdf-descargable.pdf

➡ Quedando el código  para tu enlace:

<a href="http://tudominio.es/tu-plantilla/wp-content/uploads/2017/04/pdf-descargable.pdf">Descargar archivo desde aquí</a>

Añadir pdf descargable en una web HTML

Para crear enlaces de descarga de archivos en webs «normales» sigue las mismas instrucciones que para subir el archivo descargable al hosting por FTP, y luego escribe el código del enlace de descarga «manualmente» en el documento HTML correspondiente como en el último de los ejemplos.

Comportamiento de los enlaces de descarga de archivos

Una vez enlazado el archivo podemos decidir qué ocurrirá cuando cliquemos sobre el link.

  1. Abrir el archivo en la «misma ventana» del navegador.
  2. Abrir el archivo en una «nueva ventana».
  3. Descargar el archivo directamente.
Comportamiento archivo PDF descargable

Para abrir el documento enlazado en una ventana diferente o para su descarga directa es necesario manipular el HTML del enlace como te explico a continuación.

Entra en el editor HTML de WordPress y busca el enlace para poder modificarlo.

Visualizar el archivo descargable en la misma ventana

Es la forma habitual de mostrar cualquier enlace, ya sea para la descarga de archivos o no.

El link abrirá el archivo en la misma ventana del navegador en la que estemos, y una vez abierto podremos descargarlo.

En este caso no hemos tenido que añadir nada al código del enlace.

<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf">Descargar archivo desde aquí</a>

Visualizar el documento descargable en una nueva ventana

➡ Aquí la cosa cambia.

El archivo pdf se abrirá en una ventana nueva, permitiendo tener a la vista de forma simultánea nuestra página web y el PDF, que podremos descargar desde su vista.

La diferencia con el código anterior es que hay que añadir el atributo target="_blank" al enlace.

<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf" target="_blank">Descargar archivo desde aquí</a>

Descarga directa del documento

En este caso el archivo se descargará directamente a nuestra carpeta de descargas.

Observa que se ha añadido el atributo download al enlace.

<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf" download>Descargar archivo desde aquí</a>

A mí este sistema no me gusta nada. De hecho me da bastante rabia que se descarguen archivos sin preguntar, y suelo borrarlos directamente.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

Personalizar los enlaces de descarga

Los que nos dedicamos al diseño web en Valencia sabemos que tanto el diseño en general, como el estilo de cada elemento afecta a las conversiones. Por tanto, hay que mostrar los enlaces de descarga bien visibles para que no pasen desapercibidos.



Si solo tienes uno, por ejemplo el catálogo de tus ofertas para este año, puedes presentarlo en forma de banner para que destaque entre el resto del contenido.

<a href="url del enlace"><img src="tu-imagen.jpg" title="título de la imagen" alt="texto alternativo"  width="800" height="156"/></a>

Enlace con banner para descargar pdf de catálogo

En cambio si la página dispone de varios enlaces de descarga, te recomiendo presentarlos en forma de lista, que además puedes presentar de manera especial.

<ul>
  <li><a href="url del enlace">Anchor text</a></li>
  <li><a href="url del enlace">Anchor text</a></li>
  <li><a href="url del enlace">Anchor text</a></li>
</ul>
  •  Actividades extra escolares curso 2018
  •  Excursiones 2018
  •  Reuniones de padres 2018
Si quieres que el aspecto del link descargable no sea como los demás puedes personalizarlos asignándoles una clase CSS.

También podrás darle por ejemplo el aspecto de un botón o presentarlo dentro de unas cajas de colores diseñadas con HTML y CSS 😀

Van a alucinar con tus enlaces de descarga 🙂

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

Me dedico al diseño web Valencia, y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

¿Necesitas un Diseño Web Valencia?

23 Comentarios en “Crear enlaces de descarga de archivos en una página web”

  1. Genial Ernesto,
    Un montón de maneras de que la gente pueda descargar un documento en tu web sin tener que crear un producto como estaba haciendo yo (con Woocommerce o EDD).
    También lo hacía poniendo enlace al fichero de mi Drive, no sé cómo no se me ocurrió antes!!!
    Gracias, y por supuesto me acabo de suscribir al boletín.
    Margot

  2. Hola! Muchas gracias por el post! Necesitaba subir ejercicios a mi sitio web educativo y hace mucho que estaba intentando distintas formas que no me funcionaban. Ahora agregué los PDF a la biblioteca de medios de WordPress y listo! Es super fácil. Muchas gracias por compartir la información.

    1. Muchas gracias a ti, Sofia!!!

      Sí, la biblioteca de WordPress es genial para no tener que crear nuevas carpetas para almacenar ficheros. Lo que pasa es que a mí no termina de convencerme, porque cuando tienes muchos PDF son difíciles de identificar.

      Aún así, es una muy buena opción 😉

  3. Muchas gracias, andaba buscando para crear mi aula virtual con vínculos para descargar, tenia noción pero me faltaba una información y solo aquí la encontré, muchas gracias!!!!! 🙂

  4. Muchas gracias, un tutorial muy claro para los que estamos empezando.
    Como sería para poner una contraseña antes de que se inicie la descarga?

    Saludos.

  5. Buenas tardes, me llamo Mercedes. Estoy intentando vender unos recursos educativos en formato pdf desde mi blog. Ya tengo asociada mi cuenta paypal, y subido el archivo en Drive. La cuestión es la siguiente, cuando me hagan una compra me gustaría hacer un link directo a la pagina de descarga dando las gracias y con el enlace de descarga pero y lo mas importante es que quiero que no pasen ese link a terceros y en Drive no se como hacerlo para no dejar ese enlace abierto al publico.
    Solo se me ocurre hacerlo manualmente enviando un mail a la persona que me compre el documento tras depositar el dinero en Paypal, aun asi, el documento lo tendría alojado en drive y seria visible y lo podrían copiar… ando muy perdida.

    Decir que mi blog se hospeda en blogger y no tengo intención que cambiarlo.

    ¿Hay alguna solución para este problema?

    Espero haberme expresado bien.

    Muchas gracias, un saludo.

  6. Hola! muchas gracias por el aporte. Pero no logré hacer la descarga directa. Tengo mi archivo subido a Google Drive . Mi línea de código es ésta : Ayuda Estoy usando React. Logro abrirlo en otra ventana, pero no me descarga direcamente aunque ponga la etiqueta dowload. Podrías ayudarme? gracias!

    1. Hola Flor,

      Para descargar un archivo desde Drive, tendrás que crear un enlace de descarga desde él.

      No obstante, este post presupone que el archivo a descargar «directamente» está en tu hosting.

    2. Yo también andaba buscando eso!!!! … en tu drive dirígete al archivo y haz clic derecho sobre él,
      selecciona el que dice «obtener vínculo para compartir»,
      te dirige a una ventanita y hay un botón que dice «copiar vínculo» (ese dato es el que vas a pegar en donde desees hacer el enlace),
      en la misma ventanita selecciona «cualquier persona que tenga el vínculo»,
      y LISTO

  7. Buenas tardes, Ernesto:
    Muy bueno su tutorial, especialmente por su claridad. Quisiera saber si una página creada en webs[.]com permitiría colocar un archivo descargable o, en caso negativo si existe otro hosting gratuito que lo permita. Gracias anticipadas,

    Ariel

    1. Buenos días Ariel,

      gracias por la visita 😉

      No importa en qué plataforma diseñes tu web. El archivo descargable no tiene porqué estar en el propio hosting. Puedes almacenarlo, por ejemplo, en Dropbox.

Deja una respuesta

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺