Vous connaissez certainement Flickr, qui est le site de partage de photos le plus utilisé dans le monde.

Certains d'entre-nous envoient leurs photos sur leur compte Flickr, et si l'on possède aussi son propre site, il est un peu rébarbatif d'envoyer à nouveau ses images sur un autre serveur...

Je vais vous présenter ici une méthode qui vous permet de créer simplement votre propre site personnel, en flash, en y intégrant de manière automatique les photos que vous envoyez sur Flickr.

Si vous suivez les instructions données dans cet article :

- Vous allez avoir votre propre site, en flash, sans connaissance technique préalable.

- Les images de votre site seront automatiquement actualisées depuis votre compte Flickr.

Vous n'aurez donc absolument rien à faire pour mettre à jour votre site : tout sera automatisé.
Lorsque vous posterez une image sur votre compte Flickr (dans un album défini, nous verrons cela en détail plus bas), elle sera automatiquement publiée sur votre site.

Nous allons utiliser Simple Viewer et Flickr Viewer dans ce tutorial. Il s'agit de scripts distribués gratuitement.

Voici un exemple de site que j'ai créé avec cette méthode : Romanian Imagery



Ce site publie automatiquement les images de ce set de mon album Flickr, sans aucune intervention manuelle de ma part.

Prêt pour créer le votre ? C'est parti :


1°/ Trouvez un hébergeur

Pour héberger votre site, vous avez besoin d'un serveur.

Si vous souhaitez utiliser un hébergement gratuit, vous pouvez opter pour Free, en suivant les indications de cet article (Comment créer son site gratuitement chez free.fr).

Vous pouvez aussi opter pour un hébergment payant pour 10 ou 20€ par an, par exemple chez OVH, chez NFrance ou encore 1&1.

Attention : vous avez besoin que la fonction fopen soit activée sur votre serveur. Demandez impérativement à votre hébergeur si cette fonction est active sur l'hébergement que vous souhaitez prendre !
(si vous avez un hébergement gratuit sur Free, cette fonction est activée).

Je publierai bientôt un moyen de contourner ceci en modifiant le script, pour ceux qui n'ont pas fopen sur leur serveur (en utilisant cURL, pour ceux qui s'y connaissent).

Ce n'est pas la peine de prendre un hébergement avec base mysql : vous n'en aurez pas besoin dans le cas du site que nous allons créer.

Votre espace web est fonctionnel ? Alors continuons...


2°/ Equipez-vous de quelques logiciels gratuits

Nous allons avoir besoin de trois logiciels :

- Un éditeur de texte pour modifier certains fichiers du site.
Le bloc note de Windows fera tout à fait l'affaire, ou tout autre éditeur de texte de base que vous avez sur votre ordinateur.

- Un client FTP pour envoyer les fichiers sur votre serveur web.
Dans ce tutorial, nous allons utiliser Filezilla, qui est gratuit et simple à utiliser.

- Un logiciel pour créer votre logo, par exemple Gimp ou Inkscape.
Ce n'est pas indispensable, mais vous en aurez besoin si vous souhaitez créer un logo pour votre site.


3°/ Préparez les fichiers

1- Téléchargement des scripts

Nous allons télécharger les fichiers de SimpleViewer et de FlickrViewer, qui sont les scripts gratuits qui nous seront nécessaires :

Télécharger SimpleViewer 1.7
(attention, téléchargez bien cette version et pas une autre, sinon celà ne fonctionnera pas).

Télécharger FlickrViewer 1.1


2 - Préparation des dossiers

- Décompressez les deux archives téléchargées (SimpleViewer et FlickrViewer) sur votre bureau par exemple.

- Ouvrez le dossier simpleviewer, et remplacez le fichier "index.html" par le fichier "index.html" qui est contenu dans l'archive FlickrViewer.

- Prenez le fichier "flickrViewer.php" qui est contenu dans l'archive FlickrViewer et placez-le dans le dossier simpleviewer.

Voilà. Le dossier simpleviewer contient désormais tout ce qu'il nous faut.
Il nous reste à configurer quelques préférences avant d'envoyer tout ça sur le serveur web.


3 - Obtenez une clé pour utiliser l'API de Flickr

Pour que votre site puisse se connecter à Flickr, il faut que vous ayez une clé API.

Rien de compliqué là dedans, il suffit de se rendre à cette adresse une fois que vous êtes connecté à votre compte Flickr et de suivre ces instructions :

Flickr a besoin de savoir qui nous sommes, et dans quel but on souhaite utiliser Flickr depuis notre site.

- Nous allons donc compléter le formulaire en fournissant un nom et une adresse e-mail.

- Puis, choisissez l'option "non-commercial use".

- Dans le champ "Describe the application are you planning to build", nous allons expliquer à Flickr ce que nous souhaitons faire de l'API.
Par exemple, copiez le texte suivant :
- On coche les deux cases en bas pour accepter les conditions d'utilisation, et on valide.

- Sur la page suivante, un magnifique code s'affiche : il s'agit de notre précieuse clé sans laquelle notre site ne pourra accéder à Flickr.
On la copie, et on la conserve précieusement.


4 - Configuration des préférences

Avec le bloc notes ou n'importe quel éditeur de texte, ouvrons le fichier flickrViewer.php (qui se trouve maintenant dans le dossier simpleviewer).


Nous allons maintenant modifier quelques éléments :

1 - Modification de la clé :

Ligne 22, vous avez ceci : Remplacez b4bb27c883f06aa4575c6c346c402749 par votre clé API obtenue ci-dessus.
Attention à bien conserver les apostrophes autour de la clé.


2- Modification de l'identifiant du set

Votre site n'affichera pas toutes les photos de votre album Flickr, mais seulement celles d'un set en particulier (un set sur Flickr correspond à une catégorie de votre album).

Par exemple, vous pouvez créer un set "Best of", qui contiendra vos meilleures photos, qui seront aussi publiées sur votre site.
Info : Sur Flickr, une même photo peut être placée dans plusieurs sets.

Si vous n'avez pas créé de set sur votre compte Flickr, rendez-vous sur Flickr, allez dans "Organize > Your sets", et cliquez sur "create a new set" en haut de l'écran.
Faites glisser une vignette dans la case de l'image en haut, et choisissez un nom pour votre set.

Récupérons l'indentifiant du set :
Allons sur la page principale du set que nous choisissons.
Par exemple, dans mon cas : Romania (best) - a photoset on Flickr
L'identifiant du set, c'est simplement les chiffres qui se trouvent à la fin de cette adresse, à savoir 72157594533186826 dans mon cas précis.
Cherchez cet identifiant, et notez-le.

Revenons maintenant à notre éditeur de texte :
Ligne 65, vous avez ceci : Remplacez 72057594052387557 par l'identifiant du set, que nous venons de noter à l'étape précédente.
Attention à bien conserver les apostrophes autour de ce chiffre.


3 - Modification de l'adresse de l'album Flickr

Ligne 74, nous avons ceci : Remplacez markymoo par votre identifiant Flickr.
Attention à bien conserver le "/" final, ainsi que les apostrophes.


4- Définition du fichier temporaire

FlickrViewer a besoin d'un endroit où il peut créer un fichier temporaire pour stocker des informations.
Celà permet au site d'être plus rapide : il n'aura pas besoin d'interroger Flickr lorsqu'il aura déjà l'information demandée en mémoire.


Ligne 83, nous avons ceci : Certains serveurs mutualisés (= les comptes d'hébergement grand public), ne permettent pas d'écrire dans le répertoire /tmp du serveur, par souci de sécurité.

Nous allons donc créer un dossier spécifique, auquel nous allons donner des droits d'écriture, pour stocker ce fichier temporaire.

Pour celà :

1 - Ouvrons le logiciel filezilla

2 - Entrons dans la barre du haut de Filezilla les informations de connection FTP fournies par notre hébergeur.
Dans la case "port", mettre 21.
Puis, cliquer sur "connexion rapide".

3 - Créons un dossier pour le fichier temporaire :
Dans la case de droite, nous pouvons explorer notre espace d'hébergement.
Nous allons entrer dans le dossier qui contient les fichiers du site (par exemple le dossier "www", celà dépend de votre hébergeur) et avec un clic droit, choisissons "créer un répertoire".
Appellons ce répertoire "tmp".

4 - Donnons des droits d'écriture à ce répertoire.
Pour permettre au site d'enregistrer les fichiers temporaires dans le répertoire que l'on vient de créer :
- Faisons un clic droit sur ce nouveau dossier "tmp"
- Cliquer sur "attributs du fichier"
- Dans "valeur numérique", indiquer 777
Celà a pour effet de d'ouvrir tous les droits d'accès sur ce fichier.
Puis valider.

Revenons maintenant à notre éditeur de texte :
Ligne 83, nous avons donc ceci : Nous allons simplement enlever le premier symbole "/" pour indiquer qu'il s'agit du dossier tmp qui n'est pas à la racine du serveur, mais dans notre dossier personnel à nous
Ce qui donne : (on a simplement enlevé le premier "/".)


5 - Choix des préférences :

- Durée du cache :

Ligne 102, nous avons ceci : Ceci correspond à la période pendant laquelle les photos sont conservées en mémoire (dans le dossier temporaire qu'on vient de créer ), en secondes.
Plus cette période est longue, moins votre site n'aura à recourir à Flickr pour aller y chercher des informations.
Mais aussi, moins votre site sera actualisé régulièrement.

43200 secondes correspond à 12 heures, c'est un bon choix. Mais vous pouvez changer cette valeur (0 = rien n'est conservé en mémoire.

- Titre du site :

Ligne 107, nous avons ceci : Remplacez par le titre de votre site, en gardant bien les guillements autour.

- Lien vers Flickr :

Ligne 120, nous avons ceci : Si vous laissez true, alors un lien vers la page de Flickr contenant l'image sera placé sur votre site.
Si vous ne le souhaitez pas, remplacez true par false

- Titre des images :

Ligne 132, nous avons ceci : Laissez à true si vous voulez affichez le titre de l'image (récupéré depuis Flickr), ou mettez false si vous ne le souhaitez pas.

- Traduction du lien qui pointera vers la page Flickr :

Si vous avez choisi d'afficher le lien vers la photo sur Flickr (voir l'étape "lien vers flickr", à la ligne 286 Remplacez le texte
"View full size..."
par : "Voir en taille réelle" ou "Voir sur mon album Flickr" ou ce que vous souhaitez. C'est le texte qui s'affichera sur ce lien.

- Configuration de la page :

Dans votre éditeur de texte, ouvrez le fichier index.html :

Ligne 5, vous avez ceci : Remplacez par le titre de votre page, celui qui s'affichera dans la barre du haut du navigateur (n'effacez pas les balises title, changez simplement le texte entre les deux balises).

Pour ceux qui s'y connaissent en html :
Si vous souhaitez ajouter un logo, un texte, des liens... C'est aussi ici que ça se passe.
Vous pouvez ajouter votre contenu (logo, textes, liens...) entre les balises body. La partie contenue entre les balises script est le visualisateur d'images.
Vous pouvez changer le placement du visualisateur en modifiant la feuille de style incluse dans ce fichier index.html.


6 - On envoie tout sur le serveur !

D'abord enregistrez bien les fichiers que nous avons modifié.

Avec Filezilla, envoyez ensuite le contenu du dossier simpleviewer sur votre serveur web.

(Dans la fenêtre de droite, affichez le dossier de votre site web, et depuis la fenêtre de gauche, faites glisser les fichiers contenus dans le dossier simpleviewer, vers la fenêtre de droite).

Et voilà !

Exemples :

En écrivant ce tutorial, et en suivant toutes les instructions que je vous ai données, j'arrive à ceci.

En modifiant un peu les préférences et le design, j'arrive à ceci.

Pour aller plus loin dans la personnalisation du site, vous pouvez travailler sur le fichier index.html.

Montrez-nous vos sites créés avec ces outils !