{"id":99,"date":"2010-06-17T21:33:41","date_gmt":"2010-06-17T19:33:41","guid":{"rendered":"http:\/\/www.davel.fr\/techblog\/?p=99"},"modified":"2011-12-20T18:21:30","modified_gmt":"2011-12-20T16:21:30","slug":"plugin-jquery-get-facebook-albums-photos","status":"publish","type":"post","link":"https:\/\/www.davel.fr\/techblog\/2010\/06\/plugin-jquery-get-facebook-albums-photos\/","title":{"rendered":"plugin jQuery : Get Facebook Albums-Photos"},"content":{"rendered":"<p><strong>UPDATE<\/strong> : <a href=\"https:\/\/www.davel.fr\/techblog\/2011\/09\/jquery-getfacebookalbums-sur-github\/\" title=\"Jquery GetFacebookAlbums sur GitHub\">Jquery GetFacebookAlbums sur GitHub<\/a><\/p>\n<p><strong>UPDATE 2 (20\/12\/2011)<\/strong> : Il ya eu des modifications sur l'API Facebook, j'ai donc uniquement mis \u00e0 jour le <a href=\"https:\/\/www.davel.fr\/techblog\/2011\/09\/jquery-getfacebookalbums-sur-github\/\" title=\"Jquery GetFacebookAlbums sur GitHub\">GitHub<\/a><\/p>\n<p>Et voil\u00e0, c'est un post \u00e0 marquer d'une pierre blanche car c'est \u00e0 la fois <strong>le premier plugin jQuery que je fais<\/strong>, enfin que je finalise assez pour le diffuser, et la premi\u00e8re fois que je distribue au public un de mes codes. Moment d'\u00e9motion donc.<\/p>\n<p>Je vous pr\u00e9sente donc : le <strong>plugin jQuery GetFacebookAlbums<\/strong>, qui, comme son nom l'indique un peu, va vous permettre de laisser le visiteur <em>parcourir ses albums Facebook pour y s\u00e9lectionner une photo <\/em>dont vous disposerez du lien en bout de sc\u00e9nario. C'est un bon compl\u00e9ment au simple upload d'image depuis son ordinateur et pas forc\u00e9ment tr\u00e8s compliqu\u00e9 \u00e0 mettre en place.<\/p>\n<p><a href=\"http:\/\/www.davel.fr\/demo\/facebook\/getFacebookAlbums.html\" target=\"_blank\">Voir la d\u00e9mo (aucune info n'est retenue bien sur !)<\/a><br \/>\n<a href=\"https:\/\/github.com\/davellx\/jQuery-GetFacebookAlbums\">T\u00e9l\u00e9charger la version actuelle (v1.1, github)<\/a><\/p>\n<p>Et voici un petit <strong>mode d'emploi en 5 points <\/strong>que vous pouvez r\u00e9aliser vous m\u00eame sous la supervision d'un adulte consentant.<\/p>\n<p><!--more-->1\/ <strong>Cr\u00e9er l'application facebook<\/strong>. \u00c7a ressemble un peu \u00e0<a href=\"https:\/\/www.davel.fr\/techblog\/2010\/05\/un-onglet-personnalise-sur-une-fan-page-facebook-comment-on-installe\/\"> mon article pour installer une fan page personnalis\u00e9e<\/a> mais ici il est uniquement n\u00e9cessaire de renseigner la section \"<em>Connect<\/em>\" des param\u00e8tres 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).<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.davel.fr\/techblog\/wp-content\/uploads\/2010\/06\/facebook_connect_settings.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-thumbnail wp-image-112\" title=\"Param\u00e8tres Facebook Connect\" src=\"https:\/\/www.davel.fr\/techblog\/wp-content\/uploads\/2010\/06\/facebook_connect_settings-150x150.jpg\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p>Et normalement les autres valeurs par d\u00e9faut devraient \u00eatre bonnes (elles le sont \u00e0 l'heure actuelle, je changerai cette partie dans le futur si \u00e7a devait changer)<\/p>\n<p>2\/ <strong>Inclure dans votre code HTML les fichiers javascript et CSS<\/strong>. N'oubliez pas que <em>ce plugin est bas\u00e9 sur jQuery<\/em>, il faut donc bien penser \u00e0 le charger.<\/p>\n<pre lang=\"html4strict\">\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\" type=\"text\/javascript\"><\/script>\r\n<script src=\"js\/jquery.getfacebookalbums.js\" type=\"text\/javascript\"><\/script>\r\n<\/pre>\n<p>3\/ <strong>Ajouter dans votre code HTML un conteneur <\/strong>qui va recevoir les donn\u00e9es charg\u00e9es par le plugin.<\/p>\n<pre lang=\"html4strict\">\r\n<div id=\"albumsContainer\"><\/div>\r\n<\/pre>\n<p>4\/ Enfin, <strong>lancer le plugin<\/strong> sur ce conteneur. (pas trop fort bien sur)<\/p>\n<pre lang=\"javascript\">\r\n$('#albumsContainer').getFacebookAlbums(\r\n{appId:'VOTRE-APP-ID',\r\nonImageSelected:function(data){alert(data)},\r\nautres options...})\r\n<\/pre>\n<p>Voici les autres options disponibles pour configurer au mieux l'application :<\/p>\n<table>\n<thead>\n<tr>\n<th>nom<\/th>\n<th>fonction<\/th>\n<th>valeur par d\u00e9faut<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>appId<\/strong>*<\/td>\n<td><strong>String <\/strong>fournie par Facebook, c'est l'id de l'applciation que vous avez cr\u00e9\u00e9 pour l'occasion<\/p>\n<p>* Obligatoire !<\/td>\n<td>null<\/td>\n<\/tr>\n<tr>\n<td><strong>onImageSelected<\/strong><\/td>\n<td><strong>Function <\/strong>fonction avec un seul argument qui contiendra l'adresse de l'image choisie par l'utilisateur<\/td>\n<td>null<\/td>\n<\/tr>\n<tr>\n<td><strong>startConnectLabel<\/strong><\/td>\n<td><strong>String <\/strong>label du lien pour se loguer et commencer le chargement des albums<\/td>\n<td>'Cliquez-ici pour vous connecter sur votre compte Facebook'<\/td>\n<\/tr>\n<tr>\n<td><strong>albumsLoadingLabel<\/strong><\/td>\n<td><strong>String <\/strong>message d'attente<\/td>\n<td>'chargement des albums'<\/td>\n<\/tr>\n<tr>\n<td><strong>imagesLoadingLabel<\/strong><\/td>\n<td><strong>String <\/strong>message d'attente<\/td>\n<td>'chargement des images'<\/td>\n<\/tr>\n<tr>\n<td><strong>needAuthorizeLabel<\/strong><\/td>\n<td><strong>String <\/strong>message d'erreur si l'utilisateur n'autorise pas l'application \u00e0 voir ses photos<\/td>\n<td>'Vous devez autoriser l'application.'<\/td>\n<\/tr>\n<tr>\n<td><strong>loadingImage<\/strong><\/td>\n<td><strong>String <\/strong>chemin vers l'image de pr\u00e9-chargement<\/td>\n<td>'images\/loading.gif'<\/td>\n<\/tr>\n<tr>\n<td><strong>urlFacebookScript<\/strong><\/td>\n<td><strong>String<\/strong> URL de l'API Javascript de facebook, j'ai mis la version fran\u00e7aise par d\u00e9faut.<\/td>\n<td>'http:\/\/connect.facebook.net\/fr_FR\/all.js'<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Voici quelques points que j'aimerai ajouter\/am\u00e9liorer dans le futur :<\/p>\n<ul>\n<li>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.<\/li>\n<li>ajouter plus de fonctions de callback sur les divers \u00e9v\u00e9nements (chargement des albums, chargement des images, etc.)<\/li>\n<li>rendre la structure plus souple pour \u00eatre plus facilement adaptable graphiquement (indiquer les id qu'on veut, pr\u00e9voir que les blocs existent d\u00e9j\u00e0, etc.)<\/li>\n<li>lui apprendre \u00e0 faire le caf\u00e9 (allong\u00e9, un sucre, etc.)<\/li>\n<\/ul>\n<p>Voil\u00e0, j'esp\u00e8re que ce projet int\u00e9ressera d'autres que moi.\u00a0 Il est assez simple \u00e0 utiliser et \u00e0 modifier au besoin, je l'ai m\u00eame utilis\u00e9 dans une <a href=\"http:\/\/fancybox.net\/\" target=\"_blank\">fancybox<\/a> r\u00e9cemment avec beaucoup de succ\u00e8s.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UPDATE : Jquery GetFacebookAlbums sur GitHub UPDATE 2 (20\/12\/2011) : Il ya eu des modifications sur l&rsquo;API Facebook, j&rsquo;ai donc uniquement mis \u00e0 jour le GitHub Et voil\u00e0, c&rsquo;est un post \u00e0 marquer d&rsquo;une pierre blanche car c&rsquo;est \u00e0 la fois le premier plugin jQuery que je fais, enfin que je finalise assez pour le [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18],"tags":[19,17,50,22,15,20,21,16],"class_list":["post-99","post","type-post","status-publish","format-standard","hentry","category-facebook","category-javascriptjquery","tag-albums","tag-download","tag-facebook","tag-images","tag-jquery","tag-photos","tag-pictures","tag-plugin"],"_links":{"self":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":23,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts\/99\/revisions\/167"}],"wp:attachment":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}