YOFBA

Voir la documentation sur GitHub

YOFBA (Your Own Facebook Album)

A quoi ça sert ?

Permet la création (sur son site) d’une galerie photos personnalisée se basant sur un album Facebook.

Avantages

  • Simplicité :
    • Pour gérer vos galeries photos : tout se fait sur Facebook.
    • Pour son implémentation et sa configuration (C’est la raison pour laquelle tout est dans un seul fichier).
  • Optimisation :
    • Diminution de votre bande passante, les photos proviennent directement des serveurs Facebook.
    • Création d’un cache, qui permet d’augmenter le temps de réponse.
  • Personnalisation :
    • Création de votre flux JSON regroupant toutes les informations sur un album Facebook.
    • Créer à partir de ce flux votre galerie photos.

Démo

*Album Facebook : c’est ici que vous gérez votre album. Modification du titre de l’album, ajout/suppression de photos, modification des titres des photos, etc.

*YOFBA : Vous avez accès à une interface utilisateur pour mettre à jour vos albums (cette mise à jour peut être automatisée, cf : CRON).

*JSON YOFBA : C’est un fichier JSON généré par YOFBA pour chaque album Facebook. C’est ce fichier qui va être utilisé pour construire une galerie photos.

*Galerie photos : Exemple d’utilisation de YOFBA avec PhotoSwipe. Vous pouvez utiliser celle que vous préférez, il faut simplement aller lire le flux JSON.

Comment fonctionne YOFBA

  1. Le script va communiquer avec Facebook afin d’obtenir les informations sur un album Facebook.
  2. Il peut procéder à certains traitements : compter les likes par photo, récupérer la couleur dominante d’une photo.
  3. Enregistre le résultat dans un format JSON.
  4. Le fichier JSON qui n’a plus qu’à être lu afin de créer sa propre galerie Facebook.

Mise en place

Script yofba.php

  1. Récupérer et configurer le fichier le script.
  2. Le mettre sur son serveur.
  3. Rendez-vous sur la page yofba.php pour faire tourner le code.
  4. Les JSONs ont été créés.

VotreGaleriePhotos.php

  1. Lire le flux JSON sur
    yofba.php?getAlbum=%youralbumId%
  2. Intégrer ces données dans votre galerie photos.

Exemples

Attention

jQuery

var urlToCall = "yofba.php?getAlbum=" + "%youralbumId%";
$.getJSON(urlToCall, function (data) {
   $("#album-name").text(data["album"]["name"]);
   var albumLink = data["album"]["link"];

   [...]

   //Iterate on each photo of the album
   $.each(data["photos"]["data"], function () {
      var imageFullSize = this["images"][0];
   });
}

Attention

Si votre galerie photos n’est pas sur le même domaine :

Veuillez vérifier dans la configuration de yofba.php que l’appel CORS est autorisé pour votre domaine.


Configuration

1. Créer votre application Facebook

Étape 1 : Ajouter une app

Créer une nouvelle application sur : https://developers.facebook.com/apps

Étape 2 : Récupérer votre App ID (Identifiant de l’app) et App secret (Clé secrète)

alt text

2. Configurer yofba.php (class : Config)

Si une propriété est commentée « Customize », cela signifie qu’il s’agit d’un champ obligatoire que vous devez remplir. Ces propriétés sont mises en évidence en gras ci-dessous.

  • fb_app_id : Renseigner votre App ID, voir Étape 2
  • fb_app_secret : Renseigner votre App Secret, voir Étape 2
  • app_fb_json_albums_file_path : Emplacement où sont stockés les JSONs
  • app_fb_albums_array : Liste de tous les albums Facebook à récupérer. ID et name (pour la liste de l’interface graphique) sont requis. Pour obtenir l’ID d’un Album, récupérer la valeur du paramètre « album_id » dans l’URL d’un album.
  • app_debug_mode : Si vous souhaitez déboguer ce script. Utiliser la méthode Tools::showMessage( » « ,MessageType::Debug).
  • app_token : Mot de passe pour mettre à jour vos albums.
  • app_client_access_number_of_attempts_before_the_tempory_ban_of_the_ip : Nombre maximal de tentatives d’accès dans le temps imparti app_client_access_time_between_new_try
  • app_client_access_number_of_attempts_before_definitely_ban : Nombre maximum d’échec avant un bannissement définitif de l’ip.
  • app_client_access_time_between_new_try : Temps entre les tentatives d’accès.
  • app_client_access_file_path : Emplacement où sont stockés les accès.
  • app_list_of_fields_album : Liste de tous les champs que vous souhaitez récupérer de l’API Facebook concernant un album (doc : https://developers.facebook.com/docs/graph-api/reference/album).
  • app_list_of_fields_photos_album : Liste de tous les champs que souhaitez récupérer de l’API Facebook concernant les photos d’un album (doc : https://developers.facebook.com/docs/graph-api/reference/photo)
  • app_count_facebook_likes : Compter le nombre de « likes ».
  • app_count_facebook_likes_field_name : Nom du champ « compteur de likes », tel qu’il sera enregistré dans le fichier JSON.
  • app_get_main_color_of_image : Analyser la couleur principale de l’image.
  • app_get_main_color_of_image_field_name : Nom du champ « couleur principale », tel qu’il sera enregistré dans le fichier JSON.
  • app_exception_file_path : Emplacement où les exceptions sont stockées.
  • app_allow_cors_request_from_url : Si vous souhaitez appeler le JSON depuis un autre domaine que celui du script, vous devez autoriser celui-ci.
    Exemple d’appel CORS :

    • yofba.php placé sur le sous-domaine app.yourSite.com
    • yourPhotoGallery_1.php placé sur le sous-domaine photos.yourSite.com
    • yourPhotoGallery_2.php placé sur le domaine yourSite.com
      La propriété app_allow_cors_request_from_url property devrais contenir :
const app_allow_cors_request_from_url = array("https://photos.yourSite.com","https://www.photos.yourSite.com", "https://yourSite.com","https://www.yourSite.com");

Optionnel

Tâche CRON

Permet d’automatiser la mise à jour du fichier JSON.

Mettre à jour les JSONs de tous les albums : cron.sh


#!/bin/sh
cd /xxx/xxx/subdomain/ && /usr/local/php7.0/bin/php -f yofba.php token=yourToken

 

Demo with iFrame