Intégrer une gallerie Flickr sur votre site

Vous possédez un compte flickr et vous voudriez bien ajouter une petite gallerie sur votre site, que ce soit dans la sidebar ou carrément dans un article, voici comment vous pouvez procéder.

Tout d’abord, il suffit de se connecter à son compte flickr puis d’aller à cette adresse (ne cherchez pas, je n’arrive plus a mettre la main sur le chemin complet pour y accéder).

Ensuite, Flickr vous propose deux types de modules. Le premier étant en pure HTML, ce qui vous permet de proposer le contenu à tous vos visiteurs, le deuxième étant en Flash et permet donc plus d’animations, mais n’est pas compatible avec tout les navigateurs (par exemple les iPhone n’ont pas le flash).

Vous pouvez ensuite choisir le type de contenu qui sera affiché. C’est à dire, vos photos, en fonction d’un albums/tag ou non (cela implique alors toutes vos photos publiques), d’un groupe dont vous êtes membre (selectionnés via un tag où non) où encore de toutes les photos publiques (selectionnés via un tag où non)

Une fois ce choix effectué, il vous suffit ensuite de configurer l’affichage de votre “badge”. Le mode HTML permet plus de flexibilité, c’est pourquoi je vous montre comment le paramétrer:

Une fois cette selection effectuée, vous allez enfin pouvoir choisir les paramètres d’affichage pour une meilleure intégration à votre site. Et la dernière étape vous permet d’obtenir le code à insérer dans votre sidebar/page.

Cela devrais ressembler à quelque chose de ce type :

<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_uber_wrapper {width:150px;}
#flickr_www {display:block; text-align:center; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#0063dc;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=v&source=user_set&user=27703312%40N07&set=72157606024367814&context=in%2Fset-72157606024367814%2F"></script>
<tr>
<td id="flickr_badge_source" valign="center" align="center">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/zen-dreams/sets/72157606024367814/"><img id="flickr_badge_icon" alt="zen.dreams Food photoset" src="http://farm4.static.flickr.com/3051/buddyicons/27703312@N07.jpg?1215421268#27703312@N07" align="left" width="48" height="48"></a></td>
<td id="flickr_badge_source_txt">zen.dreams <a href="http://www.flickr.com/photos/zen-dreams/sets/72157606024367814/">Food</a> photoset</td>
</tr></table>
</td>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->