Comment afficher ses images flickr ?

Flickr est un site de partage de photos et vidéos crée par Ludicorp en 2004. Flickr est de la propriété de Yahoo. Wordpress offre la possibilité d’afficher sur votre site vos propres photos.
Dans ce post je vous expliquerai comment utiliser flickr sur votre site.

Pour la gestion flickr Dave Kellam et Papygeek.com ont crée un plugin wordpress: Flickr Related. En vous rendant sur la page de l’extension vous pourrez alors la télécharger. Une fois téléchargé et installé, rendez-vous sur le panneau d’administration du plugin :

fickr-wp-admin

Explications:

Dans User ID:

- Si vous le laissez vierge alors des photos publiques flickr prises au hasard apparaîtront sur votre site.

- En saisissant votre numero ID alors les photos de votre compte flickr seront affichées. (Si vous ne connaisez ou si vous n’avez pas de numéro ID alors allez plus bas).

Dans display vous pourrez choisir le nombre et la taille des photos ainsi que la privacy de vos photos.

Dans Tag vous pourrez insérer des mots-clés (pour les séparer mettez une virgule)

Dans before/after laissez le vierge.

Une fois que vous aurez rempli le FlickrRss Option, n’oubliez pas de cliquer sur Update FlickrRass

Dans Cache Settings vous pourrez choisir d’utiliser des photos mises sur votre server en cache.

Comment utiliser ses images flickr ?

Comme vous avez pu le remarquer il faut renseigner le champ User ID avec votre propre numéro pour afficher les photos de votre compte flickr.

Pour créer un compte flickr vous devrez au préalable avoir un compte mail yahoo.

Une fois votre compte mail yahoo crée alors vous pourrez créer votre compte Flickr.
Choississez votre pseudo Flickr et appuyez sur entrée.

Vous aurez des étapes à réaliser pour finaliser votre compte flickr notamment renseigner une url personnalisée de votre compte sous la forme (étape très importante pour l’attribution du numéro ID) :

http://www.flickr.com/photos/nom_de_votre_choix/

Une fois l’url choisie vous pourrez alors télécharger les photos de votre choix. Une fois que vos photos seront téléchargés alors vous pourrez insérer votre ID dans le panneau d’administration de FlickrRSS dans la case User ID. Si à ce stade vous ne savez toujours pas votre numéro ID alors allez sur idGettr.

Insérer alors le pseudo que vous avez choisi ci-dessus et placez le après http://www.flickr.com/photos/

Pour conclure allez à l’endroit où vous voulez qu’apparaisse le flickr et insérez la balise php suivante:

<?php get_flickrRSS(); ?>

Si vous voulez par exemple que le flickr soit visible dans la barre de menu comme sur PlaneteDuWeb alors placez la balise php dans le fichier sidebar.php de votre thème.

Un peu d’effet css

Normalement votre flickr fonctionne, cependant la présentation est brute. Afin de rendre plus esthétique le flickr je met à votre disposition le code permettant de reproduire l’effet de planete du web:

HTML:

<li><div id="flickr">
<div id="top_flickr"></div><!–close top flickr–>
<div class="titre_flickr"></div><!–close titre_flickr–>
<div id="content_flickr">
<div class="boximg"><span class="sb-flickr"><?php get_flickrRSS(); ?></span></div>
</div><!–close content flickr–>
<div id="bottom_flickr"></div><!–close bottom_flickr–>
</div><!–close flickr–></li>

CSS:

#top_flickr {
background-image:url(images/cadre_flickr.jpg);
background-repeat:no-repeat;
width:260px;
height:15px;
}
#content_flickr {
width:260px;
height:180px;
background-color:#FFF;
padding-top:10px;
}
#bottom_flickr {
background-image:url(images/cadre_flickr1.jpg);
background-repeat:no-repeat;
width:260px;
height:15px;
}
#flickr {
width:260px;
height:260px;
margin-left:10px;
margin-top:10px;
}
.titre_flickr {
background-image:url(images/flickr.png);
background-repeat:no-repeat;
width:260px;
height:40px;
}
.boximg{
width:261px;
height:150px;
}
.sb-flickr
{
padding: 0px;
text-indent: none;
list-style-type:none;
display:inline;
}
.sb-flickr a, li.sb-flickr a:hover, li.sb-flickr a:visited {
text-decoration: none;
border: none !important;
padding:0px;
background:transparent !important;
}
.sb-flickr a img {
border: 4px solid #000000;
margin: 0px 2px 2px 2px;
}
.sb-flickr a:hover img {
border: 4px solid #FFF;
margin: 0px 2px 2px 2px;
}

Point négatif du plugin Flickr Rss

Problème rencontré:

J’utilise le plugin dans la sidebar. Le flickr s’affiche sur toutes les pages qui contiennent la sidebar sauf sur la page single.php . Ce fichier est utilisé par wordpress lorsque que vous cliquez sur le titre d’un article pour lire la suite. A l’époque j’avais posté un message sur la communauté française de wordpress mais le problème n’a pas été résolu à ce jour.

Points positifs du Flickr

L’avantage le plus important est celui du référencement. En effet en publiant ses propres photos et en les partageant les photos peuvent être publiées sur un autre site. En insérant des mots-clés pour chaque photo (en rapport avec la photo bien entendu) je positionne les photos de mon site sur google image ce qui va permettre de générer de nouvelles visites.