Tag Archives: jquery

Premiers pas avec le Facebook Javascript SDK

Posté par le 2010/11/15 No comments

J’ai récemment commencé à utiliser le framework Javascript SDK Facebook, qui assure une couche Javascript d’authentification et d’utilisation de l’API Facebook. Mon but à terme est de porter l’application que je développe, actuellement sous forme canvas/fbml/fbjs sous forme d’iframe/javascript sdk.

Alors, à base de jquery pour quelques appels Ajax, avec un soupçon de symfony sans ORM (mais pas réellement nécessaire sur le coup, limite j’ai perdu du temps à le mettre en place tout bien vu qu’il n’y a qu’une page), j’ai designé une page que je qualifierai de console de test Facebook, disponible sur http://fb.mkz.me/ et également sur http://apps.facebook.com/monkeyzfb/ dans sa version iframe. La console permet de tester certains appels issus de FB.api (graph et old rest), quelques appels FB.ui et quelques socials plugins.

Le code, quant à lui est très simple. Tout commence par quelques éléments html, un petit script javascript utilisant jquery, deux appels ajax, l’un pour changer le code et l’autre pour executer la commande FQL désirée.

Et hop, ça donne ça:

On notera les deux petits tricks suivants:

Pour savoir si la session facebook a été déconnectée, 3 lignes de codes suffisent. Au besoin, on pourra changer le document.location pour délogguer l’utilisateur de notre application:

    FB.Event.subscribe('auth.sessionChange', function(response) {
        if (response.session) {
            FB.api('/me', function(response) { $('span#_status').text('Logged in as ' + response.name);});
        } else {
            $('span#_status').text('No session');
        }
    });

Et encore l’appel à FB.XFBML.parse() pour reparser manuellement toute la page après l’inclusion de nouveaux éléments xfbml (fb:comments, fb:profile-pic):

    $('input#_run').click(function() {
        // On modifie une section cachée (_code) avec le code ecrit dans le textarea
        $('span#_code').html($('textarea#_editor').val());
        // On vide le result car le script va ecrire dedans
        $('span#_result').html('');

        // On parse le xfbml pour le voir s'afficher:
        FB.XFBML.parse();
    });

jQuery et animation de chargement

Posté par le 2010/05/11 No comments

Sur beaucoup de sites, on retrouve des petits gif d’animation d’attente de chargement, invention purement visuelle pour rassurer le visiteur sur le fait qu’une action est en train de charger.

Voici un rapide snippet réalisé avec jQuery pour reproduire ce comportement. D’ailleurs, on créera facilement son icone grâce à ajaxload.

<html>
<head>
  <script src="jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function() {

    $('#button').submit(function() {
      $('#load').show();
      $('#result').load('test.php', function() {
        $('#load').hide();
      });
      return false;
    });

  });
  </script>
</head>
<body>

<div id="result"></div>

<form id="button">
  <input type="submit" value="Refresh date" />
</form>

<div id="load" style="display: none;">
  Loading <img src="loader.gif" />
</div>

</body>
</html>

Avec le petit script tout bête à coté test.php:

<?php sleep(2); echo time(); ?>

Comment ça marche ?

C’est très simple: Lors de la soumission du formulaire ‘button‘, la fonction associée définie grâce à jQuery va faire apparaitre le div ‘load‘, lancera le chargement de test.php et à la fin de son chargement, fera tout simplement redisparaitre le div ‘load‘.