Google Drive et Blogger - Améliorer son Blog

Google Drive et Blogger - Améliorer son Blog

Google Drive peut être utilisé comme un véritable hébergeur Internet. L 'espace de stockage gratuit de 5 Giga autorise l'hébergement de pages html, de feuilles de style, de fichiers son ou d'animations Flash.

Google Drive permet le stockage gratuit jusqu'à 5 Giga. Une petite astuce d'adressage permet de disposer de cet espace de stockage comme un hébergement internet. Nous allons en profiter pour améliorer notre Blog.

Intégrer sur son Blog une page html hébergée sur Google Drive
A titre d'exemple, j'ai copié la page Diaporama des Grand Crus, hébergée sur mon site Les Liens du Vin, sur Google Documents.
Une fois le document partagé et rendu public, Google Documents nous donne l'adresse suivante comme lien de partage : 
https://docs.google.com/open?id=0B4yfJJJSNrfuRW1ONmllc3FlSU0
Cette URL ne peut pas être utilisée pour intégrer cette page sur son Blog. Il faut utiliser la variante suivante : 
https://docs.google.com/uc?id=0B4yfJJJSNrfuRW1ONmllc3FlSU0
Cette URL peut être utilisée comme lien, Le Diaporama des Grands Crus, ou comme adresse source pour l'intégration de la page sur le Blog.

Le code d'intégration, avec un tag iframe : 
<iframe src="https://docs.google.com/uc?id=0B4yfJJJSNrfuRW1ONmllc3FlSU0" style="width:100%; height: 340px;" allowTransparency="true" frameborder="0" scrolling="no"></iframe>

Les Grand Crus des Clos Domaines et Châteaux
�© Photos : Régis Colombo et Clos Domaines et Châteaux
Feuille de style pour un seul message
Pour une mise en page particulière, une feuille de style peut être hébergée sur Google Documents. Pour qu'elle s'applique à l'ensemble du Blog il faut placer cette instruction avant </head> : 
<link rel="stylesheet" type="text/css" href="URL feuille de style" />
Pour appliquer un style particulier à un seul message, il est possible de placer le style entre les 2 balises <style> et </style> dans le html du message. Si la feuille de style est de grande taille ou utilisée à plusieurs endroits sur le Blog, il peut être intéressant de l'héberger sur Google Drive et de la charger dynamiquement lors de l'affichage de la page concernée.
Il suffit de placer ce petit script dans le html du message : 
<script> var cssNode = document.createElement('link');
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "URL feuille de style";
cssNode.media = "screen";
document.getElementsByTagName("head")[0].appendChild(cssNode);
</script>
Pour obtenir l'URL, nous effectuons les mêmes transformations que ci-dessus, sur l'URL fournie par Google Documents : 
https://docs.google.com/open?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg
https://docs.google.com/uc?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg
La feuille test_style.css devient accessible et peut être utilisée sur le Blog.
A titre d'exemple, cette feuille de style est utilisée pour mettre en forme la liste ci-dessous : 
Quelques services Google

• Google Drive
• Blogger
• Picasa Albums Web

Les fichiers son (*.mp3)
Google Documents accepte les fichiers *.mp3. En effectuant le changement d'URL, le fichier devient lisible par un lecteur standard. J'ai utilisé le lecteur mp3 de Google Mail pour jouer un extrait du Gloria Patri de Jean-Sébastien Bach.
https://docs.google.com/open?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0
https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0
Le Gadget Google est inséré dans le html du message avec un tag iframe : 
<iframe style="width: 240px; height: 27px;"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml
&up;_MP3=https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0
&up;_START=No
&up;_CCOL=%23f6f6f6"
allowTransparency="true"
frameborder="0"
scrolling="no">
</iframe>
Extrait J.S. Bach - Gloria Patri
Animation Flash
Un fichier Flash peut être hébergé sur Google Documents. A titre d'exemple, j'ai placé l'horloge Google et obtenu les URL suivantes : 
https://docs.google.com/open?id=0B4yfJJJSNrfuTzlaeWp6TlRKN28
https://docs.google.com/uc?id=0B4yfJJJSNrfuTzlaeWp6TlRKN28
Pour intégrer l'animation Flash dans un message, il suffit de placer les 2 scripts suivants dans le html du message : 
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">>
var flashvars = { };
var params = { wmode: "transparent" };
var attributes = { id: "player_swf" };
swfobject.embedSWF("https://docs.google.com/uc?id=0B4yfJJJSNrfuTzlaeWp6TlRKN28",
"player_content", "200", "200", "9.0.0", false, flashvars, params, attributes);
</script>
Le lecteur Flash sera placé entre les deux balises div, à ajouter dans le html du message : 
<div id="player_content"></div>

Plus d'informations
Google Drive
Afficher une feuille Excel sur son Blog avec Google Viewer
Le lecteur de documents de Google Documents
Les lecteurs MP3 de Google

   Les Liens du Vin