Galerie photos Flickr en PHP / HTML / CSS
Un petit script fait maison pour créer une galerie photos Flickr sur son site Web en PHP / HTML 5. Le script fonctionne avec l'API Flickr et il est très facile à mettre en place si vous avez des bases en PHP / HTML.
Utilisation de l'API Fllickr en PHP
Avant toute chose, vérifiez que vous pouvez faire des appels CURL sur votre serveur, c'est un module PHP. La plupart des serveurs mutualisés ou dédiés actuels ont ce module.
Les étapes à suivre pour mettre en place ce script sur votre site.
1 - Télécharger le script
Tous les fichiers HTML 5 et CSS se trouvent dans un dossier ZIP :
Télécharger le script "Galerie photos Fllickr"
2 - Création d'une application et récupération d'une clé pour utiliser l'API
Il vous faut bien évident un compte Flickr avant toute chose, la création du compte et la récupération d'une clé sont entièrement gratuites. La création de l'application se passe dans l'App Garden :
Après avoir rempli quelques champs, le service vous indiquera la clé à utiliser dans l'application.
3 - Récupérer son ID utilisateur sur Flickr
Pas forcément évident à trouver, tout en étant connecté à votre compte Flickr, l'identifiant se récupère dans l'outil de test de l'API, colonne de droite "Votre ID utilisateur" :
4 - Configurer le script PHP
|
Affichage des albums de votre compte Flickr Personnalisez les lignes 4 et 5 avec votre clé et user ID |
|
Affichage des photos d'un album Personnalisez les lignes 7 et 8 avec votre clé et user ID |
|
Feuille de styles CSS |
|
Librairie JQuery + Colorbox Script permettent d'agrandir les photos au clic |
Si besoin, vous pouvez faire de la réécriture d'URL avec un fichier ".htaccess", utile pour le référencement naturel.
5 - Adapté la taille des photos affichées
Le choix de la taille des vignettes dans chaque album s'effectue en fonction des URL appellées, il suffit d'indiquer les bons chemins de vos photos. La structure des liens Flickr est expliquée sur cette page :
Démo en ligne
Vous trouverez une application du script à cette adresse :











