Intégrer signifie "insérer" ou "imbriquer" un fichier (image, pdf, diaporama...) dans un article afin qu'il soit directement visible.
Blogger le permet :
=> facilement pour tous les documents créés avec ses outils (Google Docs, Sheets, Slides, Forms...) : le code à insérer est généré automatiquement
=>pour tous les autres fichiers stockés sur Google Drive (images, sons, vidéos, PDF...) mais le code à insérer doit être adapté
Nous allons expliquer la méthode pour l'intégrer dans Blogger, en mode HTML, les fichiers stockés dans Google Drive:
- à partir de la création de documents créés dans "Google Drive" (Docs =document texte / Sheets =tableur / Slides=diaporama...)
- pour tout fichier (document), stocké dans Google Drive (fichier image, son, Pdf, texte...)
- Enfin, est présenté comment : Désactiver téléchargement / impression /copie d'un fichier de Drive
1-Intégrer un document conçu via Google Drive avec les outils intégrés : "Google docs, sheets, slides..."
1-1 PRINCIPE DE BASE
Rappel : A partir de Google Drive (votre espace de stockage en ligne ) vous pouvez utiliser les outils Google Docs, Sheets et Slides.. qui sont des applications bureautiques qui vous permettent de créer différents types de documents en ligne, de les modifier en temps réel (en même temps que d'autres personnes) et de les stocker en ligne dans votre espace de stockage Google Drive, le tout gratuitement.
Voir, si nécessaire, le dossier "UTILISER GOOGLE DRIVE"
Se rendre sur Google Docs pour créer le document
Lorsque le document est créé, afficher le Menu Fichier
puis "PUBLIER SUR LE WEB"
et sélectionner "INTEGRER"
=> Les résultats d’affichage correspondent à ceux visibles ci-dessous
1-2 DEMO avec un document Google Slides (un DIAPORAMA)
- Utiliser Google Doc, pour concevoir votre diaporama (ou importer un fichier powerpoint)
- puis partager votre diaporama
- Comment présenter votre diaporama dans Blogger ?
2 possibilités
- Le plus simple : insérer le LIEN proposé sur votre blog via "Ajouter un lien"
Démo => Voir ce diaporama -en mode création : Google doc
- en mode : affichage
- Mieux : INTEGRER tout document réalisé avec Google Doc dans votre article :
MÉTHODE pour tout document
Menu Fichier > Publier sur le web
Sélectionner l'onglet "Intégrer"
Copier le code
puis le coller dans l'article en mode html
Le résultat
2-Intégrer un fichier STOCKE SUR GOOGLE DRIVE
METHODE : vous aurez à copier/coller du code, puis le modifier. Nous conseillons d'utiliser le bloc notes pour réaliser ces opérations. Lorsque le code est finalisé, il suffit de le coller dans l'article de Blogger, en mode HTML
2-1-Télécharger le fichier sur Google DRIVE
- Vous devez télécharger sur Google Drive votre fichier
- puis le partager
- Clic droit sur le fichier >PARTAGER
- Cliquer sur "Obtenir le lien de partage"
- copier l'adresse de partage afin d'obtenir son URL du type :
https://drive.google.com/file/d/0B6Uwn-CRRjnZRm0tVTF0SUFMQk0/view?usp=sharing
Dans l’URL copiée la partie en fluo jaune représente l’identifiant du fichier partagé. Il s'agit de la partie entre les 2 / /
Il faudra bien l'identifier puis la copier.
=> Utiliser le "Bloc notes" pour copier cette adresse
2-2-Connaitre le code HTML pour insérer le document
- PRINCIPE GENERAL
- En mode HTML, il faudra copier le code d'intégration indiqué ci-dessous qui correspond à la nature du fichier et remplacer l'identifiant du fichier (en fluo jaune) par celui fourni dans l'adresse URL de partage.
- vous devez travailler sur le "Bloc notes".
1-coller l'adresse URL de partage qui contient l'adresse du fichier
2-Coller le code d'intégration correspondant à la nature du fichier (ex ici PDF)
<iframe src="https://docs.google.com/file/d/IDENTIFIANT/preview" width="800" height="600"></iframe>
=> si nécessaire adapter largeur en pixels (width) et hauteur (height) aux dimensions souhaitées pour un affichage correct dans votre article en fonction de la largeur de votre blog.
5-Astuces
=> Nota si l'article possède déjà du contenu, pour retrouver l'endroit ou coller le code, faire en mode texte une ligne de "Zéro"
en fait, Blogger modifie votre code [qui correspond pourtant aux normes HTML5 !) et le transforme automatiquement (et obligatoirement) ainsi:
<audio controls="" src="https://drive.google.com/uc?id=IDENTIFIANT">Votre navigateur n'est pas à jour !</audio>
donc il vaut mieux utiliser directement ce code !
Exemple :
<iframe src="https://docs.google.com/presentation/d/IDENTIFIANT/embed?start=true&loop=true&delayms=5000" frameborder="0" width="480" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
Ou démarrage non auto
<iframe allowfullscreen="true" frameborder="0" height="569" mozallowfullscreen="true" src="IDENTIFIANT/embed?start=false&loop=false&delayms=5000" webkitallowfullscreen="true" width="680"></iframe>
Exemple
Exemple
Exemple
2-4 COMPRENDRE ET ADAPTER LE CODE
que vous devez indiquer ainsi selon vos désiratas : width="600" height="1000"
Les options de partage de documents de Google Drive offrent certains contrôles qu'il faut connaître, en particulier le blocage du téléchargement, de l’impression et de la copie de n’importe quel fichier stocké sur le lecteur de Google.
3-Préparer le code final en remplaçant l'identifiant :
<iframe src="https://docs.google.com/file/d/0B6Uwn-CRRjnZRm0tVTF0SUFMQk0/preview" width="800" height="600"></iframe>
=> si nécessaire adapter largeur en pixels (width) et hauteur (height) aux dimensions souhaitées pour un affichage correct dans votre article en fonction de la largeur de votre blog.
4-Coller en mode HTML ce code final dans votre article
5-Astuces
=> si l'article possède uniquement cette intégration, nous conseillons d'insérer avant le code la balise
<b>
qui permet de passer une ligne,ce qui permettra éventuellement d'écrire un texte au dessus de l’élément intégré
=> Nota si l'article possède déjà du contenu, pour retrouver l'endroit ou coller le code, faire en mode texte une ligne de "Zéro"
00000000000000000000000000000000000000000000000000
et, en mode HTML, vous retrouverez facilement cette ligne de 00000 que vous remplacerez par le code d'intégration
- FICHIER IMAGE
[integration directe via Blogger> icône "Insérer une image"]
<img src="https://drive.google.com/uc?id=IDENTIFIANT" />
Exemple
Exemple
- FICHIER AUDIO mp3
src="https://drive.google.com/uc?id=IDENTIFIANT" controls Votre navigateur n'est pas à jour !
Exemple
en fait, Blogger modifie votre code [qui correspond pourtant aux normes HTML5 !) et le transforme automatiquement (et obligatoirement) ainsi:
<audio controls="" src="https://drive.google.com/uc?id=IDENTIFIANT">Votre navigateur n'est pas à jour !</audio>
donc il vaut mieux utiliser directement ce code !
- FICHIER PDF
[code intégration uniquement via cette méthode !]
<iframe src="https://docs.google.com/file/d/IDENTIFIANT/preview" width="800" height="600"></iframe>
Exemple :
- FEUILLE DE CALCUL (tableur)
[code intégration disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]
<iframe width="500" height="300" frameborder="0" src="https://docs.google.com/spreadsheet/pub?key=IDENTIFIANT&output=html&widget=true"></iframe>
Exemple
Exemple
- PRESENTATION (Diapos de type Powerpoint)
[code intégration disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]
<iframe src="https://docs.google.com/presentation/d/IDENTIFIANT/embed?start=true&loop=true&delayms=5000" frameborder="0" width="480" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
Ou démarrage non auto
<iframe allowfullscreen="true" frameborder="0" height="569" mozallowfullscreen="true" src="IDENTIFIANT/embed?start=false&loop=false&delayms=5000" webkitallowfullscreen="true" width="680"></iframe>
Exemple
- DESSIN (type Google drawings)
[code intégration disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]
Exemple
- Un document texte (Google Docs)
[code intégration disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]
Exemple
2-4 COMPRENDRE ET ADAPTER LE CODE
- La balise HTML
<iframe>est utilisée pour incorporer un autre document qui sera imbriqué dans la page HTML courante.
- src spécifie la source du média à intégrer
- Adaptez les attributs suivants très utiles qui définissent les dimensions du cadre (iframe) !
widthheight
- Observez le résultat en mode "Aperçu" et adaptez si nécessaire
3-Désactiver téléchargement / impression /copie d'un fichier de Drive
Les options de partage de documents de Google Drive offrent certains contrôles qu'il faut connaître, en particulier le blocage du téléchargement, de l’impression et de la copie de n’importe quel fichier stocké sur le lecteur de Google.
- Les conditions...
- Vous devez être le propriétaire du document pour accéder à l’activation de la fonctionnalité.
- L’option n’est disponible pour le moment que depuis la version web du service.
- A savoir
- Cette protection est toutefois relative, un geek parviendra à récupérer le fichier...
- En particulier, il est toujours possible de copier du texte affiché dans un navigateur...
- La méthode
C'est au niveau du partage dans Google Drive qu'il faut intervenir
B- Cliquer sur AVANCE ( en bas)
C- Cocher, en bas : les 2 cases" "empêcher..." et "désactiver..." et Valider sur OK
D-Récupérer le lien de partage et faites comme indiqué ci-dessus pour
-fournir le simple Lien
-afficher en "iframe" votre PDF
A-Cliquer sur Partager
B- Cliquer sur AVANCE ( en bas)
C- Cocher, en bas : les 2 cases" "empêcher..." et "désactiver..." et Valider sur OK
D-Récupérer le lien de partage et faites comme indiqué ci-dessus pour
-fournir le simple Lien
-afficher en "iframe" votre PDF
- Important : à savoir
Si vous affichez votre PDF (avec votre compte Google) en tant que "propriétaire" vous ne verrez pas de changement : vous, seul, pourrez imprimer/ télécharger.
Mais tout autre personne ne pourra le faire : testez, par exemple, en ouvrant une fenêtre de navigation privée ou via un autre ordinateur ou un autre navigateur.
Mais tout autre personne ne pourra le faire : testez, par exemple, en ouvrant une fenêtre de navigation privée ou via un autre ordinateur ou un autre navigateur.
DEMO : essayer d'imprimer ou télécharger le PDF ...
- VOIR le PDF dans l'article
