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/11/16

Les derniers Pins de Pinterest sur son Blog

Un Gadget Blogger pour afficher les derniers Pins d'un compte ou d'un tableau de Pinterest


Les deux widgets de Pinterest (Profile Widget et Board Widget) réunis dans un seul Gadget Blogger. Affiche les derniers Pins sur son Blog


Lors du lancement des outils pour les entreprises (novembre 2012), Pinterest propose deux nouveaux Widgets Profile Widget et Board Widget.

C'est la version Pinterest du gadget des vignettes de Pinterest, en version Gadget Blogger ou en version Gadget Google. La version personnalisée de ces Gadgets autorise davantage d'options (couleurs, action sur clic, liens, nombre de vignettes) que la version officielle.


Identifier un tableau (Board) de Pinterest

Ouvrir un tableau (board) de Pinterest, et copier l'adresse. Par exemple :


http://pinterest.com/prac53/geek/

prac53 est le nom du compte.

geek est le nom du tableau.



Ajouter ce Gadget à Blogger

Gadget Blogger - Les derniers Pins de Pinterest

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/pinterest-widget-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

http://prac-gadget.googlecode.com/files/pinterest-widget-b.xml


USER : Le nom du compte Pinterest
BOARD : Le nom du tableau Pinterest. Facultatif, s'il ne figure pas, le Gadget affiche les derniers Pins du compte

TWI : La largeur d'une vignette (60 - 240), en pixels

THE : La hauteur maximum d'une vignette (60 - 1200), en pixels

NBC : Nombre de vignettes à afficher par ligne(1 - 6)

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="560" height="680" frameborder="0" scrolling="no"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/pinterest-widget.xml
&up_USER=prac53
&up_BOARD=geek
&up_TWI=120
&up_THE=480
&up_NBC=1
&up_CCOL=%23f6f6f6"></iframe>



Le résultat

Les derniers Pins de mon compte Pinterest.




Les derniers Pins du tableau de +Tomate Joyeuse, Tout Pinterest en Français.




Les derniers Pins du Blog de Soraya.




Versions et mentions légales

Gadgets fournis par Google.


Plus d'informations


Les vignettes de Pinterest avec un Gadget Blogger personnalisé

Les derniers Pins de Pinterest avec un Gadget Google

Un diaporama des derniers Pins de Pinterest

Les derniers Pins d'un compte Pinterest, avec vignette

Suivre les Pins de son site sur Pinterest

Les derniers Pins de Pinterest sur sa page Google Sites

Les vignettes d'une page de Facebook

Les vignettes d'un Album de Picasa

Les vignettes d'un Album de Flickr

Les vignettes d'un Flux Media RSS de Photobucket

Des Gadgets pour son Site ou son Blog

2012/11/06

Timeline de Twitter

Afficher une Timeline de Twitter sur son Blog

Twitter demande de 1 à 5 Domaines Internet qui peuvent afficher la Timeline. Pour blogspot.com il vaut mieux utiliser un tag iframe pour insérer une page html hébergée sur un Domaine privé



La Timeline de Twitter est définie sur Twitter et n'est valable que pour 1 à 5 Domaines Internet. A moins d'éliminer la redirection de Blogger, il n'est pas possible de définir blogspot.com comme Domaine Internet qui héberge la Timeline.

Timeline Twitter - @prac53


J ai donc utilisé mon Domaine, Les Liens du Vin pour héberger ma Timeline. Pour l'insérer sur mon Blog, il suffit de placer la page html dans un tag iframe.



Mise à jour : hébergement sur Google Drive

Depuis février 2013, Google Drive autorise l'hébergement de fichier html, devenant ainsi, de facto, un hébergeur Internet gratuit.
Pour utiliser cette nouvelle fonctionnalité, il faut renseigner la rubrique Domaines du gadget Timeline et mettre : googledrive.com comme nom de domaine.
Sur Google Drive, j'ai placé dans un répertoire en accès public, un fichier html contenant la Timeline.



Plus d'informations

Le guide de Twitter pour insérer une Timeline

Insérer un Badge de Twitter sur Google Sites

2012/10/11

Les vignettes d'un compte ou d'un tableau Pinterest

Un Gadget Blogger pour afficher les vignettes d'un compte ou d'un tableau Pinterest

Les vignettes (hauteur 90 pixels) d'un compte ou d'un tableau de Pinterest. Le Gadget Blogger pour ajouter les Pins de Pinterest sur son Blog



Le Gadget Blogger proposé permet d'afficher les vignettes des Pins d'un compte ou d'un tableau de Pinterest. Il permet de réaliser une planche-contact de ses photos placées sur Pinterest.


Identifier un tableau (Board) de Pinterest

Ouvrir un tableau (board) de Pinterest, et copier l'adresse. Par exemple :


http://pinterest.com/prac53/geek/

prac53 est le nom du compte.

geek est le nom du tableau.



Ajouter ce Gadget à Blogger

Gadget Blogger - Vignettes Pinterest

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/pinterest-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 Pinterest

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


USER : Le nom du compte Pinterest
BOARD : Le nom du tableau Pinterest. Facultatif, s'il ne figure pas, le Gadget affiche les vignettes du compte

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

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

URL : Lien sur le titre
TIT : Titre du Gadget

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/pinterest-thumbnails.xml
&up_USER=prac53
&up_BOARD=geek
&up_NBC=12
&up_SHA=Yes
&up_CLP=Yes
&up_URL=http://pinterest.com/prac53/geek/
&up_TIT=Pinterest - Geek
&up_LCOL=%23cc0000
&up_BCOL=%23de7109
&up_BKCOL=%23f2e9ca
&up_CCOL=%23f6f6f6"></iframe>



Le résultat

Les 12 dernières vignettes de mon tableau Geek, affichage avec ombre portée.




Les 9 dernières vignettes du tableau de Tomate Joyeuse, Tout Pinterest en Français, affichage avec ombre portée.




Les 9 dernières vignettes du tableau des développements de Blogger Code du Blog de Soraya. Vignettes sans ombre portée.




Versions et mentions légales

Gadgets fournis par Google.


Plus d'informations


Les vignettes de Pinterest avec un Gadget Google

Un diaporama des derniers Pins de Pinterest

Les derniers Pins d'un compte Pinterest, avec vignette

Suivre les Pins de son site sur Pinterest

Les vignettes de Pinterest sur sa page Google Sites

Les vignettes d'une page de Facebook

Les vignettes d'un Album de Picasa

Les vignettes d'un Album de Flickr

Les vignettes d'un Flux Media RSS de Photobucket

Des Gadgets Blogger pour vos Albums de Google+

Des Gadgets pour son Site ou son Blog

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

2012/08/26

L'aperçu d'un livre de Google Livres sur son Blog


Google Livres - Aperçu - Un Gadget Google

Un Gadget Google pour afficher l'aperçu d'un livre de Google Livres sur son Blog.

 Google Livres permet de parcourir une base de données de plusieurs millions de livres. Google permet d'afficher l'aperçu d'un livre, en utilisant les API de google Books. Le Gadget Google permet l'ajout d'un aperçu en quelques clics.
L'aperçu permet de visualiser le livre en texte intégral ou de parcourir les premières pages. Il dispose d'une recherche interne et d'outils de zoom.

L'URL du Gadget

Gadget Google - Aperçu Google Livres
preview-books.xml


Ajouter le Gadget sur son Blog

Le Gadget peut être ajouté en utilisant le code iframe du Gadget. Le code ci-dessous doit être collé sans espaces ni retour à la ligne, soit dans un Gadget HTML / Javascript, soit directement dans le HTML d'un message. Les paramètres du Gadget sont indiqués en rouge.


<iframe style="width: 600px; height: 490px;"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/preview-books.xml
&up_ID=z2kVAAAAYAAJ
&up_LAN=French - fr
&up_PWH=580
&up_PHT=460
&up_CCOL=%23f6f6f6"
allowTransparency="true" frameborder="0" scrolling="no">
Gadget Google - Aperçu Google Livres - http://www.liens-du-vin.ch/google-livre-apercu.htm</iframe>



L'identifiant du livre


ISBN, le numéro international normalisé du livre (International Standard Book Number). Les 10 ou 13 chiffres du code EAN. Par exemple ISBN:0738531367.

Numéro OCLC, le numéro unique attribué à un livre par l'OCLC lorsque le livre est catalogué sur WorldCat. Par exemple OCLC:70850767.

LCCN, le numéro de contrôle de la Bibliothèque du Congrès (Library of Congress Control Number). Par exemple LCCN:2006921508.

Identifiant Google Livres, l'identifiant unique attribué au livre par Google Livres. Par example, Py8u3Obs4f4C.

URL de l'aperçu Google Livres, c'est l'adresse internet qui ouvre l'aperçu du livre sur Google Livres. Par exemple http://books.google.com/books?id=Py8u3Obs4f4C&printsec=frontcove.



Les paramètres du Gadget


ID : identifiant du livre

PWH : largeur de l'aperçu en pixels
PHT : hauteur de l'aperçu en pixels

LAN : langue de l'interface

CCOL : #rrggbb couleur du conteneur ou transparent



Des exemples

Le livre Mountain View, images de l'amérique au début du XXe siècle.


Le livre Pensées de Pascal




Mentions légales

Gadget fourni par Google
Utilisation des ouvrages relevant du domaine public

Plus d'informations

Afficher une feuille Excel sur son Blog
Le lecteur de documents de Google Documents
Google Drive et Blogger - Améliorer son Blog
Fichiers joints et Podcasting avec Blogger
Webdoc - Partagez vos passions autrement

2012/05/27

Le Gadget Recent Comments (commentaires récents)

La version anglaise du Gadget Commentaires récents (Recent Comments)

La version anglaise du Gadget Commentaires récents (Recent Comments). Une nouvelle version du Gadget de bloggerbuster (Amanda), sans le problème des caractères spéciaux



La version la plus connue de ce Gadget Blogger est le Gadget de bloggerbuster (Amanda). Malheureusement ce gadget ne traduit pas les entités html (&#39; ou &nbsp;).

Pour corriger ce problème, la méthode classique consiste à créer un script prototype dans le javascript du gadget : 


String.prototype.unescapeHtml = function ()
{
var temp = document.createElement("div");
temp.innerHTML = this;
var resu = temp.childNodes[0].nodeValue;
temp.removeChild(temp.firstChild);
return resu;
}



L'appel à cette fonction permet d'éliminer les caractères saisis comme entité html : 


postcontent=postcontent.unescapeHtml()



J'ai réalisé une nouvelle version de ce gadget, qui reprend les fonctionnalités et les paramètres de la version française.

Ajouter ce Gadget à Blogger

Gagdet Blogger - Recent Comments

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/recent-comments.xml



Paramètres du Gadget


Gadget Blogger, Recent Comments

http://prac-gadget.googlecode.com/files/recent-comments.xml


BLOG : Name of Blog, for example viti-vino.blogspot.com.

NBC : Number of comments to display (1 - 20)

MAX : Length of text to display (50 - 500)

DATE : Display date (Yes - No)

TBLOG : Display title of Blog (Yes or No)

TITLE : Display title of Posts (Yes or No)

AUTHOR : Display Author (Yes or No)

TOP : Open links within the same window (Yes - No)

ALG : Text-align (left or justify)

SIZE : Size of font (85 %)

LCOL : #rrggbb, color of links

TCOL : #rrggbb, color of text

BCOL : #rrggbb, color of background




Versions et mentions légales

Gadgets fournis par Google.


Plus d'informations

Commentaires récents - version française

Un Gadget Google pour partager ses abonnements de Google Reader

Des Gadgets pour son Blog

Afficher un diaporama avec les derniers messages d'un Blog

2012/04/26

Google Drive et Blogger - Améliorer son Blog


Google Drive et Blogger - Améliorer son Blog

Google Drive peut être utilisé comme un véritable hébergeur Internet. L 'espace de stockage gratuit de 5 Giga autorise l'hébergement de pages html, de feuilles de style, de fichiers son ou d'animations Flash.

Google Drive permet le stockage gratuit jusqu'à 5 Giga. Une petite astuce d'adressage permet de disposer de cet espace de stockage comme un hébergement internet. Nous allons en profiter pour améliorer notre Blog.

Google Drive - Blogger


Intégrer sur son Blog une page html hébergée sur Google Drive

A titre d'exemple, j'ai copié la page Diaporama des Premiers Grands Crus Vaudois, hébergée sur mon site Les Liens du Vin, sur Google Drive.
Une fois le document partagé et rendu public, Google Drive nous donne l'adresse suivante comme lien de partage (lien aperçu de l'affichage) : 


https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/diapo-grand-cru.htm



Cette URL peut être utilisée comme lien, Le Diaporama des Premiers Grands Crus vaudois, ou comme adresse source pour l'intégration de la page sur le Blog.

Le code d'intégration, avec un tag iframe : 


<iframe src="https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/diapo-grand-cru.htm" style="width:100%; height: 340px;" allowTransparency="true" frameborder="0" scrolling="no"></iframe>



Les Premiers Grands Crus des Clos Domaines et Châteaux

© Photos : Régis Colombo et Clos Domaines et Châteaux


Feuille de style pour un seul message

Pour une mise en page particulière, une feuille de style peut être hébergée sur Google Documents. Pour qu'elle s'applique à l'ensemble du Blog il faut placer cette instruction avant </head> : 


<link rel="stylesheet" type="text/css" href="URL feuille de style" />



Pour appliquer un style particulier à un seul message, il est possible de placer le style entre les 2 balises <style> et </style> dans le html du message. Si la feuille de style est de grande taille ou utilisée à plusieurs endroits sur le Blog, il peut être intéressant de l'héberger sur Google Drive et de la charger dynamiquement lors de l'affichage de la page concernée.
Il suffit de placer ce petit script dans le html du message : 


<script> var cssNode = document.createElement('link');
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "URL feuille de style";
cssNode.media = "screen";
document.getElementsByTagName("head")[0].appendChild(cssNode);
</script>



Pour obtenir l'URL, nous effectuons les mêmes transformations que ci-dessus, sur l'URL fournie par Google Documents : 


https://docs.google.com/open?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg

https://docs.google.com/uc?id=0B4yfJJJSNrfuNVFYVWl3MGtFNjg



La feuille test_style.css devient accessible et peut être utilisée sur le Blog.

A titre d'exemple, cette feuille de style est utilisée pour mettre en forme la liste ci-dessous : 

Quelques services Google


Les fichiers son (*.mp3)

Google Documents accepte les fichiers *.mp3. En effectuant le changement d'URL, le fichier devient lisible par un lecteur standard. J'ai utilisé le lecteur mp3 de Google Mail pour jouer un extrait du Gloria Patri de Jean-Sébastien Bach.


https://docs.google.com/open?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0

https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0



Le Gadget Google est inséré dans le html du message avec un tag iframe : 


<iframe style="width: 240px; height: 27px;"
src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml
&up_MP3=https://docs.google.com/uc?id=0B4yfJJJSNrfuMTc1ZDVlMjYtOTY3MS00NDY0LWE1NmEtOTIxYjYyMWQxZTU0
&up_START=No
&up_CCOL=%23f6f6f6"
allowTransparency="true"
frameborder="0"
scrolling="no">
</iframe>




Extrait J.S. Bach - Gloria Patri


Animation Flash

Un fichier Flash peut être hébergé sur Google Drive. A titre d'exemple, j'ai placé l'horloge Google et obtenu l'URL suivante : 


https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/GoogleClock.swf



Pour intégrer l'animation Flash dans un message, il suffit de placer les 2 scripts suivants dans le html du message : 


<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript">
var flashvars = { };
var params = { wmode: "transparent" };
var attributes = { id: "player_swf" };
swfobject.embedSWF("https://googledrive.com/host/0B4yfJJJSNrfuTW85OGxyaHdvYXM/GoogleClock.swf",
"player_content", "200", "200", "9.0.0", false, flashvars, params, attributes);
</script>



Le lecteur Flash sera placé entre les deux balises div, à ajouter dans le html du message : 


<div id="player_content"></div>





Mise à jour : hébergement sur Google Drive

Depuis février 2013, Google Drive autorise l'hébergement de fichier html, devenant ainsi, de facto, un hébergeur Internet gratuit. Il faut creéer un répertoire en accès public puis placer les fichiers html dans ce répertoire.
Le répertoire public peut contenir tous les fichiers nécessaires à l'affichage d'une page Internet, en plus des pages html  : script (*.js), images (*.png ou *.jpg), fichiers sons (*.mp3) ou animation flash (*.swf).

J ai par exemple placé cette mini page html sur Google Drive : Etiquette de vin. Elle peut être intégrée sur le Blog par un tag iframe : 





Plus d'informations

Google Drive

Afficher une feuille Excel sur son Blog avec Google Viewer

Le lecteur de documents de Google Documents

Insérer la Timeline de Twitter sur son Blog

Les lecteurs MP3 de Google

Nivo Slider - Comment insérer un diaporama en utilisant Google Drive

Cloud Carousel - Comment insérer un carousel d'images en utilisant Google Drive

Insérer des Gadgets de iGoogle sur son Site

2012/04/09

Suivre les Pins de son site sur Pinterest


Pinterest conserve le site à l'origine du Pin. Ainsi, les Pins de ce Blog se trouvent à cette adresse


http://www.pinterest.com/source/viti-vino.blogspot.com


Pour un site, l'adresse des Pins est :


http://www.pinterest.com/source/liens-du-vin.ch


Pinterest - www.liens-du-vin.ch


Créer un Flux RSS



Mise à jour : 2013.01.01. feed43 ne peut plus être utilisé pour créer un Flux RSS. Pinterest impose d'être enregistré pour afficher la source. L'URL http://www.pinterest.com/source/NOMDUSITE est redirigée vers la page de loggin. L'auteur de l'article original propose d'utiliser un tableau de bord de ViralContentBuzz pour suivre ses Pins



Nous pouvons utiliser le Flux RSS de cette adresse pour suivre les Pins de ce site sur Pinterest.

feed43 permet de créer un Flux RSS à partir d'une adresse URL.

Pour créer un nouveau flux, spécifier l'adresse de la page à convertir : 

feed43 - URL à convertir


Nous allons extraire dans chaque message du Flux RSS, l'identifiant du Pin, le commentaire, le lien vers l'auteur du Pin et son nom.

feed43 - zones à extraire


Les zones à extraire sont marquées par {%}. Le symbole {*} indique que nous voulons extraire ces zones dans tous les Pins. Les zones ainsi définies sont utilisables en indiquant leur numéro d'ordre, soit {%1}, {%2}, ...


<a href="http://pinterest.com/pin/{%}" class="PinImage ImgLink">{*}
<p class="description">{%}</p>{*}
<a href="{%}" title="{%}" class="ImgLink">{*}



Nous allons utiliser ces zones pour définir les propriétés d'un article du Flux : 

Feed43 - Propiétés d'un article du Flux


Les zones retenues permettent de définir : 


Le titre de l'article : {%2}
Le lien vers le Pin : {%1}
Le lien vers l'auteur du Pin : {%3}
Le nom de l'auteur du Pin : {%4}



Ces données une fois saisies, nous obtenons le Flux RSS des Pins réalisés depuis un site donné : 

Feed43 - Flux RSS


Utiliser le Flux RSS

Une fois le Flux créé sur feed43, il est recommandé de renommer le flux. Par exemple, le Flux RSS des Pins réalisés sur mon site Les Liens du Vin :  http://feed43.com/liens-du-vin.xml.

Le Flux peut être utilisé avec Google Reader ou affiché sur un Blog avec le Gadget Flux : 

Gadget Blogger - Flux


J'ai utilisé le Flux créé ci-dessus, avec un Gadget Google comme lecteur de Flux : 




En savoir plus

L'article original, sur Mashable

Video : L'intérêt et le fonctionnement des Flux RSS

Le bouton Pin-It de Pinterest, sur le Blog de Soraya

Tout Pinterest en français. Les Pins de Tomate Joyeuse

Un Gadget Google pour insérer un Flux RSS sur son Site ou son Blog

Un diaporama avec les derniers posts de Pinterest

Les derniers Pins d'un compte Pinterest, avec vignette

Les vignettes de Pinterest

2012/02/26

Un Diaporama avec les derniers posts de Pinterest

Gadget Blogger pour afficher un Diaporama avec les derniers posts de Pinterest

Deux Gadgets Blogger pour afficher un Diaporama de Pinterest (derniers posts) sur son Blog. Possibilité de n'afficher que les images d'un tableau (Board).

Deux Gadgets Blogger pour afficher un Diaporama de Pinterest sur son Blog. Avec ces deux gadgets nous pouvons restreindre l'affichage à un seul tableau (board) de Pinterest. Ces gadgets utilisent le Flux Media RSS fourni par Pinterest. Cet hébergeur fournit un flux pour les dernières Images d'un utilisateur ou les dernières images d'un seul tableau (board).

Les deux variantes du Gadget

  • Sans titre

Gadget Blogger - Diaporama Pinterestpinterest-slideshow-simple-b.xml

Ajouter ce Gadget à Blogger


  • Avec un titre et les légendes des photos

Gadget Blogger - Diaporama Pinterestpinterest-slideshow-b.xml

Ajouter ce Gadget à Blogger



Ajouter le Gadget sur son Blog

Soit avec le bouton Add to Blogger, soit par Présentation / Ajouter un gadget. Choisir ensuite Ajouter votre propre (Gadget). Saisir l'URL du gadget à ajouter :

Sans titre

http://prac-gadget.googlecode.com/files/pinterest-slideshow-simple-b.xml

Avec titre et légendes

http://prac-gadget.googlecode.com/files/pinterest-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.


Les paramètres des Gadgets

  • Sans titre


USER : le nom de l'utilisateur Pinterest

BOARD : Le nom du tableau. Facultatif, si le paramètre n'est pas renseigné,
le diaporama affiche les dernières images de l'utilisateur

Pour obtenir le nom du tableau (board), clic sur Edit du tableau. Copier l'URL : 

http://pinterest.com/prac53/favorite-places-spaces/settings/

prac53 est le nom de l'utilisateur
favorite-places-spaces est le nom du tableau Favorite Places & Spaces

PWH : la largeur des images en pixels.
PHT : la hauteur des images en pixels.

Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.

DTime : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).
TTime : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).

RND : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).
CLP : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).

NAB : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).

SCOL : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.

BCOL : #rrggbb. La couleur de la bordure du diaporama.



  • Avec titre et légendes


USER : le nom de l'utilisateur Pinterest

BOARD : Le nom du tableau. Facultatif, si le paramètre n'est pas renseigné,
le diaporama affiche les dernières images de l'utilisateur

Pour obtenir le nom du tableau (board), clic sur Edit du tableau. Copier l'URL : 

http://pinterest.com/prac53/favorite-places-spaces/settings/

prac53 est le nom de l'utilisateur
favorite-places-spaces est le nom du tableau Favorite Places & Spaces

PWH : la largeur des images en pixels.
PHT : la hauteur des images en pixels.

Les images sont mises à l'échelle, sans déformation dans un rectangle PWH x PHT.

LNK : lien sur le titre du diaporama. Par défaut le titre n'est pas en zone chaude.
TIT : le titre du diaporama. Par défaut le titre du Flux Media RSS de Pinterest.

DTime : durée d'affichage, en millisecondes. De 1000 à 12000, par défaut 4000 (4 sec).
TTime : durée de la transition entre les images, en millisecondes. De 500 à 6000, par défaut 2000 (2 sec).

RND : affichage des images dans un ordre aléatoire. Yes ou No, par défaut No (non).
CLP : lors du clic sur l'image, affichage de l'image d'origine, dans une fenêtre indépendante. Yes ou No, par défaut No (non).

NAB : affichage de la barre de navigation. Yes ou No, par défaut Yes (oui).

SCOL : #rrggbb ou transparent. La couleur de fond du diaporama. Par défaut le Gadget prend la couleur définie dans le modèle du Blog.

BCOL : #rrggbb. La couleur de la bordure du diaporama.

TCOL : #rrggbb. La couleur du texte (titre et légendes). Par défaut la couleur définie dans le modèle du Blog.
LCOL : #rrggbb. La couleur du lien sur le titre. Par défaut la couleur définie dans le modèle du Blog.
CCOL : #rrggbb ou transparent. La couleur du conteneur. Par défaut le conteneur est transparent.




Les caractéristiques des gadgets

  • Affiche les images en format *.jpg, *.gif et *.png
  • Fond transparent ou couleurs à choix
  • Temps d'affichage modifiable
  • Ordre aléatoire des images en option
  • Suppression possible de la barre de navigation
  • Clic sur image désactivé par défaut
  • Affichage des légendes de chaque image (version avec titre)


Des exemples

J'ai utilisé, non pas un Gadget Blogger pour ces exemples, mais la version Gadget Google afin d'afficher le Diaporama dans le html de ce message.

  • Les dernières images de mon compte Pinterest. Diaporama avec titre et légendes des images.






Gadget Google ou Gadget Blogger

Un Gadget Google peut être placé dans un message du Blog. Un Gadget Blogger ne peut être inséré qu'aux endroits prévus à cet effet (colonnes, en-tête ou pied du Blog).


Plus d'informations

Insérer le bouton Pin-It de Pinterest. Les codes et toutes les explications sur Blog Connexion

Diaporama Pinterest avec un Gadget Google

Afficher un Diaporama de Pinterest sur Google Sites

Suivre les Pins de son Blog ou de son Site sur Pinterest

Diaporama des derniers messages avec un gadget Blogger

Gadget Blogger - Les vignettes de Pinterest

Les derniers Pins d'un compte Pinterest, avec vignette

Les vignettes d'un compte ou d'un tableau de Pinterest

Diaporama Picasa avec un Gadget Blogger

Diaporama Flickr avec un Gadget Blogger

Diaporama Photobucket avec un Gadget Blogger

Des Gadgets Blogger pour vos Albums de Google+

Créer un Diaporama à partir d'un Flux Média RSS

Afficher des Diaporamas sur Google Sites

Des Gadgets pour son Blog



Rechercher sur le Blog de Prac avec Google CSE