.
virusphoto virusphoto

Identifiant

Mot de passe

Derniers messages Messages du jour Sujets sans réponse S'inscrire

Rejoignez-nous !

VirusPhoto » Forum » Les articles VirusPhoto » Informatique et internet pour la photo

Aller au premier non-lu

Créez votre propre site web en utilisant les images de votre album Flickr

Article rédigé par Jeff., le 13/02/2007.Voir son profil

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 :
Citation:
I need to have an API key to make use of the Flickr API with FlickrViewer and SimpleViewer (weeting.org/mark/flickrviewer/) on my website (adresse de votre site ici).
- 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 :
Citation:
$apikey = 'b4bb27c883f06aa4575c6c346c402749';
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 :
Citation:
$setid = '72057594052387557';
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 :
Citation:
$userurl = 'http://www.flickr.com/photos/markymoo/';
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 :
Citation:
$cache = "/tmp/flickr.xml";
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 :
Citation:
$cache = "/tmp/flickr.xml";
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 :
Citation:
$cache = "tmp/flickr.xml";
(on a simplement enlevé le premier "/".)


5 - Choix des préférences :

- Durée du cache :

Ligne 102, nous avons ceci :
Citation:
$ttl = 43200;
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 :
Citation:
$title = "My Favourite Photos";
Remplacez par le titre de votre site, en gardant bien les guillements autour.

- Lien vers Flickr :

Ligne 120, nous avons ceci :
Citation:
$showImageLink = true;
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 :
Citation:
$showImageCaption = true;
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 :
Citation:
SimpleViewer / Flickr interface in PHP
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 !
Outils de la discussion Rechercher dans la discussion
Outils de la discussion
  #2  
non lus 13/02/2007, 12h53
Avatar de Gaetan
Magister populi
Ma pratique de la photo: Passionné de photo
 
Messages: 3 778
999967154 Photiz
Merci pour le tuto Jeff!

Cet outil est vraiment très pratique et pas compliqué à mettre en oeuvre. J'ai fait un rapide essai pour voir ce que ca donne, c'est correct je trouve. Voila ce que ca donne chez moi : htttp://entraks.free.fr/galerie/

Dernière modification par Entraks 13/02/2007 à 13h16.
Réponse avec citation
  #3  
non lus 13/02/2007, 12h58
Jeff.
 
Messages: n/a
Photiz
Merci de nous faire partager le lien

Pour franciser le lien "View Full size", ouvrez le fichier flickrViewer.php avec un éditeur de texte, et à la ligne 286 Remplacez "View full size..." par "Voir en taille réelle" ou autre

J'ajoute ça au tuto.
Réponse avec citation
  #4  
non lus 13/02/2007, 15h23
Avatar de Frédéric
Co-fondateur
Ma pratique de la photo: La photo est mon métier
Matériel: Fuji
 
Messages: 14 056
154911 Photiz
Pas mal du tout ça !
Dommage qu'il n'y a pas de commentaire, mais ça doit pouvoir s'ajouter. Sinon pour un portfolio, c'est nickel!
Je vais essayer de faire quelque chose dès que j'ai un peu de temps.

Merci Jeff ...
__________________
Me suivre sur : Instagram | Twitter
Réponse avec citation
  #5  
non lus 13/02/2007, 15h45
Jeff.
 
Messages: n/a
Photiz
Content que ça soit utile
Réponse avec citation
  #6  
non lus 14/02/2007, 12h30
Avatar de Pi Production
Membre
Ma pratique de la photo: Passionné de photo
Matériel: Canon 5D Mark II
 
Messages: 4 591
39354 Photiz
Question

Salut,
J'ai essayé de faire ton tuto mais sans succés.... (désolé je suis novice)
J'ai fait un set sur Flickr,voici le rendu :
Flickr: Photos from Pi production
Aprés toutes les manips je l'ai hébergé par le bias de Ma page perso d'Orange,voici le rendu :
http://perso.orange.fr/Pi-Production
Pourriez vous m'aider plz?
Merci d'avance
PS :Encore bravo à votre site !!
Réponse avec citation
  #7  
non lus 14/02/2007, 12h35
Jeff.
 
Messages: n/a
Photiz
Bonjour Pi Production.
La fonction fopen est-elle activée sur ton hébergement ?

Pour le savoir, crée un fichier nommé phpinfo.php que tu places sur ton site, et dans ce fichier, mets ceci :
Code PHP:
<?php
phpinfo
();
?>
Ceci va afficher sur la page la configuration de php qui va permettre de savoir si cette fonction est activée.

Entre nous, ça m'étonnerait qu'elle soit activée chez Orange (c'est rarement le cas sur les hébergements gratuits).
Réponse avec citation
  #8  
non lus 14/02/2007, 13h14
Avatar de Gaetan
Magister populi
Ma pratique de la photo: Passionné de photo
 
Messages: 3 778
999967154 Photiz
Citation:
Posté par Jeff Voir le message
Entre nous, ça m'étonnerait qu'elle soit activée chez Orange (c'est rarement le cas sur les hébergements gratuits).

Mon FAI étant Orange, je sais que le php n'est pas activé par défaut (et je sais même pas si l'on peut l'activer). C'est pour ça que mon site est chez free, herbergeur gratuit, sans pub, php/mysql intégré, 10giga d'espace libre.... je m'arrete là, ca fait trop d'pub
Réponse avec citation
  #9  
non lus 14/02/2007, 13h15
Jeff.
 
Messages: n/a
Photiz
Ah oui, si il n'y a pas php, ce n'est même plus le problème de fopen (fopen étant une fonction php).

En plus, fopen est activé chez free, donc celà semble être la solution en gratuit
Réponse avec citation
  #10  
non lus 14/02/2007, 13h18
Avatar de Gaetan
Magister populi
Ma pratique de la photo: Passionné de photo
 
Messages: 3 778
999967154 Photiz
Citation:
Posté par Jeff Voir le message
Ah oui, si il n'y a pas php, ce n'est même plus le problème de fopen (fopen étant une fonction php).

En plus, fopen est activé chez free, donc celà semble être la solution en gratuit

oui. je vais peut être faire un tutos complémentaire à celui-ci du genre "comment créer son site gratuit chez free" afin d'expliquer la démarche à suivre pour les novices.
Réponse avec citation
  #11  
non lus 14/02/2007, 13h38
Avatar de Pi Production
Membre
Ma pratique de la photo: Passionné de photo
Matériel: Canon 5D Mark II
 
Messages: 4 591
39354 Photiz

Merci beaucoup Entraks & Jeff pour vos infos,c'est vraiment sympas
J'attends avec impatience ton tuto pour l'hébergeur Free Entraks
@ +
Réponse avec citation
  #12  
non lus 14/02/2007, 13h39
Avatar de Gaetan
Magister populi
Ma pratique de la photo: Passionné de photo
 
Messages: 3 778
999967154 Photiz
Citation:
Posté par Pi Production Voir le message

Merci beaucoup Entraks & Jeff pour vos infos,c'est vraiment sympas
J'attends avec impatience ton tuto pour l'hébergeur Free Entraks
@ +

bon bah je vais faire ca bientot alors ^^
Réponse avec citation
  #13  
non lus 14/02/2007, 13h44
Avatar de Pi Production
Membre
Ma pratique de la photo: Passionné de photo
Matériel: Canon 5D Mark II
 
Messages: 4 591
39354 Photiz

Génial Entraks,merci à toi
Réponse avec citation
  #14  
non lus 14/02/2007, 13h51
Jeff.
 
Messages: n/a
Photiz
Merci Entraks !
Réponse avec citation
  #15  
non lus 17/02/2007, 23h12
Avatar de titoFromToulouse
Membre
Ma pratique de la photo: Passionné de photo
Matériel: Canon
 
Messages: 72
1425 Photiz
Super ! En deux temps une premiere ebauche qui ne va demander que de se poursuivre :::!

Merci
http://foto.cazajous.net/
Réponse avec citation
VirusPhoto » Forum » Les articles VirusPhoto » Informatique et internet pour la photo

Commentaire

Discussion précédente / suivante dans cette rubrique :
« Gimp | Créer sa galerie web avec JAlbum pour les nuls »

Non-lu Non-lu  
Bloguer ceci Outils de l'article Rechercher dans cet article Note: Note de l'article : 7 votes - moyenne : 3,71.

Outils de l'article Rechercher dans cet article
Rechercher dans cet article:

Recherche avancée
Noter la discussion
Noter la discussion:

 


LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Powered by vBulletin® Version 3.8.2 - Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
2006 - 2017 © ® VirusPhoto. Tous droits réservés.