Davel's TechBlog

Icon

Trouvailles, plugins et autres "trucs" destinés à faciliter la vie des pov' développeurs comme moi. Spécialité AS3, PHP et un peu de Javascript.

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 :

nom fonction valeur par défaut
appId* String fournie par Facebook, c’est l’id de l’applciation que vous avez créé pour l’occasion

* Obligatoire !

null
onImageSelected Function fonction avec un seul argument qui contiendra l’adresse de l’image choisie par l’utilisateur null
startConnectLabel String label du lien pour se loguer et commencer le chargement des albums ‘Cliquez-ici pour vous connecter sur votre compte Facebook’
albumsLoadingLabel String message d’attente ‘chargement des albums’
imagesLoadingLabel String message d’attente ‘chargement des images’
needAuthorizeLabel String message d’erreur si l’utilisateur n’autorise pas l’application à voir ses photos ‘Vous devez autoriser l’application.’
loadingImage String chemin vers l’image de pré-chargement ‘images/loading.gif’
urlFacebookScript String URL de l’API Javascript de facebook, j’ai mis la version française par défaut. ‘http://connect.facebook.net/fr_FR/all.js’

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.

Be Sociable, Share!

Category: Facebook, Javascript/jQuery

Tagged: , , , , , , ,

2 Tweets

10 Responses

  1. rui7silva dit :

    Thank you for your script. Were you able to fetch the selected images into a fancybox? would you share your implementation?

  2. davel_x dit :

    I did but the site is not online anymore. If I have time I’ll set up an example but the process is pretty simple : open an hidden div with fancybox and set up the script on this div. Maybe you could also open an iframe but IMO it’s more complicated to exchange JS values with an iframe. :)

  3. mosh dit :

    Sample to add fancybox to this application:
    http://datis.co.il/fb/
    I want to do the same thing but with google picasa or google+. There is anybody who know this thing?

  4. [...] Comme promis lorsque je l’ai distribué, j’ai finalement mis en place un dépôt GitHub pour le plugin GetFacebookAlbums. [...]

  5. [...] More Information on Get User Facebook Albums and Pictures [...]

  6. [...] More Information on Get User Facebook Albums and Pictures [...]

  7. Ajax dit :

    Amaze! Thank you! Which i planned to compose on my small web site something like
    that. Am i able to add a fragment of the write-up to be able to this site?

  8. [...] More Information on Get User Facebook Albums and Pictures [...]

Leave a Reply

Additional comments powered by BackType