Comment Insérer un Document PDF dans WordPress avec Google Doc Embedder

L’ajout d’un document PDF dans un site web se fait généralement en transférant le fichier en lui-même à la racine ou dans un sous-dossier. L’accès à ce fichier se fait ensuite via le lien http://monsite.com/fichier-pdf.pdf qui affiche la page sous format PDF.

Rien de plus classique, mais pas forcément très joli. Il existe une manière plus élégante d’afficher un document PDF sur votre site en utilisant Google Docs Viewer.

Google Doc Embedder

Google Doc Embedder est un plugin WordPress qui permet d’intégrer plusieurs types de fichiers dans vos pages WordPress en utilisant le logiciel gratuit Google Docs Viewer – permettant la visualisation du fichier directement en ligne (et le téléchargement en option) d’un grand nombre de types de fichiers sans requérir des plugins flash ou un navigateur PDF.

Google Doc Embedder est similaire à des services comme Scribd, il permet d’intégrer ces fichiers directement dans votre page ou article, sans avoir à utiliser Microsoft Word, Adobe Reader, PowerPoint, ou autre logiciel installé pour afficher le contenu du fichier. Contrairement à Scribd, les fichiers n’ont pas besoin d’être téléchargés au préalable sur un quelconque service – y compris Google Docs – mais peuvent être affichés partout et accessibles au public sur votre site.

Les formats de fichier supportés sont :

• Adobe Acrobat (PDF)
• Microsoft Word (DOC/DOCX*)
• Microsoft PowerPoint (PPT/PPTX*)
• Microsoft Excel (XLS/XLSX*)
• TIFF Images (TIF, TIFF)
• Apple Pages (PAGES)
• Adobe Illustrator (AI)
• Adobe Photoshop (PSD)
• Autodesk AutoCad (DXF)
• Scalable Vector Graphics (SVG)
• PostScript (EPS/PS)
• OpenType/TrueType Fonts (OTF, TTF)
• XML Paper Specification (XPS)
• Archive Files (ZIP/RAR)

Le format PDF étant les fichiers les plus utilisés pour afficher son contenu, on se limitera uniquement à l’intégration de ce type de fichier. Voyons donc comment cela se passe.

Configuration de Google Doc Embedder

Après l’installation et l’activation du plugin, rendez-vous sur la page de configuration depuis le menu Réglages > GDE Réglages. Cette est composée de trois onglets. A priori tous les réglages sont bons, on peut passer cette étape de paramétrage. Mais voyons ensemble les options proposées.

Dans cet onglet, il est possible de définir la taille (en pixel ou en pourcentage) du document intégré, d’indiquer l’URL de base des fichiers qui seront intégrés par ce plugin (il faut donc veiller à ce que ces fichiers soient toujours ajoutés dans ce dossier), d’afficher un lien de téléchargement à la catégorie d’utilisateurs sélectionnée, de personnaliser le texte de ce lien et de préciser sa position.

Il s’agit ici de l’onglet de gestion des profils via lequel on peut créer, modifier ou supprimer des profils. Un profil permet de créer une configuration unique spécifique à ce profil et d’y accéder depuis le visualiseur en utilisant l’ID (ou nom) du profil. Cela permet d’éviter d’insérer un raccourci avec une tonne d’attributs. Ainsi, chaque instance de GDE peut être totalement personnalisée en utilisant un simple raccourci.

Dans cet onglet, il est possible de gérer le comportement (autorisations et restrictions) du plugin en terme d’intégration des fichiers, de la taille maximale du fichier, de gestion des erreurs.

De plus, il est possible d’activer le suivi d’événements des utilisateurs sur les fichiers intégrés en intégrant l’outil de statistiques Google Analytics.

Enfin, vous pouvez sauvegarder ou importer vos configurations du plugin.

Comment intégrer un document PDF dans WordPress avec Google Doc Embedder

Une fois le plugin bien paramétré, l’intégration d’un fichier PDF (ou autre) dans une page ou un article est assez simple.

Il existe plusieurs manières d’intégrer un fichier :

1. Saisir le raccourci manuellement

Pour un insérer un fichier PDF, vous pouvez entrer le raccourci suivant dans votre éditeur :

[gview file="http://votresite.com/fichier.pdf"]

L’attribut file= (qui pointe vers l’URL de votre fichier) est requis. Si vous avez défini une « URL de base du fichier » dans la page des réglages généraux, alors vous pouvez saisir uniquement la portion du lien qui change dans cet attribut file=. Si par contre il s’agit d’un fichier qui se trouve dans un autre fichier, il faut saisir toute L’URL du fichier.

D’autres attributs peuvent être utilisés dans ce raccourci, tels que :

• profile= : pour entrer l’ID ou le nom d’un des profils existants dans la page des profils pour utiliser la configuration que vous voulez utiliser pour le document. Si rien n’est spécifié, le profile par défaut est utilisé.
• width= : pour surcharger la largeur du document défini dans la configuration du profile utilisé. La valeur est définie en px ou en %.
• height= : pour surcharger la hauteur.
• save= : pour afficher ou non le lien de téléchargement du fichier. Entrer la valeur 1 pour afficher, 0 pour cacher.

Pour voir davantage de détails sur l’usage du raccourci je vous renvoie vers cette page de documentation.

2. Via l’ajout de média

La seconde méthode consiste à utiliser le bouton « Ajouter un média » au-dessus de l’éditeur pour insérer un fichier depuis votre bibliothèque de médias ou votre ordinateur et de s’assurer que le champs « Lier à » dans « Réglages de l’affichage du fichier attaché » est réglé sur « Fichier média » comme dans l’image ci-dessous.

Cliquez ensuite sur le bouton « Ajouter à l’article » et un raccourci viendra s’ajouter à votre éditeur comme ci-dessous.

On obtient le même rendu que dans la première méthode si ce n’est que cette fois-ci le raccourci s’ajoute automatiquement en insérant le fichier PDF via la fenêtre des médias.

3. En utilisant le bouton Google Doc Embedder (GDE) de l’éditeur Visuel

Dans l’onglet « Visuel » de l’éditeur, il existe un bouton dessiné dessus la lettre G de Google (voir image ci-dessous).

En cliquant sur ce bouton, une petit fenêtre s’ouvre :

Vous pouvez ajouter dans cette fenêtre l’URL du fichier, le profil ainsi que les options discutées plus haut. Cliquer ensuite sur le bouton Insérer et le même raccourci viendra s’ajouter dans l’éditeur avec les attributs spécifiés.

4. En utilisant le bouton Google Doc Embedder (GDE) de l’éditeur Texte

Il s’agit cette fois du bouton GDE se trouvant dans l’éditeur Texte :

Cela se fait de deux manières. La première est de coller dans l’éditeur l’URL du fichier à insérer, puis de le sélectionner et cliquer sur le bouton GDE. Le raccourci [gview] s’ajoutera automatiquement. Les options sont ensuite à saisir manuellement.

La seconde manière est de cliquer d’abord sur le bouton GDE, un bout du raccourci ([gview file= »)  s’ajoutera à l’éditeur, puis coller le l’URL du fichier et cliquer une seconde fois sur le bouton qui s’appelle cette fois-ci « /GDE ». Et le tour est joué.

Le meilleur pour la fin…

Après tout ce travail, qui n’est pas si long que cela, on peut apprécier le fruit de nos efforts avec notre joli document PDF si bien intégré dans notre article (ou page) :

C’est beau non?

Conclusion

Nous avons vu que l’intégration d’un fichier PDF dans une page ou un article WordPress peut se faire en quelques clics à l’aide du plugin Google Doc Embedder. Plugin qui permet en réalité d’insérer plusieurs types de fichiers et les afficher en utilisant Google Docs Viewer.

Le paramétrage est déjà réglé dès l’installation du plugin. Il est possible de créer plusieurs profils afin d’avoir plusieurs configurations différentes utilisables depuis le raccourci [gview] dans l’éditeur de la page. Enfin, l’intégration du fichier se fait très facilement à l’aide d’un bouton GDE dans l’éditeur ou le bouton d’ajout des médias.

Voilà, si vous utilisez vous aussi Google Doc Embedder ou un autre plugin pour intégrer un fichier PDF ou autre alors n’hésitez pas à faire part de vos impressions dessus.