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.




2012/09/30

Les derniers messages d'un Blog, avec vignettes

Un Gadget Blogger pour afficher les derniers messages d'un Blog

Un Gadget pour afficher les derniers messages d'un Blog de Blogger. Affiche un titre, un sommaire et une vignette pour chaque message.



Le Gadget Blogger affiche un titre, le sommaire et une vignette pour chaque message du Blog. Le Blog doit être public et le flux des messages du Blog doit être sur Partiel ou Complet

Ajouter ce Gadget avec le bouton Add to Blogger : 

Add this Gadget to Blogger


Ajouter ce Gadget avec le formulaire personnalisé de Blogger : 


Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget : 

http://prac-gadget.googlecode.com/files/last-posts-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 messages d'un Blog

http://prac-gadget.googlecode.com/files/last-posts-b.xml


BID : L'identifiant du Blog

Pour obtenir l'identifiant du Blog, afficher la source du Blog et rechercher l'instruction : 

<link rel="service.post" type="application/atom+xml" title="Titre du Blog - Atom" href="http://www.blogger.com/feeds/30801821/posts/default" />

30801821 est l'identifiant du Blog.

NBP : Nombre de messages à afficher (1 - 20)
LEN : Longueur du texte à afficher (1 à 300)

LCOL : #rrggbb, couleur du lien
BTCOL : #rrggbb, couleur de la bordure des vignettes
BCOL : #rrggbb, couleur de la bordure du gadget
BKCOL : #rrggbb, couleur du fond des vignettes
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 width="580" height="800" frameborder="0" scrolling="no"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/last-posts.xml
&up_BID=30801821
&up_NBP=7
&up_LEN=210
&up_LCOL=%23cc0000
&up_BTCOL=%2322427c
&up_BCOL=%23cc0000
&up_BKCOL=%23c3d9ff
&up_CCOL=%23d1dae3"></iframe>



Des exemples

  • Les 7 derniers messages du Blog de Prac.

  • Les 7 derniers messages de Blogger-Code, le Blog de Soraya.



Plus d'informations

Les derniers messages d'un Blog avec un Gadget Google

Un Gadget Blogger pour afficher un diaporama des derniers messages d'un Blog

Un Gadget Blogger pour afficher les derniers commentaires d'un Blog

Partager ses abonnements de Google Reader

Les derniers Pins d'un compte Pinterest, avec vignette

Des Gadgets pour son Site ou son Blog

2012/09/28

Recadrer automatiquement les images du Blog

Recadrer automatiquement les images du Blog (crop)

Utiliser l'URL d'une image de Picasa Albums Web pour recadrer automatiquement une image



Les photos mises en ligne sur Blogger sont stockées dans Picasa Albums Web. Chaque blog contenant des photos dispose d'un album Web Picasa correspondant (portant le même nom) pour ces photos. Une petite icône orange Blogger figure sur la couverture de cet album. Nous allons voir comment utiliser l'URL fournie par Picasa Albums Web pour recadrer automatiquement une photo.

L'adresse URL d'une photo s'obtient en ouvrant la photo dans Picasa Albums Web, puis en recopiant le lien donné dans la colonne de droite (lien vers cette photo). C'est une adresse de ce type : 


https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s800/navette-atlantis.jpg



Le répertoire sxx, ici s800 est la taille de la plus grande dimension de l'image. Blogger fournit automatiquement une taille en fonction de l'espace disponible sur le blog et du choix indiqué lors de l'insertion de l'image (petit, moyen ou grand).

Taille d'image sans déformation

La valeur du répertoire sxx peut varier de 0 à 1600 pixels. s0 donne l'image originale. Affichons notre image en 72 pixels de large (vignette - thumbnail) puis en 220 pixels de large.


Vignette de 72 pixels

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s72/navette-atlantis.jpg






Image de 220 pixels

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s220/navette-atlantis.jpg





Paramètre -d

En ajoutant -d, l'URL ainsi créée permet le téléchargement de l'image, avec les informations Exif.


Adresse pour le téléchargement de l'image originale

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s0-d/navette-atlantis.jpg



Télécharger l'image originale


Paramètre -h

En ajoutant -h, l'URL ainsi créée est celle d'une page web. Blogger ajoute un script qui interdit l'insertion de cette page dans un cadre iframe.


Adresse d'une page web avec une image de 720 pixels de large

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s720-h/navette-atlantis.jpg





Paramètre -c

Le paramètre -c permet d'obtenir une image recadrée (croppée - to crop, recadrer). L'image est un carré centré sur l'image originale. Les proportions sont conservées.


Carré de 144 pixels de côtés

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s144-c/navette-atlantis.jpg








Image carrée de 220 pixels de côtés

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s220-c/navette-atlantis.jpg





Combiner les paramètres -c et -h

Les paramètres -c et -h peuvent être utilisés simultanément.


Carré de 320 pixels de côtés, affiché dans une page web

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s320-c-h/navette-atlantis.jpg





Plus d'informations

Picasa Albums Web

Un Gadget Blogger pour afficher les vignettes d'un Album Picasa

Un Gadget Blogger pour afficher un diaporama d'un Album Picasa

Un Gadget Google pour insérer une photo avec un cadre semi-transparent

2012/09/25

Un badge Google+ sur son Blog

Un badge Google+ sur son Blog


Afficher le badge Google+ de son profil sur son blog

Pour chaque profil Google+, il est possible de créer un badge, fourni par Google Sites. Ce badge peut être placé sur son Blog avec un tag iframe.


L'identifiant du Profil Google+

Dans Google+ ouvrir le Profil. L'adresse de la page est de cette forme : 


https://plus.google.com/115854656993758258488/posts

115854656993758258488 est l'identifiant du profil Google+




Le code à placer dans le HTML du Blog (un message ou un gadget html/javascript)


<div style="width: 325px; margin: auto;"><iframe style="width: 325px; height: 124px;" src="https://sites.google.com/c/widgets/ProfileCard?uid=115854656993758258488" allowTransparency="true" frameborder="0" scrolling="no"></iframe></div>




Des exemples




Plus d'informations

Les vignettes des profils et pages Google+ (GooglePlus) sur Blogger. Les explications de +Soraya Lambrechts

Des Gadgets Blogger pour Google+

Des Gadgets Google pour Google+

Des Gadgets pour son Site ou son Blog

2012/09/09

Les vignettes d'un album d'une Page Facebook

Un Gadget Blogger pour afficher les vignettes d'un album d'une page de Facebook

Les vignettes (130 x 86) d'un album public d'une Page de Facebook peuvent être ajoutée sur son Blog avec un Gadget Blogger



Si une Page de Facebook contient un ou plusieurs albums, les vignettes de ces albums peuvent être affichées sur son Blog.


L'identifiant de l'Album

Pour obtenir l'identifiant, ouvrir l'album Facebook, et copier l'adresse. Par exemple :


https://www.facebook.com/media/set/?set=a.229240080442617.65799.190160991017193&type=3

229240080442617 est l'identifiant de l'Album.

Important : Le Gadget ne peut être utilisé que pour un Album public, d'une Page Facebook.



Ajouter ce Gadget à Blogger

Gadget Blogger - Vignettes Facebook

Ajouter ce Gadget avec le bouton Add to Blogger : 

Add this Gadget to Blogger


Ajouter ce Gadget avec le formulaire personnalisé de Blogger : 


Mise en page / Ajouter un gadget...
Personnalisés / Saisissez l'URL du gadget : 

http://prac-gadget.googlecode.com/files/facebook-thumbnails-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, Vignettes Facebook

http://prac-gadget.googlecode.com/files/facebook-thumbnails-b.xml


ID : Identifiant de l'Album Facebook

NBC : Nombre de vignettes à afficher (1 - 200)

SHA: Vignettes avec ombre portée (Yes ou No)
CLP : Clic sur image, pour accès à l'image originale sur Facebook (Yes ou No)

URL : Lien sur le titre de l'Album
TIT : Titre de l'Album

LCOL : #rrggbb, couleur du lien
BCOL : #rrggbb, couleur de la bordure
BKCOL : #rrggbb, couleur du fond des vignettes
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 width="500" height="880" frameborder="0" scrolling="no"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/facebook-thumbnails.xml
&up_ID=229240080442617
&up_NBC=29
&up_SHA=Yes
&up_CLP=Yes
&up_URL=http://www.montdor.ch
&up_TIT=Domaine du Mont d'Or
&up_LCOL=%23cc0000
&up_BCOL=%23cc0000
&up_BKCOL=%23c3d9ff
&up_CCOL=%23d1dae3"></iframe>



Le résultat

Les vignettes de l'album l'été au Domaine du Mont d'Or. Vignettes avec ombre portées.




Versions et mentions légales

Gadgets fournis par Google.


Plus d'informations

Les vignettes d'un Album Facebook avec un Gadget Google

Les vignettes d'un Album Facebook sur sa page Google Sites

Insérer une vidéo de Facebook sur son Blog

Les vignettes d'un Album de Picasa

Les vignettes d'un Album de Flickr

Les vignettes d'un Flux Media RSS de Photobucket

Les vignettes de Pinterest

Des Gadgets pour son Site ou son Blog


Rechercher sur le Blog de Prac avec Google CSE