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.




2009/12/20

Google Web Elements



Important ! mise à jour d'août 2012. Google abandonne le service Google Web Elements. L'adresse http://www.google.com/webelements renvoie maintenant sur la home page de Google. Les éléments déjà installés continuent de fonctionner. Les codes fournis ci-dessous peuvent être intégrés. Pour certains, mettre le paramètre element=false au lieu de element=true, ce qui évite l'affichage du lien Google Web Elements.




Google Web Elements, se sont des objets intégrables de Google. Pour y accèder, connectez-vous sous votre compte Google, puis rendez vous à l'adresse Google Web Elements.

 

Sommaire



 

Un Diaporama (Presentations)

Google Documents permet d'enregistrer un diaporama. Celle-ci peut être affichée à l'aide de l'élément Présentation

Paramètres : L'adresse de la présentation et la taille désirée.

Exemple : Les vins du Valais en Chine




Le code à insérer dans le html du message ou dans un gadget HTML/Javascript : 


<iframe frameborder="0" marginwidth="0" marginheight="0" border="0" style="border:0;margin:0;width:410px;height:342px;" src="http://docs.google.com/present/embed?id=0AYyfJJJSNrfuZGRiZzZid2dfMTI0aG52eG03Zno&element=false" scrolling="no" allowtransparency="true">Google Web Elements - Presentation</iframe>



Note : La Présentation est dans un format propre à Google Document. Pour afficher une présentation Power-Point originale, il est possible d'utiliser le lecteur de documents de Google Documents.


 
Une feuille de calcul (Spreadsheets)

Une feuille de calcul enregistrée sur Google Documents peut être affichée sur le Blog, à l'aide de l'élément Feuille de calcul (Spreadsheets).

Paramètres : L'adresse (URL) de la feuille de calcul, la taille et la plage de cellules à afficher.

Exemple : Encépagement en cépages rouge du Canton de Vaud (2008).




Le code à insérer dans le html du message ou dans un gadget HTML/Javascript : 


<iframe frameborder="0" marginwidth="0" marginheight="0" border="0" style="border:0;margin:0;width:600px;height:500px;" src="http://spreadsheets.google.com/pub?output=html&widget=true&single=true&element=false&gid=0&key=0AoyfJJJSNrfudE5naDVYNWY4YkxQbTZ6WkJSR1NhYXc" scrolling="no" allowtransparency="true">Google Web Elements - Spreadsheets</iframe>




 
Un Moteur de Recherche Personnalisé (Custom Search)

L'élément Recherche Personnalisée offre une façon simple d'ajouter un formulaire de recherche sur son Blog. Trois options sont offertes, la recherche sur le Blog, la recherche sur le Blog en permettant l'affichage de publicités AdSense dans le résultat de la recherche, ou l'utilisation d'un moteur de recherche personnalisé (Custom Search Engine - CSE).

Paramètres : Le type de moteur de recherche et le style du formulaire.

Exemple : Le moteur de recherche des Liens du Vin.

La petite croix après le bouton de recherche permet d'effacer le résultat de la recherche.

Loading




Le code à insérer dans un gadget HTML / Javascript est un script. Pour le placer dans le html du message, utilisez le code suivant en remplacant le code de la recherche personnalisée. Saisir le code sans retour à la ligne !


<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> google.load('search', '1'); google.setOnLoadCallback(function(){ new google.search.CustomSearchControl('partner-pub-5518142162212860:9e4v2y-mjl7').draw('cse'); }, true); </script><noscript>Google Web Elements - Custom Search</noscript>





 
Recherche d'Actualités (News)

L'élément Recherche d'actualité permet d'afficher les dernières informations sur un sujet donné.

Paramètres : Le format et l'expression à rechercher.

Exemple : Une recherche d'Actualités sur Google Blogger.



Le code à insérer dans le html du message ou dans un gadget HTML/Javascript :


<iframe frameborder="0" marginwidth="0" marginheight="0" border="0" style="border:0;margin:0;width:300px;height:250px;" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&format=300x250&q=Google%20Blogger&element=false" scrolling="no" allowtransparency="true">Google Web Elements - News</iframe>





 
Un lecteur de Flux (Reader)

Google Reader, le lecteur de flux de Google permet d'afficher les flux RSS que l on désire suivre. Google Reader permet aussi d'afficher un extrait de ses abonnements (Clip) sur son Blog. De nombreux Gadgets Google permettent aussi d'afficher un flux sur son Blog. L'élement Reader de Google Web Elements permet d'insérer un extrait des flux partagés sur son Blog.

Paramètres : Le titre de l'élément, le style et le nombre d'entrées à afficher.

Attention : Depuis la nouvelle version (2011 - 11) de Google Reader, il n'existe plus de tags partagés. Pour partager ses abonnements, il faut créer un thème (Bundles) et modifier le code fournit par l'élément Reader. En suivant les indications données par la page Partager ses abonnements de Google Reader, il est possible de publier ses flux.

Le code fournit par l'élément Reader : 


<div id="readershared"><div></div></div>
<script type="text/javascript">window.GRC_m=function(d){return new GRC(d,document.getElementById("readershared").firstChild);};</script>
<script type="text/javascript" src="http://www.google.com/reader/ui/publisher-en.js"></script>
<script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/05980836729406198703/state/com.google/broadcast?n=7&callback=GRC_p(%7Bc%3A%22khaki%22%2Ct%3A%22Liens%20partag%C3%A9s%22%2Cs%3A%22true%22%2Cn%3A%22true%22%2Cb%3A%22false%22%2Cw%3A%22false%22%7D)%3Bnew%20GRC_m&t=?"></script><noscript>Google Web Elements - Reader</noscript>



Après corrections, affichage du thème Tips pour Blogger : 


<div id="readershared"><div></div></div>
<script type="text/javascript">window.GRC_m=function(d){return new GRC(d,document.getElementById("readershared").firstChild);};</script>
<script type="text/javascript" src="http://www.google.com/reader/ui/publisher-fr.js"></script>
<script type="text/javascript" src="http://www.google.ch/reader/public/javascript/user/05980836729406198703/bundle/Tips?n=7&callback=GRC_p(%7Bc%3A%22khaki%22%2Ct%3A%22Tips pour Blogger%22%2Cs%3A%22true%22%2Cn%3A%22true%22%2Cb%3A%22false%22%2Cw%3A%22false%22%7D)%3Bnew%20GRC_m&t=?"></script><noscript>Google Web Elements - Reader</noscript>



Les articles du thème : 






 
Le Forum (Conversation)

L'élément Forum n'est plus maintenu par Google (avril 2012).




 
Un Agenda (Calendar)

L'élément Agenda permet d'insérer son planning sur le Blog. L'agenda doit bien entendu être déclaré comme partagé avant l'opération.

Paramètres : L'agenda à afficher, la taille et le mode d'affichage.

Exemple : Mon agenda en mode mensuel.




Le code à insérer dans le html du message ou dans un gadget HTML/Javascript :


<iframe frameborder="0" marginwidth="0" marginheight="0" border="0" style="border:0;margin:0;width:300px;height:300px;" src="http://www.google.com/calendar/embed?showTitle=0&showTabs=0&showPrint=0&showCalendars=0&wkst=1&element=false&src=philippe.chappuis%40gmail.com" scrolling="no" allowtransparency="true">Google Web Elements - Calendar</iframe>






 
Une Carte (Maps)

Google Maps permet de créer sa propre carte. Placer une carte sur son Blog, demande plusieurs manipulations. L'élément carte permet de géolocaliser une adresse particulière très rapidement.

Paramètres : La taille, le type de vue, l'adresse à géolocaliser et le titre du marqueur.

Exemple : Le Château de Rolle.




Le code à insérer dans le html du message ou dans un gadget HTML/Javascript, en remplacant les paramètres de la carte.


<iframe frameborder="0" marginwidth="0" marginheight="0" border="0" style="border:0;margin:0;width:300px;height:250px;" src="http://www.google.com/uds/modules/elements/mapselement/iframe.html?maptype=satellite&latlng=46.45882133672441%2C6.341278553009033&mlatlng=46.458666%2C6.341151&maddress1=Ch%C3%A2teau%20de%20Rolle&maddress2=Grand'Rue%2C%201180%20Rolle%2C%20Suisse&zoom=16&mtitle=Ch%C3%A2teau%20de%20Rolle" scrolling="no" allowtransparency="true">Google Web Elements - Maps</iframe>






 
Actualités sur YouTube (YouTube News)

Pour ajouter une Video de YouTube sur son Blog, il suffit d'insérer un tag html object ou d'utiliser un Gadget Google. L'élément YouTube News permet d'ajouter les dernières vidéos d'actualité.

Paramètres : Le fournisseur de News.

Exemples : Les dernières News d'Euronews.




Le code à insérer dans le html du message ou dans un gadget HTML/Javascript :


<iframe frameborder="0" marginwidth="0" marginheight="0" border="0" style="border:0;margin:0;width:300px;height:250px;" src="http://www.google.com/uds/modules/elements/videonews/iframe.html?channel=Euronews" scrolling="no" allowtransparency="true">Google Web Elements - YouTube News</iframe>






 
Partager sur Orkut (Orkut Share)

Orkut, le réseau social de Google, ne dispose pas d'outils permettant de créer un bouton Partager sur Orkut.
L'élément Orkut Share comble cette lacune. Il correspond à l'outil Promouvoir d'Orkut.

Paramètres : Le style du bouton, le titre de l'article, le résumé, la vignette à utiliser et l'URL de destination.

Exemple : La promotion de cet article.


Promouvoir sur Orkut... 



Le code à insérer dans un gadget HTML/Javascript est un script. Pour le placer dans le html du message, utilisez le code suivant, à saisir le code sans retour à la ligne !


<div id="orkut_share" style="width:100%;">Promouvoir sur Orkut... </div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('orkut.share', '1'); google.setOnLoadCallback(function(){ new google.orkut.share.Button({ style:google.orkut.share.Button.STYLE_MINI, title:unescape('Google%20Web%20ELements'), summary:unescape('How%20to%20add%20Google%20Web%20Elements%20on%20Your%20Site')}).draw('orkut_share'); }, true); </script><noscript>Google Web Elements - Orkut Share</noscript>



Exemple avec le bouton Orkut normal (Orkut Regular) :


Promouvoir sur Orkut...









 
La Traduction (Translate)

L'élément Traduction permet de traduire la page courante du Blog.

Paramètres : La langue de la page et le choix de l'affichage (pour tous les visiteurs ou seulement pour ceux dont la langue est différente de celle de la page).

Exemple : L'outil traduction pour cette page.






Le code à insérer dans un gadget HTML/Javascript est un script. Pour le placer dans le html du message, utilisez le code suivant, à saisir le code sans retour à la ligne !


<div id="google_translate_element" style="display:block"></div>
<script>function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: "fr"}, "google_translate_element");};</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script><noscript>Google Web ELements - Translate</noscript>






2009/12/19

Blogger Play sur son Blog

Blogger Play sur son Blog

Lancé fin 2007, Blogger Play permet d'afficher un diaporama des nouvelles photos ajoutées sur Blogger, et ce, en temps réel.

Un Gadget Google permet d'afficher ce diaporama sur son Blog :


Malheureusement, depuis quelques semaines (décembre 2009), ce gadget ne fonctionne plus.

En utilisant la technique décrite sur le Blog d'Aide pour Blogger, il est possible de remplacer ce gadget par le code html d'un iframe.

Le code à insérer :


<iframe allowtransparency="true" scrolling="no" frameborder="0" style="width: 360px; height: 290px;"
src="http://www.gmodules.com/ig/ifr?url=http://www.blogger.com/gadgets/play.xml&up_speed=30">Afficher un diaporama des photos mises à jour sur Blogger avec Blogger Play : http://play.blogger.com</iframe>


le paramètre up_speed fixe la vitesse de défilement des images. Il peut prendre la valeur 30 (lente), 50 (moyenne) ou 80 (rapide).

Note : Blogger Play est supprimé (septembre 2010). Il est remplacé par Google Reader Play. Essayez Google Reader Play


Plus d'informations

Un diaporama pour Blogger

Un diaporama avec les Flux Media RSS (anglais)


Rechercher sur le Blog de Prac avec Google CSE