Conserver vos vignettes !

Depuis début mars 2011, on observe dans le monde Blogger que les vignettes ne s'affichent plus, ou partiellement, dans les gadgets :

• Messages les plus consultés, avec image miniature (vignette)
• Les derniers messages consultés avec vignette
• Liste des Blogs (Blogroll), avec vignette de l'élément le plus récent

Un peu d'histoire

En septembre 2008, Blogger a introduit une vignette dans le Flux Media RSS des Blogs. Selon la spécification Media RSS, cela consiste à créer un élément xml media:thumbnail dans le Flux Atom et RSS du Blog. Par exemple :

<media:thumbnail
xmlns:media='http://search.yahoo.com/mrss/'
url='http://4.bp.blogspot.com/-vpfyOVJS9fE/TWQVXZ2gpoI/AAAAAAAADnk/ZHHLgYbu_i8/s72-c/last-post-slideshow-screen.jpg' height='72' width='72'/>

Cet élément définit une image de 72 x 72 pixels, créée automatiquement à partir de la première image du message, et hébergée par Picasa Albums Web.

En janvier 2011, l'accès à Picasa se fait par une connexion sécurisée. Cela entraîne, début mars 2011, une modification des adresses (URL) des images issues de Picasa.


Une image placée sur le Blog à partir du disque dur

L'image est hébergée dans l'album Picasa Albums Web associé automatiquement au Blog.



L'adresse de l'image :

http://2.bp.blogspot.com/-yZOYwLQYSD8/TW6uFD0JZsI/AAAAAAAADpQ/J1NlMjSB_AM/s400/02_Martheray.jpg

L'adresse de la vignette (thumbnail) dans le Flux du Blog d'Aide pour Blogger :

http://2.bp.blogspot.com/-yZOYwLQYSD8/TW6uFD0JZsI/AAAAAAAADpQ/J1NlMjSB_AM/s72-c/02_Martheray.jpg

Une image placée sur le Blog à partir d'un album de Picasa Albums Web

L'insertion de l'image se fait à partir de l'onglet rédiger, en utilisant le Nouvel Editeur de Blogger. Celui-ci permet d'ouvrir un album Picasa et de sélectionner les images à insérer.

L'adresse de l'image :

https://lh3.googleusercontent.com/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s400/02_Martheray.jpg

C'est une adresse avec une connexion sécurisée, sur le Domaine googleusercontent.com.

Blogger ne va pas générer de vignette (situation mars 2011) dans le Flux Atom et RSS du Blog !


Une astuce pour permettre à Blogger de créer la vignette

Remplacer :

https://lh3.googleusercontent.com/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s400/02_Martheray.jpg

par cette adresse :

http://lh3.ggpht.com/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s400/02_Martheray.jpg

Blogger va alors générer la vignette suivante :

http://lh3.ggpht.com/_kbpHBa3_G9o/TPavghUiQkI/AAAAAAAADTM/zwZf9Pdd5uk/s72-c/02_Martheray.jpg

Conclusion

Vérifier l'adresse de la première image d'un message (issue d'un album Picasa), et remplacer https://...googleusercontent.com... par http://...ggpht.com.... Blogger va créer le Flux avec une vignette qui sera affichée par les abonnés à votre Flux.

Gadget de remplacement

Le Gadget Blogger Diaporama des derniers messages d'un Blog n'est pas affecté par ces problèmes. Il n'utilise pas la vignette contenue dans le Flux du Blog.

Plus d'informations

Le Flux Media RSS

­© Photos

Association Clos Domaines et Châteaux

Ses photos Flickr sur un mur d'images

Le gadget Diaporama de Blogger permettant d'afficher les images d'un compte Flickr utilise un Flux Media RSS. Il existe de nombreux prestataires tiers qui proposent un Diaporama en Flash.

Tiltviewer permet d'afficher un mur d'images. (To tilt : pencher, incliner).
Pour créer le diaporama il faut insérer un script qui appel le lecteur Flash tiltviewer.swf.

L'insertion du diaporama dans un message du blog ou un gadget html / javascript est grandement simplifiée en utilisant un Gadget Google.


Url du gadget

tiltviewer-flickr.xml


Insertion du gadget

Le gadget peut être inséré dans le html d'un message de Blogger ou dans un gadget HTML / Javascript. Pour obtenir le code du tag iframe ou la source du script, il faut utiliser la méthode décrite dans ce message du Blog d'Aide pour Blogger.

Pour ce gadget, les codes sont donnés sur la page Diaporama Flickr avec Tiltviewer.


Le tag iframe

A saisir sans espace ni retour à la ligne :

<iframe
style="width: 440px; height: 390px;"
src="http://www.gmodules.com/gadgets/ifr?
url=http://prac-gadget.googlecode.com/files/tiltviewer-flickr.xml
&up_UID=User ID, l'identifiant utilisateur de Flickr

Utiliser IdGettr pour trouver l'identifiant

&up_TIT=Titre du diaporama
&up_LNK=URL du lien sur le titre

&up_SW=Largeur en pixels du diaporama
&up_SH=Hauteur en pixels du diaporama

&up_TCOL=%23rrggbb couleur du titre
&up_BBOCOL=%23rrggbb couleur externe du fond
&up_BBICOL=%23rrggbb couleur interne du fond

&up_PFCOL=%23rrggbb couleur du cadre des images
&up_PBCOL=%23rrggbb couleur du verso des images
&up_BFCOL=%23rrggbb couleur de l'entourage
&up_BDCOL=%23rrggbb couleur du cadre
&up_CCOL=%23rrggbb couleur du conteneur
"
allowTransparency="true"
frameborder="0" scrolling="no">
</iframe>

Affichage plein écran

Faire un clic droit, puis choisir Full screen.


Un exemple

J'utilise le code suivant pour afficher les photos de mon compte Flickr :

<iframe style="width: 440px; height: 390px;"
src="
http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/tiltviewer-flickr.xml

&up_UID=42038249@N00

&up_TIT=Clos%20Domaines%20et%20Ch%C3%A2teaux
&up_LNK=http://www.liens-du-vin.ch/vision_cdc.htm

&up_SW=420
&up_SH=360
&up_TCOL=%23112233
&up_BBOCOL=%23eeeecc
&up_BBICOL=%23112233
&up_PFCOL=%23558866
&up_PBCOL=%23bbbbbb
&up_BFCOL=%23eeeecc
&up_BDCOL=%23558866
&up_CCOL=%23eeeecc
"
allowTransparency="true"
frameborder="0"
scrolling="no">Gadget Google - Les photos de Flickr sur un mur d'images</iframe>

Plus d'informations

Un mur d'images avec une galerie en xml

Les vignettes d'un ensemble de photos de Flickr avec un Gadget Google

Les vignettes d'un ensemble de photos de Flickr avec un Gadget Blogger

Un Diaporama de Flickr sur son Blog

Galerie horizontale de photos affichées en accordéon

Les vignettes d'un album Picasa sur son Blog

Insérer un gadget dans le corps du message

Tiltviewer, le site


Crédit photos

Association Clos Domaines et Châteaux

Deux nouveautés de Google pour la rentrée

Guide SEO

Google publie une nouvelle version de son guide Optimiser son site pour les moteurs de recherche. Cette version s'enrichit d'un glossaire et de nombreuses références vers les outils Google. Un nouveau chapitre est entièrement consacré à l'optimisation d'un site pour les téléphones mobiles.
Ce guide apporte un complément indispensable à l'article du Blog d'Aide : Améliorer la visibilité de son Blog


Search Engine Optimization Starter Guide

La version française du Guide SEO de Google (*.pdf)

Google Shortener

Depuis le 1er octobre, Google URL Shortener permet de créer une adresse URL raccourcie, ainsi qu'un Code QR. Le Code QR (Quick Response) est un code à deux dimensions permettant à un téléphone mobile d'atteindre directement une adresse URL en photographiant le code.

Pour insérer le Code QR sur son Blog, il fallait utiliser les codes de Google Chart API, ce qui n'était pas toujours simple.

Avec Google URL Shortener, il suffit de se connecter avec son compte Google sur goo.gl, de créer le raccourci et d'adjoindre .qr à l'adresse courte pour obtenir l'image sur son Blog.

En pratique

Nous voulons raccourcir l'Url suivante, créée avec Google Maps :

maps.google.ch/maps/ms?hl=fr
&ie=UTF8
&t=h
&msa=0
&msid=102376698569738400439.00049087972194c5318f2
&ll=46.325831,6.962242&
spn=0.082979,0.145912
&z=12
&output=embed

Google URL Shortener nous donne l'URL raccourcie suivante :

goo.gl/0hvD

Et le Code QR s'obtient en ajoutant .qr à cette adresse :

goo.gl/0hvD.qr

Nous pouvons maintenant afficher le Code QR avec un simple tag img :

<img src="http://goo.gl/0hvD.qr" style="border: 1px solid #000; padding: 5px;" alt="QR code - Google Maps - Badouxthèque" title="QR code - Google Maps - Badouxthèque" />

En savoir plus

A titre d'illustration, les 2 liens ci-dessous sont affichés avec le code QR et l'URL courte fournie par goo.gl.

URL longue : http://googlewebmastercentral.blogspot.com/2010/09/seo-starter-guide-updated.html

URL courte : http://goo.gl/q0zK

Code QR : http://goo.gl/q0zK.qr




URL longue : http://viti-vino.blogspot.com/2010/03/code-qr-liens-telephone-mobile.html

URL courte : http://goo.gl/ToAQ

Code QR : http://goo.gl/ToAQ.qr

Comment insérer un module d'alerte email dans blogger

Bonjour à tous,

J'ai créé il y a quelques temps pour mon blog personnel un tutoriel pour ajouter un module d'alerte email auquel les lecteurs peuvent s'abonner pour recevoir les dernières mises à jour. Je trouvais que c'était assez indispensable pour faciliter le suivi.

J'ai pensé que cette info pouvait intéresser d'autres bloggeurs :)

Nouvellement contributrice sur ce blog d'aide, je souhaitais le partager avec vous.

Seulement, comme l'article est déjà fait, j'avoue qu'il m'est plus simple de vous mettre un lien vers mon blog que de devoir récupérer toutes les photos et les ré-uploader (je peux copier/coller le texte mais pas les photos...).

Je sais que ça n'est pas le plus pratique donc je m'en excuse d'avance et si quelqu'un sait comment transférer un article d'un blog à un autre sans devoir ré-uploader toutes les photos (il y en a souvent beaucoup dans un tutoriel), ça pourrait faire l'objet d'un prochain post ?

D'ici là, voici le tutoriel en question : ici

Enjoy !

Les Vignettes d'un Album Picasa sur son Blog

Picasa Albums Web est l'hébergeur de photos associé à Blogger. Les photos d'un album peuvent s'afficher dans un Diaporama, ou s'afficher sous forme de vignettes (thumbnails).


Le Gadget Google

Le Gadget Google, Vignettes Picasa, affiche les vignettes d'un album Picasa ou les dernières images ajoutées à un compte Picasa.



Pour insérer ce Gadget sur son Blog, il faut utiliser la technique décrite dans l'article du Blog d'Aide, qui permet d'insérer le Gadget dans le corps du message ou dans la colonne des gadgets. Le code html à insérer est un iframe. Pour le placer dans le corps du message, il suffit de copier le code en utilisant l'onglet Modifier le code HTML, pour l'insérer dans la colonne des gadgets, il faut copier le code dans un gadget HTML / Javascript.


Le code du iframe

Le code doit être saisi sans retour à la ligne.

<iframe style="width: 300px; height: 210px;"
src="http://www.gmodules.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-thumbnails.xml
&up_USR=utilisateur Picasa
&up_AID=identifiant album Picasa

Pour trouver ces 2 valeurs. ouvrir un album, et prendre l'URL qui est marquée RSS. L 'adresse indique clairement /user/ et /albumid/

&up_NBC=Nombre de vignettes à afficher (1 - 200)
&up_SIZE=Largeur des vignettes (32 à 160 pixels)

&up_SIZE=Hauteur des vignettes (32 à 160 pixels). Par défaut les vignettes sont à l'échelle de l'image originale (uncropped)

&up_SHA=Ombre portée (Yes - No)

&up_CLP=Ouvrir l'image sur un clic (Yes - No)

&up_URL=URL du lien sur le titre
&up_TITLE=Texte du titre

&up_LCOL=%23rrggbb couleur du lien
&up_BCOL=%23rrggbb couleur de la bordure
&up_BKCOL=%23rrggbb couleur du fond
&up_CCOL=%23rrggbb couleur du conteneur"
allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Vignettes Picasa</iframe>

Les paramètres

Dimensions du gadget : à ajuster en fonction du nombre de vignettes à afficher.

Utilisateur et identifiant de l'album : pour obtenir le nom d'utilisateur et l'identifiant de l'album, ouvrir l'album Picasa. Rechercher le lien RSS (colonne de droite, une fois l'album Picasa ouvert). Celui-ci est de cette forme :

http://picasaweb.google.com/data/feed/base/user
/utilisateur Picasa
/albumid/identifiant album Picasa
?alt=rss&kind=photo&hl=fr

Couleurs : utiliser le code couleur rrggbb.


Des exemples

L'album Picasa Clos Domaines et Châteaux - La noblesse des vins suisses, affiché en utilisant le code suivant : (à saisir sans espaces ni retours à la ligne)

<iframe style="width: 305px; height: 385px;" src="http://www.gmodules.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file
/108621208120033273647/picasa-thumbnails.xml
&up_USR=philippe.chappuis
&up_AID=5297196325809923457
&up_NBC=20
&up_SIZE=72
&up_SHA=Y
&up_CLP=Y
&up_URL=http://www.c-d-c.ch
&up_TITLE=Clos+Domaines+et+Châteaux
&up_LCOL=%23558866
&up_BCOL=%23558866
&up_BKCOL=%23eeeecc
&up_CCOL=%23eeeecc"
allowTransparency="true" frameborder="0"
scrolling="no">Gadget Google - Vignettes Picasa - Album Clos Domaines et Châteaux</iframe>

Les 30 dernières images ajoutées à mon compte Picasa : 




Plus d'informations

Afficher les vignettes d'un album Picasa avec un Gadget Blogger.

Utiliser un script ou un iframe pour afficher les vignettes d'un Album Picasa sur son Blog.

Avec un Gadget Google, afficher les vignettes d'un ensemble de photos (Photostream) Flickr sur son Blog.

Afficher les vignettes d'un ensemble de photos (Photostream) Flickr sur son Blog, avec un Gadget Blogger.

Placer un Diaporama de Picasa sur son Blog, en utilisant un code iframe.

Un gadget Google pour afficher des photos en accordéon dans une galerie horizontale.

Une video : Sauvegarde et partage de photos sur Internet.

Le Flux Media RSS pour afficher un Diaporama (anglais).

Jouer un fichier *.mp3 sur son Blog

Jouer un Mp3 sur son Blog

Pour insérer un son sur son Blog, il faut un lecteur Flash qui joue le fichier *.mp3. Il faut donc héberger un lecteur Flash en plus des fichiers *.mp3.
Pour mémoire, Blogger n'offre pas d'hébergement de fichiers.

L'hébergement gratuit

Google Sites autorise l'hébergement (gratuit) de fichiers Flash (*.mp3) ainsi que de fichiers son (*.mp3). La limite d'un compte gratuit est de 100 Mégas. Les fichiers doivent être téléchargés dans une Page Classeur (File Cabinet). Une restriction cependant, les fichiers doivent être utilisés sur un Blog hébergé sur un Domaine Internet Google (Blogger).

Les lecteurs Dewplayer

Alsacréations a développé plusieurs lecteurs Flash.
Le fichier *.zip disponible en téléchargement contient tous les modèles, pour utiliser le modèle Classic par exemple, il suffit d'insérer le code suivant dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) : 

<object type="application/x-shockwave-flash"
data="http://URL/dewplayer.swf"
width="220" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="http://URL/dewplayer.swf" />
<param name="flashvars" value="mp3=http://URL/son.mp3" />
</object>

Le résultat (Carl Orff, Carmina Burana, O Fortuna) : 





Le lecteur audio de Google

C'est le lecteur intégré dans Google Mail : 

http://mail.google.com/mail/html/audio.swf

Pour l'utiliser, il suffit d'insérer le code suivant dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) : 

<object data="http://mail.google.com/mail/html/audio.swf?audioUrl=http://URL/son.mp3"
width="220" height="25" type="application/x-shockwave-flash">
<param value="transparent" name="wmode"/>
<param value="http://mail.google.com/mail/html/audio.swf?audioUrl=http://URL/son.mp3"
name="movie"/>
</object>

Le résultat (Bach BWV 243, Gloria Patri) : 




Le lecteur multi-média de Google

Le lecteur multi-média de Google Reader est disponible à l'adresse suivante : 

http://www.google.com/reader/ui/3523697345-audio-player.swf

Pour l'utiliser, nous allons l'appeler avec un Gadget Google, selon la technique décrite dans le Blog d'Aide pour Blogger, en utilisant le Gadget suivant : 



google-audio_player.xml

Le code du iframe à saisir dans le html d'un message ou dans un Gadget Html / Javascript (à saisir sans retour à la ligne) : 

<iframe src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/google-audio_player.xml
&up_File=http://URL/son.mp3
&up_Backcol=%23eeeecc
&up_FlashWidth=400&up_FlashHeight=27"
width="410" height="37" allowTransparency="true" frameborder="0" scrolling="no">Un gadget Google appelé par iframe</iframe>

Le résultat (Mozart, Requiem Dies Irae) : 





Plus d'informations

Podcasting et fichiers joints sur Blogger

Des Gadgets Google pour son Blog

Le mini lecteur Deezer sur son Blog

Un Gadget Google pour ajouter le lecteur Flash d'ODEO

Des lecteurs multi-média pour son Site ou son Blog (anglais)

Sonoriser ses images avec Dewplayer

Une Playlist sur son Site ou son Blog (anglais)

Trucs et astuces pour Google Sites (anglais)

 

Lire la Suite... suite

Un cadeau pour les 10 ans de Blogger

Intégrer le mécanisme Lire la Suite demandait plusieurs modifications importantes du modèle.

Blogger vient d'intégrer ce mécanisme dans l'éditeur de message.


Pour activer l'insertion d'un saut

- Utiliser Blogger in Draft ou avec la version classique de Blogger, le nouvel éditeur : Outil / Insérer un saut

- Plus simplement, avec l'onglet Modifier le code HTML, il suffit d'insérer le commentaire HTML

<!-- more -->

Pour définir le texte du saut

- Paramètres / Mise en page / Eléments de la page

- Messages du Blog / Modifier

Texte du lien de la page de messages

Problème connu

Depuis janvier 2010, les insertions d'objets Flash (code embed / object) placées avant le "lire la suite..." ne sont pas affichées, dans la version courte du message.

S'agissant de Youtube, il est possible d'utiliser un gadget ou, plus simplement de remplacer le code fournit par YouTube par un tag iframe (à insérer dans le html du message).

Le code fournit par YouTube :

<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/fWtF4RasjeY&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fWtF4RasjeY&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>

Le même code dans un iframe :

<iframe src="http://www.youtube.com/v/fWtF4RasjeY&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b" style="320px; height: 265px;" allowTransparency="true" frameborder="0" scrolling="no">Remplacer le code object par un iframe</iframe>

Plus d'informations

- L'article de l'aide de Blogger

- Couper le message : les erreurs fréquentes