Que l’on veuille partager une présentation ou la brochure d’un produit, le PDF est souvent une bonne solution, c’est esthétique et portable. Mais quand on possède un blog, un site internet ça peut être un peu plus compliqué.

Vous pouvez bien évidemment simplement mettre un lien de ce PDF dans votre article ou autre comme ceci mais cela implique que votre lecteur clique sur le lien, qu’un nouvel onglet s’ouvre voire pire, que votre lecteur quitte votre page pour ouvrir ce PDF si vous n’avez pas fait en sorte que le lien s’ouvre dans une nouvelle fenêtre ou dans un nouvel onglet. C’est pourquoi l’intégration « directement » dans la page est préférable pour une meilleure clarté et pour un tas d’autres choses.

Pour ce tutoriel, deux méthodes s’offrent à vous, l’une avec un angle de possibilités plus large puisque je vais en même temps vous apprendre un petite notion d’HTML et l’autre qui va être un petit peu plus spécifique à ce que nous voulons faire, mais vous pourrez constater que les deux techniques représentent au final la même chose ! 😉

La première méthode, +explications du code (nécessite un serveur):

Comme je l’ai dit plus haut, on va voir une petite notion du langage HTML bien connue, la balise iframe. Cette balise permet d’ouvrir une autre page internet dans la page où vous vous trouvez, sans vous en rendre compte vous l’avez déjà rencontrée des dizaines de fois, en lisant ma rubrique, la Playlist du Geek par exemple ou en regardant une vidéo sur YouTube. En effet dans le cas d’une vidéo postée sur un site internet, la balise iFrame va chercher la vidéo sur la page où elle est pour la mettre dans l’encadré que vous connaissez si bien, là où va s’afficher la vidéo.

Mais pour en revenir à nos moutons, l’intégration d’un PDF dans une page, c’est exactement pareil que pour les vidéos.

  • Il va falloir que vous stockiez votre fichier PDF sur un serveur, que vous notiez son adresse et que dans la page où vous voudrez voir apparaître le PDF, que vous écriviez dans le code HTML, ce bout de code :
     <iframe src="http://Adresse_de_votre_fichier" width="640" height="480"></iframe>

(Surtout faites attention à bien garder les guillemets, sinon cela ne fonctionnera pas)

Explications :

<iframe lance la balise / Ce qu’il y a après src et entre les guillemets, c’est le lien de votre fichier PDF / width correspond à la largeur en pixel (sur l’axe horizontal) de votre intégration de PDF / height correspond à la hauteur en pixel (sur l’axe vertical) de votre intégration de PDF / Et pour finir, on referme la balise avec </iframe>

Nota Bene : Si vous souhaitez intégrer une vidéo, le code est le même il suffit de changer le lien entres guillemets, mais attention, vous ne pouvez pas mettre le lien d’une vidéo seule (.mov, .avi…), cela risque de ne pas fonctionner et tous les navigateurs ne pourront pas lire tous les formats et la fluidité risque de ne pas être au rendez-vous, alors envoyez votre vidéo sur un service tel que YouTube ou Dailymotion et prenez le lien de cette vidéo.

——————————————————————————————————————–

Deuxième méthode, avec Google Drive :

Cette méthode est pour vous si vous n’avez pas de serveur et par conséquent que vous ne pouvez pas stocker votre PDF. Nous allons donc avoir recourt au Cloud de Google. Vous aurez besoin d’un compte Google, et de vous connecter (avec vos identifiants Google) à Google Drive.

    • Stockez votre fichier PDF en cliquant sur le bouton d’envoi à gauche.

upload

  • Une fois envoyé, faites un clique droit dessus, passez la souris sur Partager… puis cliquez sur Partager…

    partager
  • Modifier les droits d’accès au fichier en cliquant sur Modifier…

    qui a acces
  • Cochez Public, Enregistrer puis faites OK.

    public
  • Ensuite, cliquez sur votre PDF, une nouvelle fenêtre s’ouvre.
  • En haut à gauche, cliquez sur Fichier puis Intégrer ce fichier PDF…

    integrer
  • Une petite fenêtre s’ouvre, copiez le code affiché. Si vous avez bien suivi, voilà le lien entre les deux méthodes, nous voilà de nouveau avec cette balise iFrame (explications sur le code plus haut).
  • Vous n’avez plus qu’à coller le code dans votre article ou dans votre page web.

Et voilà le résultat !