Créer un badge Yahoo! Pipes

Qu'est ce que Yahoo! Pipes ?

Yahoo! Pipes est un outil génial vous permettant de triturer dans tous les sens les flux RSS. Nous avons déjà expliqué précédemment la procédure d'inscription sur Yahoo! Pipes et la façon de créer ou de cloner un Pipe ("tuyau") existant.
Il est aussi possible de récupérer un de vos Pipes Yahoo! pour l'afficher sur votre blog grâce à la fonctionnalité Pipes Badges.

Créer un badge Yahoo! Pipes

Il existe trois types de bages : carte, image et liste.
Les badges sous forme de cartes sont possibles si le flux RSS contient des données géolocalisées. La carte affichera les repères qui auront été définis et sera déplaçable à l'aide du curseur de la souris. Quand l'internaute cliquera sur un des repères, une info-bulle peut montrer un titre, une description et, éventuellement, des images.
Les badges sous forme d'images sont possibles dès que le flux RSS contient des images. Les miniatures des images seront affichées dans la partie du bas. Si le flux inclut une description, elle sera affichée quand vous survolerez l'image avec le curseur de la souris. Il est possible de paramétrer le délai d'exécution automatique ainsi que le nombre d'éléments visibles.
Les badges sous forme de listes sont possibles à partir du moment que le flux RSS contient des données compatibles. Si le flux contient des descriptions, des images ou/et des miniatures, elles seront intégrées au badge.
Un badge peut être ajouté à votre page iGoogle, sur votre blog dans Blogger (avec des réserves pour l'instant), sous Typepad ou, plus généralement, sur n'importe quelle page web supportant le Javascript. Afin de récupérer automatiquement le code correspondant, lancez le Pipe puis cliquez sur le lien Get as Badge. Cliquez ensuite sur le lien Embed puis copiez le code qui sera visible.
Il ressemblera à celui-ci :

<script src="http://pipes.yahoo.com/js/mapbadge.js">{"pipe_id":"d1fee3a5aa954ef75a8e31089708b9e1","_btype":"map","pipe_params":{"twitterId":"briankelly"}}</script>

Voici l'explication de la syntaxe utilisée :

<script src="http://pipes.yahoo.com/js/TYPE_DU_BADGE_ICI.js">
{
"pipe_id" : "8ne6mC_P3BG7soL0ODY80A" //ID_DU_PIPE_ICI.
}
</script>

Personnaliser votre badge Yahoo! Pipes

Le nombre d'éléments par défaut pour un badge de type "Liste" est de 25. Vous pouvez définir un autre ordre de grandeur en vous servant de la valeur Count. Par exemple :

"pipe_id":"1mrlkB232xGjJDdwXqIxGw",
"pipe_params":{"location":"palo alto, ca","what":"parks","mindist":"10"},
"count" : 10

Pour un badge de type "Carte", tous les éléments sont affichés par défaut. Là encore, servez-vous de la valeur Count pour restreindre le nombre d'éléments utilisés.

Un badge de type "Image" accepte ce type de valeurs :

defaults to: {maxitems:0, autoscroll:true, autoscrolldelay:5}

maxitems est le nombre d'éléments qui seront affichés. La valeur 0 indique que toutes les images seront visibles.
Autoscroll est, par défaut, sur la valeur "True" (activée).
Autoscrolldelay est, par défaut, de 5 secondes.
Voici un exemple de script :

"pipe_id" : "FBSVd9uT3BGRhnfjGcevXg",
"img_params" : {maxitems:10, autoscroll:true, autoscrolldelay:10}

Définir les propriétés de votre badge Yahoo! Pipes

Afin de personnaliser l'affichage de votre badge vous pouvez utiliser la balise DIV et lui assigner une classe.
Le badge va hériter des propriétés de la balise DIV parente. Toute propriété non héritée doit être modifiée à l'intérieur du script.
Voici la liste des propriétés qui sont toutes optionnelles :

• position: : position ;
• top: : haut ;
• left: gauche ;
• width: : largeur ;
• height: : hauteur (la valeur par défaut est de 300 pixels) ;
• backgroundColor: : couleur d'arrière-plan ;
• border: : bordure ;
• font: : police ;
• margin: marge ;
• padding: marge intérieure (séparant un élément de chacune de ses bordures) ;
• headlineColor: : couleur de l'en-tête ;
• headerBackgroundColor: : couleur d'arrière-plan de l'en-tête ;
• descriptionColor: : couleur du texte de description ;
• evenBackgroundColor: : couleur de remplissage des lignes impaires (valeur par défaut : #fff ) ;
• oddBackgroundColor: : couleur de remplissage des lignes paires (valeur par défaut : #f6f6f6).

Les valeurs doivent être encadrées par des guillemets.
Il y a sur cette page des exemples intéressants avec, à chaque fois, le code correspondant…
Cette page de documentation explore d'autres possibilités vous permettant de personnaliser votre badge Yahoo! Pipes.
Ce site spécialisé explique le fonctionnement de scripts utilisant Json.