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.




2014/09/25

5 secondes pour ajouter un diaporama de Flickr sur son Blog

5 secondes pour ajouter un diaporama Flickr à son Blog

5 secondes pour ajouter un diaporama Flickr à son Blog
5 secondes pour ajouter un diaporama de Flickr

Pour ajouter un diaporama de Flickr, il faut utiliser un tag iframe à placer dans le html du message ou dans un Gadget html / Javascript.

Créer le code HTML

1. Ouvrir l'album Flickr. Recopier l'URL. Par exemple : 


https://www.flickr.com/photos/prac53/sets/72157609076361497

prac53 est le nom de l'utilisateur
72157609076361497 est l'identifiant de l'album



2. Ajouter /player à l'adresse de l'album. Notez que l'adresse doit être de la forme https://


https://www.flickr.com/photos/prac53/sets/72157609076361497/player



3. Le code du iframe


<iframe style="width: 400px; height: 400px;" scrolling="no" align="middle" frameborder="0" src="https://www.flickr.com/photos/prac53/sets/72157609076361497/player"></iframe>



Le résultat



Limitations

Flickr ne publie plus, depuis la fin de 2013, de Flux RSS d'un album. Les diaporamas créés à partir d'un Flux RSS offrent plus de possibilités de configuration que le diaporama présenté ici.

Mentions légales

© photos : www.diapo.ch, Philippe Krauer et www.c-d-c.ch.

2013/04/02

Des Gadgets Blogger pour vos photos de Google+

Des Gadgets Blogger pour afficher les photos de vos Albums Google+

Des Gadgets Blogger pour les photos de Google+
Les Albums de Picasa Albums Web sont affichés sur Google+. Depuis mars 2013, Google redirige l'adresse picasaweb.google.com vers plus.google.com/photos. Il est possible d'empêcher la redirection de Picasa vers Google+.

Les Gadgets Blogger utilisent le Flux Media RSS de l'Album Picasa affiché dans Google+. Les Gadget acceptent l'URL de l'album de Google+ comme paramètre d'entrée.

Trouver l'URL d'un Album Google+

Ouvrir l'Album Google+, et copier l'adresse. Par exemple : 


https://plus.google.com/photos/115854656993758258488/albums/5661135291897071089

115854656993758258488 est l'identifiant Google+ de l'utilisateur.
5661135291897071089 est l'identifiant de l'Album Google+.






Les vignettes (Thumbnails) d'un Album de Google+

Gadget Blogger - Les vignettes d'un Album de Google+


Ajouter ce Gadget avec le formulaire personnalisé de Blogger : 


Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget (sous la forme http://...) : 

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/thumbnails-google-plus-b.xml



Ajouter ce Gadget en l'intégrant dans votre bibliothèque xml

Installer le Gadget développé par Soraya sur votre Blog. Il ne sera visible que par l'administrateur. Ajouter l'URL du gadget dans la liste de liens.


Paramètres du Gadget


Gadget Blogger - Les Vignettes (Thumbnails) d'un Album de Google+

https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/thumbnails-google-plus-b.xml


AID : l'adresse (URL) de l'Album Google+.

NBC : Le nombre de vignettes à afficher (de 1 à 200)

SIZE : La largeur des vignettes (de 32 à 160px)
HSIZE : La hauteur des vignettes (de 32 à 160px). Facultatif.
CROP : Recadrage (Cropped), Yes ou No. Défaut No (non).
Yes (oui), l image originale est recadrée dans un carré de taille SIZE.
No (non), l'image originale est placée dans un rectangle de largeur SIZE.

SHA : Vignettes avec ombre portée (Yes - No)

CLP : Ouvrir l'image sur un click (Yes - No), par défaut Yes

URL : L'URL du lien sur le titre
TITLE : Le titre du lien

LCOL : #rrggbb la couleur du lien
BCOL : #rrggbb la couleur de la bordure
BKCOL : #rrggbb la couleur du fond
CCOL : #rrggbb la couleur du conteneur



Le Gadget Google dans le html d'un message

Le Gadget Blogger décrit ci-dessus ne peut pas être inséré dans le html d'un message. Pour cela nous devons utiliser un Gadget Google, à insérer avec un tag iframe. Les paramètres du gadget sont en rouge.


<iframe width="492" height="342" frameborder="0" scrolling="no" src="http://www.gmodules.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/thumbnails-google-plus.xml
&up_AID=https://plus.google.com/photos/115854656993758258488/albums/5804812316416858033
&up_NBC=12
&up_SIZE=120
&up_HSIZE=
&up_CROP=
&up_CLP=
&up_SHA=Y
&up_URL=http://www.liens-du-vin.ch/vienne-octobre-2012.htm
&up_TITLE=Souvenirs de Vienne
&up_LCOL=%23cc0000
&up_BCOL=%23de7008
&up_BKCOL=%23f2e9ca
&up_CCOL=%23f6f6f6">
Gadget Google - Vignettes de Google+ - http://www.liens-du-vin.ch/thumbnails-google-plus.htm</iframe>



Le résultat

Les vignettes de l'Album Google+ Souvenirs de Vienne.







Un diaporama (Slideshow) d'un Album de Google+

Gadget Blogger - Diaporama d'un Album de Google+


Ajouter ce Gadget avec le formulaire personnalisé de Blogger : 


Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget (de la forme http://...) : 

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-plus-slideshow-b.xml



Ajouter ce Gadget en l'intégrant dans votre bibliothèque xml

Installer le Gadget développé par Soraya sur votre Blog. Il ne sera visible que par l'administrateur. Ajouter l'URL du gadget dans la liste de liens.


Paramètres du Gadget


Gadget Blogger - Diaporama (Slideshow) d'un Album de Google+

https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-plus-slideshow-b.xml


URL : l'adresse de l'Album Google+.

PWH : largeur des images en pixels. Jusqu'à 800 pixels le diaporama affiche l'image en qualité originale
PHT : hauteur des images en pixels. Toutes les images sont mises à l'échelle, en se basant sur PWH et PHT. Le diaporama est exactement à la taille PWH x PHT

DTime : temps d'affichage en ms. (de 1000 à 12000). Defaut :  4000.
TTime : temps de transition entre les images en ms. (de 500 à 6000). Defaut : 2000.

RND : affichage des images dans un ordre aléatoire (Yes - No, défaut No)

CLP : ouverture d'une fenêtre Google+ lors d'un clic sur l'image (Yes - No, défaut No)

NAB : affichage de la barre de navigation (Yes - No, défaut Yes)

SCOL : #rrggbb couleur du fond du diaporama
BCOL : #rrggbb couleur de la bordure



Le Gadget Google dans le html d'un message

Le Gadget Blogger décrit ci-dessus ne peut pas être inséré dans le html d'un message. Pour cela nous devons utiliser un Gadget Google, à insérer avec un tag iframe. Les paramètres du gadget sont en rouge.


<iframe width="500" height="440" frameborder="0" scrolling="no" src="http://www.gmodules.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/google-plus-slideshow.xml
&up_AID=https://plus.google.com/photos/115854656993758258488/albums/5297196325809923457
&up_PWH=480
&up_PHT=360
&up_DTime=1500
&up_TTime=800
&up_RND=Yes
&up_CLP=No
&up_NAB=Yes
&up_SCOL=%23f2e9ca
&up_BCOL=%23de7008
&up_CCOL=%23f6f6f6">
Gadget Google - Diaporama de Google+ - http://www.liens-du-vin.ch/google-plus-slideshow.htm</iframe>



Le résultat

Le Diaporama des Domaines viticoles suisses (Clos Domaines et Châteaux).



Mentions légales

Gadgets fournis par Google.

© photos : www.diapo.ch, Philippe Krauer, www.c-d-c.ch et Philippe Chappuis


Plus d'informations

Diaporama de Google+ avec un Gadget Google

Les vignettes d'un Album de Google+ avec un Gadget Google

Les vignettes d'un album de Picasa

Les vignettes de Pinterest avec un Gadget Blogger personnalisé

Un diaporama des photos d'un album de Picasa

Un diaporama des derniers Pins de Pinterest

Des Gadgets pour Google+

Vidéo : intérêt et fonctionnement des Flux RSS

Des Gadgets pour son Site ou son Blog


2013/02/11

Les derniers Pins d'un compte Pinterest avec vignette

Un Gadget Blogger pour afficher les derniers Pins d'un compte Pinterest, avec vignette


En utilisant un Flux RSS de Pinterest créé par Yahoo Pipes, le Gadget Blogger affiche une vignette, le titre et la description d'un Pins d'un compte Pinterest. Affiche jusqu'à 25 Pins.


Le flux RSS d'un compte Pinterest, créé par Yahoo Pipes comprend pour chaque Pins, un titre, une vignette et une description.

Identifier un compte Pinterest

Ouvrir son compte Pinterest, et copier l'adresse. Par exemple : 


http://pinterest.com/prac53/

prac53 est le nom du compte.



Ajouter ce Gadget à Blogger

Gadget Blogger - Les derniers Pins de Pinterest avec vignette

Ajouter ce Gadget avec le formulaire personnalisé de Blogger : 


Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget (sous la forme http://...) : 

http://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/last-pins-b.xml



Ajouter ce Gadget en l'intégrant dans votre bibliothèque xml

Installer le Gadget développé par Soraya sur votre Blog. Il ne sera visible que par l'administrateur. Ajouter l'URL du gadget dans la liste de liens.


Paramètres du Gadget


Gadget Blogger, Derniers Pins de Pinterest avec vignette

https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/last-pins-b.xml


NAME : Le nom du compte Pinterest
NBP : Nombre de Pins à afficher (1 - 25)
LEN : Longeur maximum de la description (1 - 300)

LCOL : #rrggbb, couleur des liens
BTCOL : #rrggbb, couleur de la bordure des vignettes
BCOL : #rrggbb, couleur de la bordure du gadget
BKCOL : #rrggbb, couleur du fond du gadget

CCOL : #rrggbb, couleur du conteneur




Le Gadget Google dans le html d'un message

Le Gadget Blogger décrit ci-dessus ne peut pas être inséré dans le html d'un message. Pour cela nous devons utiliser un Gadget Google, à insérer avec un tag iframe. Les paramètres du gadget sont en rouge.


<iframe style="width: 400px; height: 680px;" frameborder="0" scrolling="no"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/last_pins.xml
&up_NAME=prac53
&up_NBP=5
&up_LEN=220
&up_LCOL=%23cc0000
&up_BTCOL=%23de7008
&up_BCOL=%23de7008
&up_BKCOL=%23f2e9ca
&up_CCOL=%23f6f6f6"></iframe>



Le résultat

Les 5 derniers Pins de mon compte Pinterest.





Versions et mentions légales

Gadgets fournis par Google.

Le Flux RSS utilisé par ce Gadget est généré par un Yahoo Pipes. Mes remerciements aux auteurs, voyelle.fr.


Plus d'informations


Les Gadget Pinterest Profile Widget et Board Widget réunis dans un Gadget Blogger

Les vignettes de Pinterest avec un Gadget Blogger personnalisé

Les derniers Pins de Pinterest avec vignette en utilisant un Gadget Google

Un diaporama des derniers Pins de Pinterest

Vidéo : intérêt et fonctionnement des Flux RSS

Suivre les Pins de son site sur Pinterest

Les derniers Pins de Pinterest avec vignette sur sa page Google Sites

Des Gadgets pour son Site ou son Blog


Rechercher sur le Blog de Prac avec Google CSE