Nous vous avions dĂ©jĂ briĂšvement parlĂ© du plugin WordPress (ou extension) Facebook Photo Fetcher (voir l’article 7 plug-ins WordPress que votre blog va adorer), aujourd’hui nommĂ© Social Photo Fetcher, qui permet d’importer et d’afficher un album photo Facebook dans un article ou une page de votre blog ou de votre site internet. DĂ©couvrez maintenant comment installer l’extension WordPress et la paramĂ©trer en 3 Ă©tapes !
1. Installer le plug-in Social Photo Fetcher
Comme pour toute autre extension WordPress, vous avez deux possibilitĂ©s pour procĂ©der Ă l’installation :
- Placer le dossier du plugin directement sur votre serveur via un logiciel de transfert FTP tel Filezilla. Pour cela, vous devrez au préalable récupérer sur la page dédiée de WordPress.org le fichier zip contenant tous les éléments du plugin.
- Passer par le back office de votre blog et la fonctionnalitĂ© âAjouter » (sous entendu ajouter une extension).
Pour ce tutoriel, nous utilisons ce second moyen -plus simple pour les non-dĂ©veloppeurs – pour installer Social Photo Fetcher.
Retour donc sur le back-office ou tableau de bord WordPress. Cliquez sur âajouterâ dans la rubrique « Extensionsâ :
Dans le nouvel Ă©cran, tapez le nom de l’extension dans le champ « mots clĂ©s » prĂ©vu Ă cet effet, l’extension s’affiche dans les rĂ©sultats proposĂ©s. Vous n’avez plus qu’Ă cliquer sur « Installer ».
Il ne reste plus qu’Ă cliquer sur âActiver l’extensionâ (4) :
2. RĂ©gler les paramĂštres du plug-in
Social Photo Fletcher est dĂ©sormais bien installĂ© sur votre blog. Il faut maintenant correctement le paramĂ©trer. Commencez par cliquer sur le raccourci Social Photo Fetcher (5) qui se trouve dans la rubrique âRĂ©glagesâ en colonne de gauche du tableau de bord :
Je me connecte avec mon compte Facebook en cliquant sur le bouton âLogin with Facebookâ (6) :
Un nouvel Ă©cran apparaĂźt contenant mon identifiant Facebook. Je dois maintenant rentrer dans le champ 7 l’identifiant (ID) de la page ou du profil Facebook dont je souhaite afficher l’album dans mon blog. A ce stade vous l’aurez compris : il est possible d’intĂ©grer n’importe quel album photo Facebook, le vĂŽtre comme celui d’un autre utilisateur !
Va dĂšs lors se poser un nouveau problĂšme : oĂč trouver l’identifiant d’un profil ou d’une page Facebook ? Pour cela rien de plus simple… Je vais utiliser les fonctionnalitĂ©s offertes par le Graph Facebook. J’ajoute le nom de la page ou du profil concernĂ© dans l’URL suivante :
https://graph.facebook.com/nom_de_la_page
Pour la page Facebook d’Editoile, l’URL sera donc https://graph.facebook.com/editoile.
En premiĂšre ligne (8), je retrouve l’ID de la page, soit 87816690913. C’est ce chiffre qu’il me faut reporter dans les paramĂštres (9) de Facebook Photo Fetcher. Je clique sur âSearchâ (10). Les albums prĂ©sents sur la page Facebook d’Editoile sont alors visibles (11) :
Imaginons maintenant que je souhaite intĂ©grer l’album Facebook 9 rue Vauban dans un article sur mon blog. Il me suffit de copier la ligne apparaissant en 12 (<!–FBGallery2 10151512839455914 –><!–/FBGallery2–>) et de la coller Ă l’endroit souhaitĂ© dans la fenĂȘtre HTML de rĂ©daction de mon article :
Je clique sur âenregistrer brouillonâ ou âmettre Ă relireâ pour sauvegarder mes changements. Je vois alors que la phrase que je viens copier/coller laisse la place Ă un code beaucoup plus long qui comprend les urls des diffĂ©rentes images :
3. Modifier le code
En cliquant sur âPrĂ©visualiserâ, je vois le rĂ©sultat tel qu’il sera affichĂ© :
L’article reprend les informations de l’album telles qu’elles apparaissent sur Facebook :
- Le titre
- Le descriptif
- Le nom de l’auteur (en fait celui de la page ou du profil)
- La date de publication des photos
- Les légendes
Le plugin ajoute Ă©galement automatiquement une phrase en anglais, âGenerated by Facebook Photo Fetcher 2â, histoire de faire un peu d’auto-promo đ
PrĂ©fĂ©rant la simplicitĂ©, je souhaite supprimer ces informations et ne conserver que les photographies. Pour cela, je retourne dans la fenĂȘtre de rĂ©daction HTML et je supprime :
- le premier paragraphe crĂ©Ă© par le plugin. La partie Ă supprimer est comprise entre la balise <!–FBGallery2 10151512839455914 –> et la double balise <br /><br /> (surlignĂ©e en bleu ci-dessous)
- le dernier paragraphe dĂ©limitĂ© par les balises <span class=âfpfcreditâ> et <!–/FBGallery2–> (surlignĂ©e en bleu ci-dessous)
Je clique Ă nouveau sur âPrĂ©visualiserâ et je constate que dĂ©sormais seules les photographies apparaissent :
Pour continuer votre lecture, voici des articles utiles sur Facebook :
Enorme Merci !!! super tuto!!!
Par contre est ce possible d’inverser l’ordre des photos j’aimerai que les photos les plus rĂ©centes apparaissent en premier???
Merci encore
Avez-vous installĂ© une extension de type « lightbox » pour afficher vos photos ? Cela est nĂ©cessaire pour gĂ©nĂ©rer un diaporama des images d’un article. Pour info, pour le blog d’Editoile nous utilisons « Simple Lightbox »
Si vous avez dĂ©jĂ installĂ© ce type d’extension, vĂ©rifiez que l’option « Start slideshow automatically » est cochĂ© si vous voulez qu’un diaporama se lance lors de l’ouverture d’une image.
Bonjour,
J’ai trouver votre tuto trĂšs utile et intĂ©ressant.
Tout a trĂšs bien fonctionnĂ©, cependant je ne comprends pas pourquoi quand je clique sur une photo, elle s’affiche sans qu’un dĂ©filement soit possible.
Pouvez-vous m’aider?