Personnaliser le badge flickr: Documentation

07 avril 2009 ¤ Classé dans Geek ¤ Aucun Commentaire

Personnaliser le badge flickr gràce à ces quelques lignes d’explications et de documentation sur l’API Flickr.

Certaine personne trouve que le badge flick fournie ici est suffisant, moi je le trouve à chi*r. Après avoir cherché pas mal sur internet comment personnaliser mon badge de facon simple, je suis tombé sur ce billet qui m’a pas mal aidé, je me propose de traduire/adapter ici.

Inserer le script du badge Flickr

Tout commence toujours l’insertion de ce bout de code:

<script type="text/javascript"
src="http://www.flickr.com/badge_code_v2.gne?user=[The ID]">

Bien sur vous devez remplacer [The ID] par votre identifiant Flickr que vous pouvez obtenir grâce à The IDgettr. Il suffit ensuite de remplacer le @ par un %40.

Les paramètres javascript

Parametre	Type	Valeur	Definition
count	integer	entier entre 1 et 10.	Nombre de photos à afficher: 10 par defaut.
display	string	latest, random	Ce que le badge doit afficher: derniere ajout ou aléatoire? Lastest par defaut.
layout	string	h, v, x	Le sens d’affichage du badge: Horizontale, Verticale ou sans style. Horizontal par defaut.
source	string	user, user_tag, user_set, group, group_tag, all, all_tag	Source des photos. Apres avoir choisie vous devez declarer 2 autres parametres: le tag et/ou le ID du groupe ou album. Ce sont des string pour les tags, integer pour les groupes (trouvé l’ID grace à IDgettr) et integer pour les albums (ID present dans l’URL).
size	string	s, t, m	La taille de la photo. s pour le carré, t pour le thumbnail, et m pour medium. (Notez que la taille medium est en fait ce qui correspond au « small » lors que vous regardé le « zoom » ou“available sizes” sur une photo flickr.Thumbnail par defaut.

Quel code personnaliser?

Le script ainsi paramétré vous sortira un code HTML de cette allure.

<div id="flickr_badge_image1" class="flickr_badge_image">
  <a href="[the photo page]">
    <img title="[The photo's title]" src="[the url]" alt="A photo on Flickr" width="[xx]" height="[xx]" />
  </a></div>
<div id="flickr_badge_image2" class="flickr_badge_image">
  <a href="[the photo page]">
    <img title="[The photo's title]" src="[the url]" alt="A photo on Flickr" width="[xx]" height="[xx]" />
  </a></div>
<div id="flickr_badge_image3" class="flickr_badge_image">
  <a href="[the photo page]">
    <img title="[The photo's title]" src="[the url]" alt="A photo on Flickr" width="[xx]" height="[xx]" />
  </a></div>

Il vous suffit ensuite de faire le feuille de style CSS qui vous plait. Je reconnais que c’est assez long mais c’est essentiel. Il y a moyen de faire assez rapide: definissez toutes les images en float: left, une largeur et tous les padding à 0; cela peut simplement vous donner un carré de photo (ce que j’aime).