Un diaporama à partir d'un flux RSS

Gadget Google
Un diaporama de Flickr - Personnaliser le Diaporama à partir du Flux Media RSS

Le Gadget Google insère un Diaporama qui affiche le Set de Flickr à partir du Flux Media RSS.

Le fichier xml du gadget

260 x 240

flickr-gadget-blog.xml

380 x 320

flickr-gadget.xml

380 x 320

flickr-gadget-ct.xml

Le iframe du gadget

flickr-gadget-blog.xml

<iframe style="width: 260px; height: 240px;" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flickr-gadget-blog.xml&up_File=http%3A%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fphotoset.gne%3Fset%3D72157609076361497%26nsid%3D42038249%40N00%26lang%3Den-us%26format%3Drss_200&up_Link=http%3A%2F%2Fwww.liens-du-vin.ch%2F_winemap%2Fmaps-clos-domaines-chateaux.htm&up_Titre=Discover%20the%20Swiss%20Wineries&up_Textcol=%23000&up_TextBcol=%23d1dae3&up_Bordercol=%23f00&up_SlideBcol=%23c3d9ff&up_BoxBcol=%23d1dae3&up_PWidth=240&up_PHeight=160" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Diaporama Flickr</iframe>

flickr-gadget.xml

<iframe style="width: 380px; height: 320px;" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flickr-gadget.xml&up_File=http%3A%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fphotoset.gne%3Fset%3D72157609076361497%26nsid%3D42038249%40N00%26lang%3Den-us%26format%3Drss_200&up_Link=http%3A%2F%2Fwww.liens-du-vin.ch%2F_winemap%2Fmaps-clos-domaines-chateaux.htm&up_Titre=Discover%20the%20Swiss%20Wineries&up_Textcol=%23000&up_TextBcol=%23d1dae3&up_Bordercol=%23f00&up_SlideBcol=%23c3d9ff&up_BoxBcol=%23d1dae3&up_PWidth=360&up_PHeight=240" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Diaporama Flickr</iframe>

flickr-gadget-ct.xml

<iframe style="width: 380px; height: 320px;" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flickr-gadget-ct.xml&up_File=http%3A%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fphotoset.gne%3Fset%3D72157609076361497%26nsid%3D42038249%40N00%26lang%3Den-us%26format%3Drss_200&up_Link=http%3A%2F%2Fwww.liens-du-vin.ch%2F_winemap%2Fmaps-clos-domaines-chateaux.htm&up_Titre=Discover%20the%20Swiss%20Wineries&up_Textcol=%23000&up_TextBcol=%23d1dae3&up_Bordercol=%23f00&up_SlideBcol=%23c3d9ff&up_BoxBcol=%23d1dae3&up_PWidth=360&up_PHeight=240" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Diaporama Flickr - Ouvre Flickr sur clic</iframe>

Le script

flickr-gadget-blog.xml

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flickr-gadget-blog.xml&up_File=http%3A%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fphotoset.gne%3Fset%3D72157609076361497%26nsid%3D42038249%40N00%26lang%3Den-us%26format%3Drss_200&up_Link=http%3A%2F%2Fwww.liens-du-vin.ch%2F_winemap%2Fmaps-clos-domaines-chateaux.htm&up_Titre=Discover%20the%20Swiss%20Wineries&up_Textcol=%23000&up_TextBcol=%23d1dae3&up_Bordercol=%23f00&up_SlideBcol=%23c3d9ff&up_BoxBcol=%23d1dae3&up_PWidth=240&up_PHeight=160&synd=open&w=260&h=240&title=Slideshow+from+Flickr+Media+RSS+Feed&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script><noscript>Gadget Google - Diaporama Flickr Photostream</noscript>

flickr-gadget.xml

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flickr-gadget.xml&up_File=http%3A%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fphotoset.gne%3Fset%3D72157609076361497%26nsid%3D42038249%40N00%26lang%3Den-us%26format%3Drss_200&up_Link=http%3A%2F%2Fwww.liens-du-vin.ch%2F_winemap%2Fmaps-clos-domaines-chateaux.htm&up_Titre=Discover%20the%20Swiss%20Wineries&up_Textcol=%23000&up_TextBcol=%23d1dae3&up_Bordercol=%23f00&up_SlideBcol=%23c3d9ff&up_BoxBcol=%23d1dae3&up_PWidth=240&up_PHeight=160&synd=open&w=260&h=240&title=Slideshow+from+Flickr+Media+RSS+Feed&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script><noscript>Gadget Google - Diaporama Flickr Photostream</noscript>

flickr-gadget-ct.xml

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flickr-gadget-ct.xml&up_File=http%3A%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fphotoset.gne%3Fset%3D72157609076361497%26nsid%3D42038249%40N00%26lang%3Den-us%26format%3Drss_200&up_Link=http%3A%2F%2Fwww.liens-du-vin.ch%2F_winemap%2Fmaps-clos-domaines-chateaux.htm&up_Titre=Discover%20the%20Swiss%20Wineries&up_Textcol=%23000&up_TextBcol=%23d1dae3&up_Bordercol=%23f00&up_SlideBcol=%23c3d9ff&up_BoxBcol=%23d1dae3&up_PWidth=240&up_PHeight=160&synd=open&w=260&h=240&title=Slideshow+from+Flickr+Media+RSS+Feed&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script><noscript>Gadget Google - Diaporama Flickr - Ouvre Flickr sur clic</noscript>

Les paramètres du gadget

flickr-gadget-blog.xml

File : Le Flux Media RSS du Set de Flickr. Une adresse de cette forme :

http://api.flickr.com/services/feeds/photos_public.gne?id=42038249@N00
&lang=en-us&format=rss_200

IdGettr permet de retrouver l'identifiant d'un utilisateur ou d'un groupe

Link : URL du lien sur le titre de l'album
Titre : Titre du lien sur le titre

Textcol : #rrggbb couleur du texte
TextBcol : #rrggbb couleur du fond du texte
Bordercol : #rrggbb couleur de la bordure
SlideBcol : #rrggbb couleur du fond du diaporama
BoxBcol : #rrggbb couleur du fond du conteneur

PWidth : largeur des images en pixels
PHeight : hauteur des images en pixels

flickr-gadget

flickr-gadget-ct

Cette version ouvre l'album Flickr lors d'un clic sur la photo

File : Le Flux Media RSS du Set de Flickr. Une adresse de cette forme :

http://api.flickr.com/services/feeds/photos_public.gne?id=42038249@N00
&lang=en-us&format=rss_200

IdGettr permet de retrouver l'identifiant d'un utilisateur ou d'un groupe

Link : URL du lien sur le titre de l'album
Titre : Titre du lien sur le titre

Textcol : #rrggbb couleur du texte
TextBcol : #rrggbb couleur du fond du texte
Bordercol : #rrggbb couleur de la bordure
SlideBcol : #rrggbb couleur du fond du diaporama
BoxBcol : #rrggbb couleur du fond du conteneur

PWidth : largeur des images en pixels
PHeight : hauteur des images en pixels

Un exemple

A la découverte des Clos Domaines et Châteaux

Un Diaporama de Flickr - Flux Media RSS

Une astuce

Pour afficher plus de 20 photos (Flickr limite à 20 le nombre d'image d'un Flux Media RSS), on peut utiliser un flux créé avec Yahoo Pipe. Le Flux du diaporama (paramètre up_File) ci-dessus devient :

http://pipes.yahoo.com/pipes/pipe.run?
_id=ggi_H7jn2xGoWGzY6UjTQA%26_render=rss%26num=500%26set=72157609076361497

Pour les utilisateurs de Blogger

L'ajout d'un gadget par Eléments de la page / Ajouter gadget est très simple. Pour ajouter un gadget dans le corps d'un message, il suffit d'insérer un iframe dans le html du message.