Inserer un Gadget Google dans le corps du message

Gadget Google

Si Blogger permet facilement l'ajout de Gadget dans les éléments de la page, rien n'est prévu pour ajouter un gadget dans le corps du message.

Un Gadget Google est une page xml dont le code exécutable est hébergé par Google. Ce code reçoit les paramètres du Gadget définis par l'utilisateur.

Sur la page HTML qui contient le gadget, celui-ci est encapsulé dans une balise <iframe> dont l'attribut src (source) donne l'adresse du Gadget avec ses paramètres.

Cette encapsulation est réalisée par Blogger lorsque l'utilisateur ajoute le Gadget dans les éléments de la page. Certaines pages encapsulent le gadget avec un script Javascript.

Malheureusement cette méthode est déconseillée avec Blogger, l'insertion du code entre les balises <script> et </script> devant être réalisée sans retour à la ligne (sinon Blogger insère des balises <br/> qui ne sont pas valides en Javascript - pour le cas où l'option Convertir les sauts de ligne est à Oui).


Où trouver des Gadgets Google

Le répertoire de Google en recense plus de 50'000 (état fin 2008). A la même date l'Unofficial Google Modules en compte plus de 10'000.

Sur un Blog ou une page Web visitée, un Gadget est généralement suivi du bouton Ajouter à Google (Add to Google) :

Un exemple

A la suite de l'article Un Diaporama pour Blogger, j'ai développé un Gadget Google qui regroupe tout le code nécessaire à l'affichage d'un Diaporama dans le corps du message.

Admettons que l'on veuille insérer dans le corps du message le gadget : Diaporama Picasa. Ce Gadget affiche le titre du Diaporama ainsi que la légende des photos.


Obtenir le code du gadget

1. Ouvrir iGoogle (Mon Google) et cliquer sur Ajouter des Modules, puis sur Ajouter un flux ou un gadget et saisir l'adresse du gadget :

http://URL/nomdugadget.xml

ou cliquer sur le bouton Ajouter à Google si vous vous trouvez sur une page qui contient le gadget désiré.



2. Une fois le gadget ajouté à votre page iGoogle, dérouler le menu de la barre de titre et choisir l'option à propos de ce gadget :




3. Dans la rubrique Pour webmasters, choisir l'option Insérer ce gadget



4. Ajuster le gadget à la dimension désirée, ignorer les paramètres d'affichage, mais définir les paramètres du Gadget :





5. Cliquer sur obtenir le code. On obtient un script javascript, avec les paramètres URL encodés :

<script src="hebergeur?url=adresse_gadget&amp;parametres ... parametres&amp;w=xxx&amp;h=yyy&amp;title=titre-gadget...output=js"></script>

hébergeur : L'hébergeur du Gadget, en l'occurrence Google à l'adresse http://www.gmodules.com/ig/ifr

adresse_gadget : L'adresse du Gadget, un fichier xml. Dans notre exemple : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-gadget-blog.xml

paramètres ... paramètres : Les paramètres du Gadget, sous la forme de couple up_nom=valeur séparés par le caractère & (ampersand - et commercial) URL encodé par &amp;

w=xxx h=yyy : Les dimensions du Gadget, w pour width (largeur) et h pour height (hauteur).

&amp;title=titre-gadget...output=js : la fin de la source, à ignorer !

Convertir le script en <iframe>

<iframe src="hebergeur?url=adresse_gadget&amp;parametres ... parametres" width="xxx" height="yyy" allowTransparency="true" frameborder="0" scrolling="no"></iframe>

width="xxx" : La largeur du iframe

height="yyy" : la hauteur du iframe

allowTransparency="true" : La couleur de fond de la page hôte prime sur celle du iframe

frameborder="0" : pas de bord

scrolling="no" : pas d'ascenseurs

Le résultat

Intégrons cette iframe sur ce blog, avec un tag <div style="text-align: center;"> pour centrer le cadre (saisie sans retour à la ligne) :

<div style="text-align:center;"><iframe src="http://152.gmodules.com/ig/ifr?mid=152&synd=trogedit
&url=http%3A%2F%2Fhosting.gmodules.com
%2Fig%2Fgadgets%2Ffile%2F108621208120033273647
%2Fpicasa-gadget-blog.xml
&up_File=http%3A%2F%2Fpicasaweb.google.fr
%2Fdata%2Ffeed%2Fbase
%2Fuser%2Fphilippe.chappuis
%2Falbumid
%2F5008507738518598193
%3Fkind%3Dphoto%26alt%3Drss
%26authkey%3D3wuzt3CsXf0%26hl%3Dfr
&up_Link=http%3A%2F%2Fwww.tendance9.com
&up_Titre=tendance9%20-%20light%20wine&up_Textcol=%23f00
&up_TextBcol=%23558866
&up_Bordercol=%23f00
&up_SlideBcol=%23eeeecc
&up_BoxBcol=%23558866" height="342" width="398" allowTransparency="true" frameborder="0" scrolling="no">URL du gadget : http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flash_slideshow-blog.xml</iframe></div>

Et nous obtenons le Diaporama :

Plus d'informations

Placer des Gadgets Blogger (widgets) dans les éléments de la page

Un container pour placer une animation Flash sur son Blog

Créer un Gadget Google

Un Diaporama pour Picasa, Photobucket, Flickr et Yahoo News (Media RSS)

Lire un Diaporama en Flash, pour oublier la balise <embed>

Des Gadgets pour son Blog ou son Site. Des lecteurs MP3, des videos et des diaporamas.

Ajouter une carte Google Maps dans ses messages.

Ajouter des Gadgets iGoogle sur son Site

Copyright photos : tendance9 et Cave de Jolimont SA