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, Diseño web, WordPress4 Comentarios

Crear enlaces de descarga de archivos en una página web
5 (100%) 6 votos

Agregar un PDF descargable o cualquier tipo de archivo para descargar desde un enlace, permite ampliar información o aportar valor a un post sin necesidad de enlazar con páginas externas.

Por todas partes vemos enlaces de descarga a catálogos, eBooks, manuales…, como en el caso de mi web, que ofrezco descargar un curso de Photoshop al registrarse en mi lista de suscriptores.

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

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

Es un procedimiento sencillo para unos que puede convertirse en tortura para otros, bien por falta de conocimientos básicos de HTML o por que no se apañan del todo con la gestión de su web.

Así que, para que no tengas que preguntar a nadie, voy enseñarte cómo añadir un pdf descargable mediante un enlace de descarga, que se presente en tres formatos diferentes.

  • Enlace con previsualización del archivo en la misma ventana.
  • Enlace con previsualización del documento en una ventana nueva.
  • Un enlace con descarga directa del archivo.

Esta información será válida tanto para una web HTML, como para páginas web WordPress.

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

Cuando el archivo sea tuyo, tendrás que subirlo a alguna parte para que sea accesible desde cualquier dispositivo y lugar del mundo.

Mientras que si el documento a enlazar ya está en internet no tienes que preocuparte por nada. Más adelante veremos cómo enlazar el archivo para descargarlo mediante un link.

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 del tipo Dropbox.

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

Subir el archivo descargable al hosting por FTP

Este sistema vale para cualquier tipo de páginas web. 😉

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 de un enlace. Realmente no es preciso que esté dentro de ninguna carpeta, pero es lo ideal para que no se entremezcle con los ficheros pertenecientes a 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.

Imagen banner diseño web valencia

¿Hacemos juntos tu

Página web?

Te ofrezco un diseño web y un desarrollo de la página a la medida de tus necesidades.

Me interesa!

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

Si no te convence el acceso por FTP y usas WordPress, también puedes subir el archivo de descarga directamente a la biblioteca de medios de la misma forma en que se sube una imagen a WordPress.

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

En este caso quedará mezclado entre las imágenes y por eso me gusta subirlo por FTP.

Encontrarás la ruta para el enlace de descarga en los detalles del documento, clicando sobre la miniatura del archivo que acabas de subir.

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 para enlazarlos desde un post 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, tenemos todo preparado para añadir el link de descarga del archivo.

Cómo almacenar un catálogo para que lo descarguen desde mi web Cuéntalo en las redes

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

Me centro en WordPress porque hay muchas probabilidades de que este sea tu CMS, pero el tutorial te dará pistas igualmente 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 personalmente prefiero no instalar complementos innecesarios.

Una vez subido el archivo, que en este caso es un PDF, hay que crear el enlace para la posterior descarga del documento.

Es posible crear enlaces para descargar archivos de 3 formas distintas:

  • Crear un enlace al archivo multimedia.
  • Generar un enlace desde el editor visual.
  • 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 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 del enlace (anchor text) que corresponderá al “atributo title” del documento.

➡ En el ejemplo el anchor text quedará así: pdf-descargable

Tendremos creado el enlace, y clicando sobre el texto que hará de enlace accederemos 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 puedes añadir el enlace de descarga desde el editor de código HTML de WordPress escribiendo su código directamente.

➡ Utiliza el siguiente 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

De no ser que tu web disponga de un panel de control que permita subir archivos al hosting, deberás seguir las instrucciones para subir el pdf descargable por FTP vistas anteriormente.

Para escribir el código del enlace de descarga deberás acceder al documento HTML que corresponda e insertarlo manualmente como en el último de los casos propuestos.

Opciones de los enlaces de descarga de archivos

Una vez enlazado el archivo podemos decidir el comportamiento del enlace al clicar sobre el link.

Las opciones son:

  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 código HTML del enlace, pero es algo muy sencillo que te explico a continuación.

Entra en el editor HTML de WordPress y busca el enlace dentro del código para poder manipularlo.

Visualizar el archivo descargable en la misma ventana

Que 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>
Tres formas de presentar los enlaces de descarga en una página web Cuéntalo en las redes

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 de páginas web en Valencia sabemos que tanto el diseño de la web 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 texto.

<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, destacándolos de alguna 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 que enlace con tu PDF descargable no sea como los demás, y que cuando crees otros tengan el mismo estilo, puedes personalizarlos asignándoles una clase CSS.

Podrás darle por ejemplo el aspecto de un botón 😀

Para personalizar los enlaces de descarga u otros elementos de WordPress con seguridad, lo primero que te recomiendo es la instalación de un tema hijo. Aunque si tu plantilla permite la personalización del código, también puedes hacerlo desde ese apartado.

Para ir más allá en el personalizado web, te dejo el enlace a un curso CSS gratuito, y de paso, si quieres crear mayor impacto te propongo que hagas el PDF interactivo.

Van a alucinar con tu catálogo 😀

Gracias por leer hasta aquí, y si te ha gustado el artículo no olvides compartirlo en las redes sociales.

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Quieres un Diseño Web Valencia?

« Siguiente
Anterior »

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

Deja un comentario

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) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

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 (proveedor de hosting de EBWEB) 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.