18/06/2011

Comment créer un album photo sur Blogger avec Simpleviewer

Partager ses photos sur le web est très facile: il suffit de créer un album sur Picasa ou Flickr et de le partager avec qui vous voulez en leur envoyant le lien par email, en le partageant sur Facebook, etc.
Mais ce n'est pas ce qui nous intéresse ici.

Simpleviewer est un outil qui offre gratuitement plusieurs templates pour réaliser de jolies galeries de vos jolies photos, en les mettant en valeur, comme ceci.


La question qui nous occupe ici est de savoir comment faire pour utiliser Simpleviewer et de l'intégrer dans un blog comme ceci.

Les outils à utiliser seront les suivants:

  • Un blog Blogger
  • Un compte Flickr
  • Un compte Dropbox
  • Les outils de Simpleviewer téléchargeables ici dont svBuilder (indispensable)

1. Créer un blog sur Blogger

Si vous avez un compte Google (Gmail), vous accéderez automatiquement à la page d'accueil de Blogger en cliquant sur l'icône Blogger


La page d'accueil de Blogger apparaît, cliquez sur Créer un blog



Suivez les instructions afin de créer votre blog. 

Nous ne rentrerons pas ici dans le détail pour personnaliser l'aspect de votre blog, ce qui demande quelques connaissances en langage HTML, mais sachez qu'il est très facile d'utiliser depuis l'onglet Présentation l'Outil de création de modèle afin d'obtenir un résultat tout à fait décent.


Nous allons maintenant nous intéresser au plus important: savoir comment créer un album dans Flickr et le préparer afin qu'il puisse être intégré dans votre blog.

2. Flickr

Flickr est un outil particulièrement pratique pour mettre vos photos sur Internet et les partager avec qui vous le souhaitez. 

Si vous avez un compte Yahoo!, vous pourrez utiliser Flickr, qui est de la même "maison". 
Sinon, créez un compte ou utilisez vos identifiants Facebook ou Google pour vous identifier. 

Ce qu'il faut savoir sur Flickr pour utiliser Simpleviewer

Simpleviewer se connecte à vos photos sur Flickr pour les publier via sa template dans votre blog. Cela implique donc que si vous souhaitez donner un titre à vos photos, leur attribuer un tag, cela devra être fait dans Flickr, car vous ne pourrez pas les modifier ailleurs.

Autrement dit, la source des informations sera toujours Flickr. Vous pourrez toujours décider par la suite de modifier le titre de vos photos et les tagger différemment par la suite dans Flickr.

Ainsi, pour ajouter ou supprimer des photos dans votre album Simpleviewer, il suffira d'ajouter un simple tag à celles que vous voulez insérer dans votre album, ou au contraire supprimer le même tag des photos que vous souhaitez supprimer de votre album. 

Comment choisir vos tags dans Flickr

Utilisez un seul mot-clé pour toutes les photos qui correspondent à votre album.

Exemple: pour créer un album avec vos photos d'Italie, utilisez le mot-clé "italie", de préférence sans majuscule. Simpleviewer détectera automatiquement toutes les photos ayant le mot-clé "italie" dans ses tags et l'intègrera automatiquement à son index (nous reviendrons plus loin sur cette notion d'index). 

Si vous souhaitez que la même photo apparaisse dans plusieurs albums, utilisez autant de mots-clés séparés par un espace que vous avez d'albums. 

Attention: La gestion des tags de Flickr sous-entend que vous n'utilisiez qu'un seul mot par tag, sinon Simpleviewer ne les reconnaîtra pas comme tels.

Exemple: italie portraits paysages vous permettra de créer trois albums distincts, le premier pour l'Italie, le second pour votre galerie de portraits et le troisième pour votre galerie de paysages. 

Après avoir importé vos photos dans Flickr, vous pourrez les organiser afin de les regrouper par album (mais ce n'est pas nécessaire pour les utiliser ensuite avec Simpleviewer) et les traiter par lot afin de leur attribuer un titre (important si vous souhaitez que Simpleviewer l'affiche dans sa template).  


En faisant glisser les photos que vous souhaitez intégrer à votre album sur Blogger dans la fenêtre centrale de Flickr, vous pourrez leur donner un titre et surtout un tag, afin que Simpleviewer les ajoute à votre album:



Dans le cas de la photo ci-dessus, j'ai choisi de lui attribuer 2 tags afin que cette photo apparaisse dans deux albums distincts: mon album sur Dakhla, et celui dans lequel je n'afficherai que des photos de paysages. 

Une fois toutes vos photos taggées, vous pouvez fermer Flickr, vous n'en aurez plus besoin, sauf si vous souhaitez modifier les informations de vos photos a posteriori. 

3. svBuilder

svBuilder est l'outil de Simpleviewer qui vous permettra de générer le code nécessaire à l'intégration de votre album par la suite à Blogger. 
Il devra être installé sur votre ordinateur (PC ou Mac)

Il s'organise en 4 étapes: 

1. Start (Commencer)

Cliquez sur New Gallery pour créer une nouvelle galerie de photos. 


Dans la fenêtre suivante, sélectionnez Flickr et laissez les autres options telles quelles, sauf si vous souhaitez modifier la taille de vos images


Utilisez comme Flickr User Name celui de votre compte Flickr. A ce titre, je vous conseille d'utiliser un nom de compte simple et sans espaces, pour éviter que svBuilder ne le reconnaisse pas. 

Dans le champ Flickr Tags, mettez le tag (un seul, compte-tenu de ce que nous avons déjà dit auparavant) des photos que vous souhaitez intégrer à votre album (un album=un tag). 


2. Images

De deux choses l'une: soit votre Flickr User Name n'est pas reconnu parce qu'il comporte des caractères non-reconnus par svBuilder, auquel cas vous allez recevoir un message d'erreur et vous devrez retourner dans Flickr pour le modifier, soit svBuilder reconnaît votre Flickr User Name et vous allez voir apparaître comme par magie toutes vos photos sous forme de liste, comme ici: 


Vous n'avez rien d'autre à faire ici qu'à vérifier que vous obtenez bien l'écran ci-dessus, ce qui signifie que l'importation a bien fonctionné. Malheureusement, svBuilder en version gratuite ne permet pas de mettre en ligne plus de 50 photos à la fois, et ne permet pas de modifier l'ordre des photos. 

3. Customize (paramétrer)

Dans la fenêtre suivante de svBuilder, vous pouvez en revanche paramétrer l'aspect de votre galerie de photos. 


Dans Select Preset, vous pourrez choisir l'aspect de votre galerie photos. Choisissez celui que vous préférez. 
Background Color: couleur du fond
Use Flash: gardez cette option sélectionnée même si certains navigateurs empêchent le Flash, vos visiteurs pourront toujours déverrouiller cette option dans leur navigateur par la suite. 
Frame width: permet de choisir la taille de la bordure des photos, personnellement je préfère une bordure plus fine que celle proposée par défaut...

Une fois toutes vos options sélectionnées, cliquez sur Publish pour permettre la publication de votre galerie sur Blogger. 

4. Publish (publier)

Bon, c'est maintenant qu'il va falloir un peu "bidouiller" avec Dropbox pour rendre votre galerie visible et intégrable dans Blogger, mais rien de très sorcier si vous suivez le pas-à-pas suivant.

Voici ce que vous obtenez en cliquant sur Publish. 


Ne vous préoccupez pas du code qui apparaît en dessous, vous n'en avez pas besoin. 

Ce qu'il vous faut maintenant, c'est faire en sorte que l'index que vous venez de créer avec svBuilder soit disponible sur un serveur web, donc qu'il soit toujours disponible (l'index en question n'est autre que le code html qui liste toutes vos photos ainsi que les paramètres de la template que vous venez de paramétrer).
Et pour cela nous allons utiliser Dropbox.
Surtout ne fermez pas svBuilder, vous allez en avoir besoin! 

4. Dropbox

Ne lâchez pas l'affaire maintenant, c'est bientôt terminé! 

Dropbox fonctionne de la manière suivante: lorsque vous l'installez sur votre ordinateur, celui-ci crée plusieurs dossiers par défaut, dont un dossier qui nous intéresse particulièrement, celui qui se nomme Public, car il peut être partagé avec d'autres. 

Dropbox crée un dossier visible dans votre explorateur de fichier (windows) ou votre Finder (Mac) qui sera automatiquement synchronisé avec votre compte Dropbox web. 
Autrement dit, tout ce que vous mettez dans le dossier Public de votre Dropbox local se retrouvera immédiatement dans votre compte web Dropbox. 

Créez un sous-dossier Simpleviewer dans votre dossier Public, et un sous-sous-dossier portant un nom simple (un mot, sans espace) afin d'y enregistrer l'index de votre album en cours de création. 

Exemple: Dropbox/votre.username.dropbox/Public/Album

Bien. Une fois cette étape franchie, on bidouille...

Retournez dans svBuilder dans la page Publish et cliquez sur Browse... en face de Gallery Folder
Recherchez votre dossier Dropbox/votre.username.dropbox/Public/Album sur votre ordinateur et quand vous l'avez trouvé cliquez sur Sélection puis Save pour sauvegarder.

svBuilder va y sauvegarder 3 fichiers, dont le fameux index.html que nous allons utiliser tout de suite. 

Maintenant, rendez-vous dans la version web de Dropbox, en faisant un clic-droit sur l'icône Dropbox qui figure dans la barre de menu, et suivez les étapes suivantes en images: 








5. Ultime retour à Blogger 

Nous y sommes presque: nous avons créé un blog, un album Flickr, paramétré les options de notre album, hébergé son Index sur Dropbox, nous avons le code du lien public de l'index dans notre presse-papier, il ne nous reste plus qu'à l'utiliser en le collant dans un article ou une page de Blogger pour qu'il fonctionne. 

Créez un nouveau message dans Blogger et collez dès à présent le lien public de votre index dans la fenêtre de l'article, afin de ne pas le perdre. 

Il nous manque néanmoins un seul morceau de code pour intégrer (on parle de embed) l'album à Blogger, et le voici: 


Il s'agit du code HTML que vous collerez dans la page de Blogger comme ceci en remplaçant le code http://dl.dropbox.com/u/XXXXXXXX/SimpleViewer/Landscapes/index.html par le vôtre: 


C'est tout? Oui! Si cela ne fonctionne pas, c'est que vous vous êtes trompé(e) quelque part... 
Mais si cela fonctionne, c'est magique! 

N'hésitez pas à m'envoyer vos questions si vous rencontrez des difficultés à suivre ce tutoriel ou pour partager vos créations! 

37 commentaires:

  1. Salut ! Super article mais j'ai un problème... on dirait que svBuilder ne reconnaît pas mon pseudo Flickr... je l'ai changé plusieurs fois pourtant et je commence vraiment à pété un câble !

    Merci d'avance si tu as une réponse. :-)

    RépondreSupprimer
  2. J'ai eu le même problème et j'ai dû modifier mon identifiant Flickr plusieurs fois avant que cela ne fonctionne. Le plus simple est d'utiliser un identifiant de type pnom ou prénom.nom. J'ai cru constater aussi que Flickr met un certain temps avant de prendre en compte les changements, donc si ça ne fonctionne pas tout de suite attends un peu avant d'utiliser svBuilder. Bonne chance!

    RépondreSupprimer
  3. Sans accents ni caractères spéciaux ;)

    RépondreSupprimer
  4. D'accord, je vais tenter ça, je te redis si ça fonctionne ! ;-)

    RépondreSupprimer
  5. Bonjour, mon problème à moi est que lorsque je sauvegarde mon index dans mon sous-dossier du dossier "Public", j'ai ce message d'erreur:

    Adobe® Flash® Player a interrompu une opération potentiellement risquée. L’application locale suivante sur votre ordinateur ou votre réseau :

    /Users/Franck/Dropbox/Public/XXXXX/XXXX/svcore/swf/simpleviewer.swf

    tente de communiquer avec l’adresse suivante, susceptible d'établir une connexion Internet :

    api.flickr.com

    Pour permettre à cette application de communiquer sur Internet, cliquez sur Paramètres.
    Vous devez redémarrer cette application après avoir modifié les paramètres.

    Lorsque je décoche la case "Flash" dans la config' ça fonctionne. Sauf que mes images défilent mais sans aucune animation. J'ai la dernière version du Player pour info. Je me demande ce que j'ai oublié?? D'avance merci pour vos retours :] Bon week-end à tous.

    RépondreSupprimer
  6. Je suppose que vous êtes sur PC? Avez-vous essayé de désactiver le firewall ou l'antivirus? Ou de mettre Flash Player dans la liste des programmes autorisés? Bonne chance!

    RépondreSupprimer
  7. Bonjour, merci pour votre retour.
    Je suis sur MAC OS X, j'avais oublié de le mentionner.
    J'ai désactivé Little Snitch qui contrôle les entrées et les intrusions pourtant...

    ?

    RépondreSupprimer
  8. Je suis moi aussi sur Mac et je n'ai pas eu de problème de ce type en utilisant Google Chrome ;)

    RépondreSupprimer
  9. Merci Lechninkel pour tes infos. J'ai résolu mon problème.
    Je n'avais pas compris que le paramétrage du Flash Player se faisait en ligne.
    Du coup j'ai autorisé l'accès à mon dossier Public de Drop Box et hop! C'était bon :]

    RépondreSupprimer
  10. bonjour,
    je n'arrive pas à lancer SimpleViewer sur mon Mac dernière génération... Je ne sais pas avec quelle application lancer le programme. Une aide? merci d'avance

    RépondreSupprimer
  11. Mon dieu je suis trop contente, ca fait des heures que je suis sur votre tuto et j'ai enfin réussi ! merci, merci mille fois !!!

    RépondreSupprimer
  12. Il me reste 2 questions en suspend : Au début de l'article vous parlez de picasa, est-il possible d'utiliser un album picasaweb plutôt que flirck ? cela serait plus aisé pour pouvoir gérer l'ordre des photos par exemple, j'ai du mal avec flirck... mais svbuilder ne le propose pas
    Ensuite, simpleviewer ne s'affiche pas sur mon mobile, c'est une fatalité ?

    RépondreSupprimer
  13. C'est superbe! Tout fonctionne parfaitement. Exactement ce que je voulais. Milles fois merci. :)

    RépondreSupprimer
  14. Super article! Merci beaucoup! Cà marche nickel!

    RépondreSupprimer
  15. J'ai le même problème que SEL2MER et je n'arrive pas à le résoudre; alors que j'aurais vraiment besoin de ce gadget pour mon blog. Merci d'avance aux aides que je recevrais =)

    RépondreSupprimer
  16. Bonjour moi il me dit que la balise "iframe" est incomplète bizarre pourtant c'est identique....

    RépondreSupprimer
  17. @happy days: tu as du oublier le ">" à la fin

    Mon seul problème, l'image en taille normale (à coté des miniatures de gauches) ne s'affiche pas. Elle ne s'affiche qu'en grand, lorsque je clique dessus.

    Une idée ? Merci pour l'astuce en tout cas.

    RépondreSupprimer
  18. l'interface de dropbox a changé et je n'ai pas l'option "copier le lien html" comme je n'ai pas de "dossier public".

    RépondreSupprimer
  19. parfait, cela faisait un moment que je cherchais sur le web comment faire.
    Merci pour ce tuto

    RépondreSupprimer
  20. Salut,

    Idem que Paul Muab'Dib, pas de possibilité de copier le lien html de l'index de la gallery une fois que je suis sur le site Internet de dropbox :s

    Merci quand même, mais je crois que Dropbox a retiré cette possibilité, justement pour éviter les détournements d'utilisation du site ?

    RépondreSupprimer
  21. Bonjour, pour ma par cela fonctionne, à part que je n' arrive pas a choisir l' ordre de mes photo.
    J' y arrive sur flickr mais lorsqu' elles apparaissent sur SvBuilder l' ordre est modifié. Ce n' est pas ordonné par date, ni par nom c' est vraiment aléatoire. Quelqu' un serait m' aider ?

    RépondreSupprimer
  22. bonjour, la version de flickr est different de celle que tu montre en tuto, (est-ce pour cela que mon "svbuilder" ne parvient pas a détecter mon flickr , j'ai simplifié mon user name mais tjs rien il ne detect rien? ) quelqu'un peu m'aider?

    RépondreSupprimer
  23. J'ai le même problème que toi, après avoir changé plusieurs fois de pseudo en respectant les modalités svbuilder ne reconnait tjs pas mon identifiant.

    RépondreSupprimer
  24. Super article! Merci beaucoup! Je viens justement d'installer Simpleviewer sur mon blog http://mihaelamoldovanperianu.blogspot.be
    C'est vraiment bien sauf qu'il y a un grand espace blanc juste après, mais c'est mieux que rien.

    RépondreSupprimer
  25. Bonjour, ce guide m'a permis d'approfondir mes bases. Merci.

    RépondreSupprimer
  26. bonjour , j ai tellement aimer votre tuto et il m a beaucoup aider , j ai suivi tout en détails par contre je n arrive pas a avoir le lien publique du fichier index.html peut etre car je n ai pas un svbulder activé pro et j pas aussi un dropbox activé , jai les gratuit , j ai télécharger une version gratuite car a partir d la tunisie on n arrive pas a acheter en ligne de l étranger !! voici mon blog http://les-doigts-de-beya.blogspot.fr/p/gallerie.html et je ne sais pas comment faire pour le lien publique ! aidez moi svp

    RépondreSupprimer
  27. Bonjour,

    Tout a merveilleusement bien marché. Mais, après n'avoir été sur le blog depuis un moment, maintenant ça affiche : Flickr user not found... Une idée de ce qu'il faut que je fasse pour que tout rentre dans l'ordre ?

    Merci !!!!!

    RépondreSupprimer
  28. Bonjour...Disparition du dossier PUBLIC de Dropbox pour les nouveaux comptes, il faut passer à une version payante à présent afin de bénéficier de ce dossier. Comment procéder à ce moment?

    RépondreSupprimer
  29. Bonjour,
    Merci pour ces précieuses info. Mais malheureusement, je bloque dès le début car svBuilder ne parvient pas à ma galerie Flickr. Selon les infos lues sur Yahoo, mon username serait mon adresse e-mail sur yahoo. Est-ce exact? Et comment puis-je modifier ça? J'espère grandement une réponse. Merci de votre attention. Jocelyne

    RépondreSupprimer
    Réponses
    1. Bonjour Jocelyne,
      Merci pour votre e-mail. Votre username devrait être votre e-mail Yahoo/Flickr (c'est la même chose) et votre password celui de votre compte Yahoo. Tenez-nous au courant svp!

      Supprimer
    2. Merci infiniment pour votre réponse. C'est pourtant ce que j'ai inscrit dans "Flickr User Name" sur svBuilder, mon e-mail Yahoo et ça ne fonctionne pas. J'ai pioché là-dessus toute la journée, alors si vous avez une solution, je vous en serai immensément reconnaissante!

      Supprimer
  30. Entre le moment où j'ai écrit cet article et aujourd'hui, simpleviewer a été racheté par Adobe...
    Voici un mode d'emploi en anglais, j'espere que vous y trouverez les réponses que vous cherchez: https://www.simpleviewer.net/simpleviewer/support/svbuilder/

    RépondreSupprimer
    Réponses
    1. Merci! Je regarde ça immédiatement. Jocelyne

      Supprimer
    2. Pas de chance pour moi, je suis allé sur ce lien, il s'agit du support svBuilder et je n'ai rien trouvé sur ce problème. Il me semble avoir suivi vos suggestions, à savoir quelque chose de simple comme: prénom@yahoo.com et ça ne va pas. :-((
      Jocelyne

      Supprimer
    3. Bonjour Jocelyne,
      Je viens de jeter un oeil à la page de Support de Simpleviewer et il semble que les choses aient bien changé depuis le moment où j'ai écrit cet article.
      Vous trouverez toutes les explications ici: https://www.simpleviewer.net/simpleviewer/support/#start
      Apparemment Flickr n'est plus nécessaire, donc vous pouvez vous en passer en utilisant leur template Picasa par exemple, qui est l'équivalent mais chez Google.

      Voici comment procéder pas à pas:
      https://www.simpleviewer.net/simpleviewer/support/svbuilder/

      Et surtout comment utiliser le code généré pour le coller dans votre blog:
      https://www.simpleviewer.net/simpleviewer/support/embedding.html

      J'espère que cela répond à vos questions.
      Excellente journée!

      Supprimer