Proposez à vos visiteurs un lien pour télécharger un fichier

Comment créer un lien de téléchargement de fichier
Partagez si vous aimez ->

Aujourd’hui, je réponds à une question qui m’a été posée par une lectrice. Elle souhaitait proposer à ses visiteurs un planning Excel à télécharger librement, et voulais donc savoir comment créer un lien de téléchargement de fichier à partir de son site web.

C’est peut-être aussi votre cas.

Comment créer un lien pour télécharger un fichier librement : PDF, Excel, dossier zippé…etc ?

Cette manipulation est très simple à réaliser et ne vous demandera que deux étapes. Suivez-le guide !

Je vais vous montrer comment proposer à vos visiteurs de télécharger librement un fichier sur votre site Internet grâce à un lien. Cette manipulation est très rapide. Elle ne vous demandera que deux étapes.

  • Dans un premier temps, nous allons envoyer le fichier sur le serveur pour qu’il soit disponible pour vos visiteurs.
  • Dans un deuxième temps, nous allons créer le lien qui permettra aux visiteurs d’accéder à ce fichier.

1ère partie : Envoyer le ficher à télécharger sur le serveur

Utilisez FileZilla pour transférer le fichier

Alors pour la première partie de ce tutoriel, nous avons besoin d’un logiciel FTP. Vous pouvez utiliser celui que vous utilisez habituellement. Moi j’utilise FileZilla.

Alors, connectez-vous à votre site Internet et allez dans le répertoire racine de votre site. Sur les serveurs OVH, il s’agit du dossier « www ». On fait un double-clic dessus pour entrer à l’intérieur.

Et dans ce dossier, je vais créer un nouveau dossier « documents » dans lequel je vais mettre tous les fichiers que je vais proposer en téléchargement sur mon site Internet. Donc je fais un clic droit, « Créer un dossier » et je vais l’appeler « documents ».

Ecran FileZilla téléchargement fichier Excel

Voilà, j’ouvre ce dossier en faisant un double-clic et donc dans ce dossier, je vais envoyer le fichier que j’ai envie de proposer en téléchargement. La plupart du temps il s’agir d’un fichier Excel, d’un guide PDF ou d’un dossier complet comportant plusieurs types de fichiers compressés au format ZIP.

Dans mon exemple, je vais mettre en ligne un simple fichier Excel nommé « Acronymes-Informatiques.xls ». C’est une liste des acronymes les plus utilisés dans l’univers du Web (au passage il peut vous être utile !)

Je fais un clic droit sur ce fichier et je clique sur « Envoyer ». Voilà, le fichier est à présent sur le serveur, dans le dossier qui s’appelle « document ».

Comment vérifier que le fichier est disponible sur le serveur ?

Pour le vérifier, je vais tout de suite aller sur mon serveur. Donc d’abord, je vais copier-coller le nom de ce fichier parce qu’il est un peu petit peu long, je n’ai pas envie de le recopier à la main. Donc je fais F2 pour avoir accès donc au nom du fichier, et Ctrl + C pour le copier dans mon presse-papiers.

Je vais sur mon site Internet, voilà. Et donc, je vais tout de suite tester le chemin, vérifier que le document existe bien sur mon serveur. Donc après le nom de domaine on tape un /documents/ puisque j’ai mis le dossier « documents » à la racine du site. Encore un « / » et je tape, et je copie-colle le nom de mon fichier.

Donc voilà. Ça, c’est le chemin théorique que je suppose est correct pour accéder à mon fichier : « http://www.dessinemoiunsite.com/documents/Acronymes-Informatiques.xls »

Je vais tout de suite le copier-coller pour pouvoir l’utiliser ultérieurement et je fais « Entrée » pour le tester.

La fenêtre de téléchargement s’est bien ouverte, ce qui veut bien dire donc que le fichier que j’ai tapé dans la barre d’adresse est correct et va bien mener, va bien inciter les navigateurs à ouvrir une boîte de dialogue de téléchargement telle que celle que vous avez devant vous à présent. Le but ici, ce n’est pas de télécharger le document, mais bien de tester le lien.

Préparation du lien de téléchargement

Alors déjà, le lien, à quoi il ressemble? Je vais vous le montrer tout de suite. Voilà. Un lien, ça ressemble à ça : Téléchargez le fichier

C’est une balise <a> qui contient un attribut « href » ; à l’intérieur, elle contient un texte qui est en fait le texte qui apparaît en bleu, souligné de façon standard sur le navigateur.

Donc ici, je vais avoir donc sur mon site Internet les mots « Téléchargez le fichier » qui vont être bleu souligné. Et quand je vais cliquer dessus, le visiteur sera emmené sur la page qui est indiquée dans l’attribut href. C’est pour ça que dans l’attribut href, je vais copier-coller tout le chemin que j’avais copié dans ma barre d’adresse : « http://www.dessinemoiunsite.com/documents/Acronymes-Informatiques.xls »

Adaptez le chemin en fonction de votre chemin à vous. Donc ici, vous allez avoir l’URL de votre site, toujours le dossier « documents » si vous avez choisi de mettre votre fichier en téléchargement dans un dossier « documents » et ensuite, le nom de votre fichier à vous que vous proposez en téléchargement sur votre site Internet.

Donc voilà. Vous avez juste besoin d’adapter cette partie-là. Tout le reste, ça va être strictement identique et vous pouvez le copier-coller sans avoir besoin de vous soucier de comprendre exactement ce que fait cette balise HTML.

2ème partie : diffuser le lien de téléchargement

Voilà, donc deuxième partie du tutoriel : nous allons maintenant intégrer ce lien dans notre site. Où est-ce qu’on peut intégrer ce type de lien ?

  • On peut l’intégrer par exemple dans un widget texte.
  • Vous pouvez l’intégrer également dans le corps d’un article.
  • Vous pouvez l’intégrer dans votre « footer » ou dans votre « header » ou en français dans votre « pied de page » ou dans votre « entête ».
  • Vous pouvez également le mettre dans le corps d’un e-mail si vous utilisez par exemple un outil d’emailing pour communiquer avec vos abonnés.
  • Vous pouvez l’utiliser sur votre page Facebook
  • Vous pouvez utiliser dans un tweet.
  • Bref, il n’y a pas de limitations; vous pouvez l’utiliser à peu près n’importe où.

1/ Intégrer le lien sur votre site internet

À présent, je vais vous montrer comment intégrer ce lien sur votre blog WordPress ou votre site Internet WordPress. Donc j’aimerais qu’il apparaisse sur la colonne de droite, tout en haut. Voilà. Alors pour cela, je vais copier tout ce code dans le presse-papiers en faisant Ctrl C :

Téléchargez le fichier

Je vais aller dans le back-office de mon site Internet. Donc ici je suis bien dans le menu « Apparence ». Voilà, le menu « Apparence », le sous-menu « Widgets » et donc, j’ai ma sidebar qui contient tous les widgets. Donc je vais l’ouvrir. Voilà. Je vais placer un petit widget texte ici en haut de la sidebar pour y coller mon lien. Voilà. Donc j’ai placé le widget texte; il va falloir l’enregistrer, voilà. Et je colle à l’intérieur le code et je le réenregistre.

Le widget est enregistré. Nous allons aller voir en front ce que ça donne en faisant F5 pour recharger la page. Et voilà : la page se recharge. Nous avons bien affiché le fichier, le lien apparaît en haut de ma sidebar et si je clique dessus, la boîte de dialogue de téléchargement va s’ouvrir. Ce qui est bien le cas. Nous voyons bien ici Acronymes-Informatiques.xls. Il s’agit bien du document que nous avons mis sur le serveur et que nous avons relié grâce à ce lien.

Donc tout fonctionne bien.

Résumé : Comment Proposer à vos visiteurs un lien pour télécharger un fichier

1ère étape: Envoyez le fichier à télécharger sur le serveur.

Pour cette étape, vous aurez besoin d’un logiciel FTP. Si vous n’en avez pas, téléchargez et installez gratuitement Filezilla. Les identifiants de connexion FTP vous ont été fournis lors de la réservation de votre hébergement. Jetez un œil à vos mails.
  1. Créez un dossier « documents » à la racine de votre site
  2. Envoyez votre fichier dans ce dossier
  3. Tester l’URL du fichier dans votre navigateur

2ème étape: Intégrez le lien dans votre site web

Dans cet exemple, nous allons placer le lien pour télécharger le fichier en haut de la sidebar (colonne de droite).

  1. Copiez le code du lien (après avoir adapté l’url de l’attribut « href »). Pour afficher une bulle au passage de la souris, rajouter un attribut title comme dans cet exemple:
  2. Placez un widget texte tout en haut de la sidebar
  3. Collez le code et enregistrez le widget
  4. F5 pour recharger la page d’accueil de votre site

Où utiliser ce lien ?

  • Widget texte
  • Corps d’un article
  • Footer (pied-de-page)
  • Header (en-tête)
  • Corps d’un email
  • Page ou mur Facebook
  • Tweet
  • Bref, partout !

J’espère que ce tuto vous aura été utile, partagez vos réactions dans les commentaires!

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

3 réponses

  1. Imene dit :

    Merci Youcef pour cet article hyper éclairant! cela me rassure… En effet, j’ai fais toutes les étapes avec le ftp etc… Cependant, quand je suis allé sur mon wordpress pour trouver mon pdf dans « média »… sans succès! introuvable!
    mais en tapant l’adresse du pdf uploadé , j’arrive à l’ouvrir dans mon navigateur!
    Mais n’y a-t-il pas un autre moyen de VOIR ses documents uploader via filezilla, sur son site wordpress…. sans devoir taper l’url?
    Oui je sais je cherche la facilité^^

  2. galhaut dit :

    Bonjour
    merci pour cet article qui est très clair, j’ai voulu essayer et bien suivi toutes les étapes et pourtant ça ne marche, pas lorsque je test mon url le site m’affiche aucun résultat. J’ai un thème avec un builder (divi ) est ce que ça limite les possibilités de modification du site?

  3. tamo dit :

    Cet article m’a été d’un grand intérêt

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons