Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2012/04/26

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.

Google Drive - Blogger


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 Premiers Grands Crus Vaudois, hébergée sur mon site Les Liens du Vin, sur Google Drive.
Une fois le document partagé et rendu public, Google Drive nous donne l'adresse suivante comme lien de partage (lien aperçu de l'affichage) : 


https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/diapo-grand-cru.htm



Cette URL peut être utilisée comme lien, Le Diaporama des Premiers Grands Crus vaudois, 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://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/diapo-grand-cru.htm" style="width:100%; height: 340px;" allowTransparency="true" frameborder="0" scrolling="no"></iframe>



Les Premiers Grands 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


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 Drive. A titre d'exemple, j'ai placé l'horloge Google et obtenu l'URL suivante : 


https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/GoogleClock.swf



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://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/GoogleClock.swf",
"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>





Mise à jour : hébergement sur Google Drive

Depuis février 2013, Google Drive autorise l'hébergement de fichier html, devenant ainsi, de facto, un hébergeur Internet gratuit. Il faut creéer un répertoire en accès public puis placer les fichiers html dans ce répertoire.
Le répertoire public peut contenir tous les fichiers nécessaires à l'affichage d'une page Internet, en plus des pages html  : script (*.js), images (*.png ou *.jpg), fichiers sons (*.mp3) ou animation flash (*.swf).

J ai par exemple placé cette mini page html sur Google Drive : Etiquette de vin. Elle peut être intégrée sur le Blog par un tag iframe : 





Plus d'informations

Google Drive

Afficher une feuille Excel sur son Blog avec Google Viewer

Le lecteur de documents de Google Documents

Insérer la Timeline de Twitter sur son Blog

Les lecteurs MP3 de Google

Nivo Slider - Comment insérer un diaporama en utilisant Google Drive

Cloud Carousel - Comment insérer un carousel d'images en utilisant Google Drive

Insérer des Gadgets de iGoogle sur son Site

2012/04/09

Suivre les Pins de son site sur Pinterest


Pinterest conserve le site à l'origine du Pin. Ainsi, les Pins de ce Blog se trouvent à cette adresse


http://www.pinterest.com/source/viti-vino.blogspot.com


Pour un site, l'adresse des Pins est :


http://www.pinterest.com/source/liens-du-vin.ch


Pinterest - www.liens-du-vin.ch


Créer un Flux RSS



Mise à jour : 2013.01.01. feed43 ne peut plus être utilisé pour créer un Flux RSS. Pinterest impose d'être enregistré pour afficher la source. L'URL http://www.pinterest.com/source/NOMDUSITE est redirigée vers la page de loggin. L'auteur de l'article original propose d'utiliser un tableau de bord de ViralContentBuzz pour suivre ses Pins



Nous pouvons utiliser le Flux RSS de cette adresse pour suivre les Pins de ce site sur Pinterest.

feed43 permet de créer un Flux RSS à partir d'une adresse URL.

Pour créer un nouveau flux, spécifier l'adresse de la page à convertir : 

feed43 - URL à convertir


Nous allons extraire dans chaque message du Flux RSS, l'identifiant du Pin, le commentaire, le lien vers l'auteur du Pin et son nom.

feed43 - zones à extraire


Les zones à extraire sont marquées par {%}. Le symbole {*} indique que nous voulons extraire ces zones dans tous les Pins. Les zones ainsi définies sont utilisables en indiquant leur numéro d'ordre, soit {%1}, {%2}, ...


<a href="http://pinterest.com/pin/{%}" class="PinImage ImgLink">{*}
<p class="description">{%}</p>{*}
<a href="{%}" title="{%}" class="ImgLink">{*}



Nous allons utiliser ces zones pour définir les propriétés d'un article du Flux : 

Feed43 - Propiétés d'un article du Flux


Les zones retenues permettent de définir : 


Le titre de l'article : {%2}
Le lien vers le Pin : {%1}
Le lien vers l'auteur du Pin : {%3}
Le nom de l'auteur du Pin : {%4}



Ces données une fois saisies, nous obtenons le Flux RSS des Pins réalisés depuis un site donné : 

Feed43 - Flux RSS


Utiliser le Flux RSS

Une fois le Flux créé sur feed43, il est recommandé de renommer le flux. Par exemple, le Flux RSS des Pins réalisés sur mon site Les Liens du Vin :  http://feed43.com/liens-du-vin.xml.

Le Flux peut être utilisé avec Google Reader ou affiché sur un Blog avec le Gadget Flux : 

Gadget Blogger - Flux


J'ai utilisé le Flux créé ci-dessus, avec un Gadget Google comme lecteur de Flux : 




En savoir plus

L'article original, sur Mashable

Video : L'intérêt et le fonctionnement des Flux RSS

Le bouton Pin-It de Pinterest, sur le Blog de Soraya

Tout Pinterest en français. Les Pins de Tomate Joyeuse

Un Gadget Google pour insérer un Flux RSS sur son Site ou son Blog

Un diaporama avec les derniers posts de Pinterest

Les derniers Pins d'un compte Pinterest, avec vignette

Les vignettes de Pinterest


Rechercher sur le Blog de Prac avec Google CSE