Créer un Blog avec 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.

Si Blogger le permet facilement et automatiquement  pour certains types de documents : IMAGE, VIDEO, ce n'est pas le cas pour tous les fichiers.

Nous allons expliquer la méthode: 
  • à partir de la création de documents dans "Google documents"
  •  pour tout document/fichier, en expliquant le principe général, mais il faudra travailler, dans Blogger, en mode HTML pour insérer le code.



1-Documents conçus dans Google Documents

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


2-Documents STOCKES 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 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 le copier.


2-2-Connaitre le code HTML pour insérer le document

 En mode HTML, il faudra copier le code ci-dessous et remplacer  l'identifiant du fichier par le votre. Nous vous donnons le code selon le type de fichier concerné
  • 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="640" height="480"></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