Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

samedi 15 novembre 2008

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) :

Ajouter à 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



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

Ajouter à Google

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 :

Barre de titre du gadget
A propos ... du gadget

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

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 :

Paramètres d'affichage

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

23 commentaires:

mwg a dit…

Bonjour,
je suis novice en la matière et j'ai du mal à comprendre vos manip...

Je voudrais pouvoir poster des mp3 sur mon blog avec le lecteur dewplayer mais je n'y arrive pas... pourriez vous m'expliquer en détail comment faire??

merci d'avance.

morgann

mwg a dit…

Bonjour,
je suis novice en la matière et j'ai du mal à comprendre vos manip...

Je voudrais pouvoir poster des mp3 sur mon blog avec le lecteur dewplayer mais je n'y arrive pas... pourriez vous m'expliquer en détail comment faire??

merci d'avance.

morgann

Prac a dit…

Bonsoir Morgann

Pour dewplayer l info est ici

Dewplayer

Vous avez des exemple de code a placer dans un gadget html/javascript

Attention il faut trouver un hebergeur pour dewplayer.swf et pour vos mp3

Vous pouvez utiliser Google Sites

mwg a dit…

... tout cela reste du chinois pour moi..

pourriez vous m'expliquer plus précisemment?

Anonyme a dit…

je n'y arrive pas !!!
Je tente desesperement 'integrer un diaporama dans le corps du texte...
Merci pour votre aide...

Prac a dit…

Bonsoir

@Laurette @Anonyme

Mettre le gadget dans igoogle. Copier le code, suivre la procedure du message pour obtenir le iframe

Sinon contactez moi sur monmail, avec l adresse de votre blog et celui de votre album photo

--

prac

--

MisterGoupil a dit…

je n'ai peut-être pas tout compris mais ma question est la suivante : Comment inserer un Gadget Blogger dans le corps du message ?

Prac a dit…

Bonsoir MisterGoupil

Ce n est pas possible pour un gadget Blogger !!

MisterGoupil a dit…

Bon dommage !!

Sinon comment insérer dans un article (message) le script pour devenir membre (l'équivalent du bouton Google [Devenir membre] ?

Merci par avance.

Linda a dit…

bonjour,
j'ai agencé mon blog en plusieurs page. J'aimerais intégrer des vidéos et pourquoi pas des gadgets sur certaine pages créer. J'y arrive seulement sur la page principale.
Merci.

Prac a dit…

Bonsoir

@Linda : Utilisez les pages de Blogger, sous Blogger in Draft

sebdos a dit…

bonjour. ça a du changer, quand je suis vos instructions rien n'est comme annoncé dans le tutoriel. j'en perds mon latin (in vino veritas)

Prac a dit…

@sebdos

Bonsoir

Contactez moi par mail, avec l URL de vos essais

--

prac

--

_@_V a dit…

I tried to embed an mp3 player into the body of my blog. When I am signed in to edit my blog, I can get the music to play, but when I open my blog as a visitor, the music won't play. Can you help?

Prac a dit…

Hello

@ _@_V

I suggest you to leave Widgetbox and to use the reader from Google

Read this

A mp3 player

Cdt

Anonyme a dit…

Bonjour
j'ai bien suivi mot pour mot vos explications et j'ai réussi à intégrer de la musique dans un article par contre j'ai autoriser le démarrage automaique de la musique mais c'est très long à se lancer pourquoi??
voici le lien de mon blog pour que vous puissiez voir
http://salon-fallingstar.blogspot.com/p/musiques-diverses_11.html

Prac a dit…

Bonsoir

@Elisabeth

Le lecteur Flash ODEO est un ancien lecteur Flash, mal adapté au demarrage automatique.

J ai corrigé votre code fourni quelques informations complémentaires ici

Lecteur ODEO pour FallingStar

Bonne soirée

dionysos94 a dit…

Bonjour,
je souhaiterai pour ma part savoir s'il est possible d'insérer un script publicitaire (blogbang ou ebuzzing dans le corps du message).

Merci

Prac a dit…

Bonsoir

@dionysos94

Cela ne pose pas de problemes. Collez le code dans le html de votre message en utilisant l onglet Edit HTML

Cdt

Anonyme a dit…

Bonjour,
Je souhaite mettre un mur d'image Tiltviewer sur mon blog mais je n'y arrive pas!
J'ai ajouter un gadget sur igoogle cependant je ne sais pas comment y faire apparaitre les photos de mon album Picassa. En effet l'adresse de la gallerie xml est demandée et je ne sais pas où la trouver.
Pourriez vous m'aider?
Merci
aya

Prac a dit…

Bonsoir

Le gadget Tiltviewer n est utilisable (simplement) qu avec des phtos de Flickr

Gallerie Flickr sur un mur d images

ou en utilisant un fichier xml contenant les adresses des images

Gallerie xml avec Tiltviewer

Cdt

Serena a dit…

Bonjour,
j'utilisais un script géoloc sur mon blog, qui ne fonctionne plus depuis que j'ai du formater mon ordi.
Comment puis-je régler ce problème?
Je suis allée sur "blogger géolocalisation" mais c'est trop compliqué (je suis novice)

Merci d'avance pour m'aider à régler ce problème.

Serena

Emmanuel a dit…

Bonsoir, j'aimerai bien s'il vous plait savoir comment mettre mon propre script dans un article, comme par exemple les scripts de ADS entre les phrases de mon article ou encore le script abonnez vous à mon blog.

Merci,

cordialement

Emmanuel.