• ACCUEIL
  • blogger

    Intégrer un fichier ou document stocké ou conçu dans Google drive


    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:
    1. à partir de la création de documents créés dans "Google Drive" (Docs =document texte / Sheets =tableur / Slides=diaporama...)
    2. pour tout  fichier (document),  stocké dans Google Drive  (fichier image, son, Pdf, texte...)
    3. 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"


    vous obtenez le code vous permettant d'intégrer le document dans votre article. (en mode HTML !)

    => 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".

    Exemple à faire sur le "bloc notes"

    1-coller l'adresse URL de partage qui contient l'adresse du fichier

    https://drive.google.com/file/d/0B6Uwn-CRRjnZRm0tVTF0SUFMQk0/view?usp=sharing

    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>

    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




    •  FICHIER AUDIO mp3
    [code intégration  uniquement via cette méthode !]

    <audio src="https://drive.google.com/uc?id=IDENTIFIANT" controls> 
    Votre navigateur n'est pas à jour !</audio>

    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



    • PRESENTATION (Diapos de type Powerpoint)
      [code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]
    Code avec démarrage auto
    <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&amp;loop=false&amp;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]
    <img src="https://docs.google.com/drawings/d/IDENTIFIANT/pub?w=480&amp;h=360">

    Exemple

    • Un document  texte (Google Docs)


      [code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]
    <iframe src="https://docs.google.com/document/d/IDENTIFIANT/pub?embedded=true"></iframe>


    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) !
      • width  Cet attribut indique la largeur du cadre en pixels
      • height Cet attribut définit la hauteur du cadre en pixels



    que vous devez indiquer ainsi selon  vos désiratas :  width="600"   height="1000"

    • 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

    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.



    DEMO : essayer d'imprimer ou télécharger le PDF ...


    • VOIR le PDF dans l'article