plugin jQuery : Get Facebook Albums-Photos

UPDATE : Jquery GetFacebookAlbums sur GitHub

UPDATE 2 (20/12/2011) : Il ya eu des modifications sur l'API Facebook, j'ai donc uniquement mis à jour le GitHub

Et voilà, c'est un post à marquer d'une pierre blanche car c'est à la fois le premier plugin jQuery que je fais, enfin que je finalise assez pour le diffuser, et la première fois que je distribue au public un de mes codes. Moment d'émotion donc.

Je vous présente donc : le plugin jQuery GetFacebookAlbums, qui, comme son nom l'indique un peu, va vous permettre de laisser le visiteur parcourir ses albums Facebook pour y sélectionner une photo dont vous disposerez du lien en bout de scénario. C'est un bon complément au simple upload d'image depuis son ordinateur et pas forcément très compliqué à mettre en place.

Voir la démo (aucune info n'est retenue bien sur !)
Télécharger la version actuelle (v1.1, github)

Et voici un petit mode d'emploi en 5 points que vous pouvez réaliser vous même sous la supervision d'un adulte consentant.

1/ Créer l'application facebook. Ça ressemble un peu à mon article pour installer une fan page personnalisée mais ici il est uniquement nécessaire de renseigner la section "Connect" des paramètres de l'application pour y indiquer l'URL de votre site et le nom de domaine de base (utile si vos utilisateur utilisent votre URL avec ou sans le www).

Et normalement les autres valeurs par défaut devraient être bonnes (elles le sont à l'heure actuelle, je changerai cette partie dans le futur si ça devait changer)

2/ Inclure dans votre code HTML les fichiers javascript et CSS. N'oubliez pas que ce plugin est basé sur jQuery, il faut donc bien penser à le charger.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.getfacebookalbums.js" type="text/javascript"></script>

3/ Ajouter dans votre code HTML un conteneur qui va recevoir les données chargées par le plugin.

<div id="albumsContainer"></div>

4/ Enfin, lancer le plugin sur ce conteneur. (pas trop fort bien sur)

$('#albumsContainer').getFacebookAlbums(
{appId:'VOTRE-APP-ID',
onImageSelected:function(data){alert(data)},
autres options...})

Voici les autres options disponibles pour configurer au mieux l'application :

Voici quelques points que j'aimerai ajouter/améliorer dans le futur :

• mettre le projet sur une plateforme de partage de code comme google code ou github, mais il faudrait que je me penche sur leurs modes de fonctionnement et leurs conditions d'utilisation.
• ajouter plus de fonctions de callback sur les divers événements (chargement des albums, chargement des images, etc.)
• rendre la structure plus souple pour être plus facilement adaptable graphiquement (indiquer les id qu'on veut, prévoir que les blocs existent déjà, etc.)
• lui apprendre à faire le café (allongé, un sucre, etc.)

Voilà, j'espère que ce projet intéressera d'autres que moi.  Il est assez simple à utiliser et à modifier au besoin, je l'ai même utilisé dans une fancybox récemment avec beaucoup de succès.