• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/02/2019

Partagez les résultats avec Facebook share

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

 

Dans les chapitres précédents, j'ai volontairement laissé de côté l'interaction avec Facebook, autrement dit l'authentification et le partage. En effet, il me semblait essentiel que nous nous concentrions d'abord sur les notions essentielles à connaître sur Flask.

Mais vous êtes maintenant des pros ! Il est donc temps de plonger dans Facebook. 

Configurer une app Facebook

Créer une application test et une autre de production

Vous avez déjà créé une application sur Facebook Developers au premier chapitre. Nous allons maintenant la configurer.

Rendez-vous sur le site de Facebook pour développeurs et cliquez sur "Mes apps". Sélectionner l'application créée précédemment.

L'application actuelle sera utilisée en production, autrement dit lorsque vous mettrez votre site en ligne. Mais que se passera-t-il si vous voulez ajouter une nouvelle fonctionnalité ? Vous ne voudrez certainement pas continuer à travailler avec l'application Facebook qui contient de vraies données.

L'idéal est de créer une application "test" dont le but sera d'essayer les nouvelles fonctionnalités de votre application.

Les apps tests vous permettent de déboguer et tester les changements en développement sans affecter le comportement de votre application de production.

En clair : lorsque vous développez en local, utilisez une application test. Lorsque vous êtes en ligne, liez votre code à une application qui manipulera de vraies informations.

Comment faire cela ? Créez simplement une nouvelle application dans Facebook mais indiquez dans le titre qu'elle ne sera utilisée qu'à des fins de développement.

Dans Paramètres > Général, ajoutez l'adresse http://localhost:5000 dans le champ URL du site. Facebook a besoin de connaître l'URL que vous autorisez pour éviter que votre application ne soit utilisée ailleurs. Enregistrez les modifications.

Enfin, copiez l'ID et remplacez l'ancien dans config.py.

Bravo, vous venez de créer votre première application test !

Créer un utilisateur test dans Facebook apps

Vous n'allez pas tester le parcours utilisateur avec votre compte indéfiniment ! Facebook vous permet de créer un vrai compte pour de faux. Hé oui, vous avez bien lu : vous pouvez créer un utilisateur test qui n'aura d'existence que dans l'application test que vous aurez créée.

Retournez sur l'espace d'administration de votre application test sur Facebook. Cliquez sur "Rôles" et "Utilisateurs test". Cliquez sur "Ajouter". Cochez l'option "autoriser l'application".

Un utilisateur a été créé ! Cliquez sur "modifier" pour changer le nom et le mot de passe de l'utilisateur. Vous en aurez besoin !

Vous pouvez maintenant tester le projet avec l'utilisateur test.

Ajouter l'authentification et le partage à une application Facebook for Developers

À présent, cliquez sur "Ajouter un produit" et sélectionnez "Facebook Login". Cliquez sur "Next" jusqu'à la fin.

Vous n'avez pas à implémenter le Facebook Login car je l'ai déjà fait pour vous !

Concernant le bouton de partage, vous n'avez rien à configurer.

Comprendre l'authentification en JavaScript

Revenons à notre code. Ouvrez le template index.html pour comprendre le code que je vous ai fourni.

index.html

...

<!-- Bouton de connexion Facebook -->
<!-- Si le script Facebook est mal initialisé, il n'apparait pas.  -->
<!-- Appelle la fonction `checkLoginState()` pendant l'authentification grâce à l'attribut `onlogin`.  -->
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true" onlogin='checkLoginState()'></div>

...

<!-- Cette balise est modifiée par le script Facebook quand il est initialisé. N'y touchez pas.  -->
<div id="fb-root"></div>
<script>

  // Cette fonction est appelée par la fonction FB.getLoginStatus(), elle-même appelée juste après l'initialisation du script.
  function statusChangeCallback(response) {
    if (response.status === 'connected') {
      callAPI();
    }
  }
  // Fonction appelée après que l'utilisateur a appuyé sur le bouton "Continuer avec Facebook".
  // L'appel se fait deux fois mais nous ne voulons le faire qu'une seule fois, d'où le compteur.
  var counter = 0;
  function checkLoginState() {
    counter += 1
    if (counter == 1) {
      FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });
    }
  }

  // Initialisation du script.
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{{ config['FB_APP_ID'] }}',
      cookie     : true,  // enable cookies to allow the server to access
                          // the session
      xfbml      : true,  // parse social plugins on this page
      version    : 'v2.8' // use graph api version 2.8
    });

    // Cette fonction est appelée quand le script a fini de s'initialiser et que Facebook renvoie l'état de connexion de l'utilisateur.
    FB.getLoginStatus()(function(response) {
      statusChangeCallback(response);
    });
  };

  // Ajout des fichiers source dans le DOM.
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.9&amp;appId={{ config['FB_APP_ID'] }}";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // Cette fonction est appelée par statusChangeCallback() si l'utilisateur est connecté.
  function callAPI() {
    console.log('Welcome! Fetching your information.... ');
    // Appel à l'API de Facebook et demande d'accès à l'identifiant, au prénom et au genre de l'utilisateur.
    // L'utilisateur doit accepter dans une popup.
    FB.api('/me', {fields: 'id, first_name, gender'}, function(response) {
      console.log('Successful login for: ' + response.first_name);
      // Si l'utilisateur accepte, l'authentification réussit.
      // Dans ce cas, nous construisons l'url de redirection.
      var url = window.location.href + 'result?first_name=' + response.first_name + '&amp;id=' + response.id + '&amp;gender=' + response.gender;
      // Puis nous redirigeons l'utilisateur vers la page de résultats.
      window.location.href = url;
    });
  }
</script>

Relancez le serveur. Le bouton d'initialisation de Facebook s'affiche bien !

Comprendre le partage en JavaScript dans un template

Intéressez-vous maintenant au partage. Ouvrez le template result.html.

result.html

...

<a class="btn btn-lg btn-outline big-button facebook_button" id="FbShare">
    Partager sur Facebook
</a>

...

<!-- Cette balise est modifiée à l'initialisation du script Facebook.  -->
<!-- N'y touchez pas.  -->
<div id="fb-root"></div>
<script>
  // Initialisation de l'application.
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{{ config['FB_APP_ID'] }}',
      cookie     : true,  // enable cookies to allow the server to access
                          // the session
      xfbml      : true,  // parse social plugins on this page
      version    : 'v2.8' // use graph api version 2.8
    });
  };

  // Ajout au DOM des fichiers source.
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.9&amp;appId={{ config['FB_APP_ID'] }}";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // Au clic sur l'élément dont l'id est FBShare,
  // ouverture de la fenêtre de partage.
  $('#FbShare').click(function(){
    FB.ui({
      method: 'share',
      // URL à partager. Nous devons la créer maintenant !
      href: {{ og_url }},
    }, function(response){});
  });
</script>

Comme vous pouvez le constater, l'URL n'est pas encore indiquée. Pourquoi ? Car nous ne voulons pas que l'utilisateur partage l'URL actuelle, avec ses informations, mais plutôt le lien de la page d'accueil pour que ses amis cliquent dessus et fassent également le test !

Néanmoins, ce lien sera un peu particulier car il devra inclure la photo à partager sur Facebook ! Afin de bien comprendre comment Facebook lit une page à partager, intéressons-nous à l'OpenGraph.

Utiliser l'OpenGraph et les métadonnées

Selon la documentation officielle, l'OpenGraph est "un protocole qui permet à toute page web de devenir un objet enrichi dans un graphe social.".

Qu'est-ce que cela veut dire ?

Très simplement, l'OpenGraph aide Facebook à comprendre votre page et vous donne plus de contrôle sur la manière dont elle sera partagée. Vous pouvez indiquer le titre, l'URL, la photo... Bref, tous les éléments qui constitueront la carte de partage sur Facebook.

Comment indiquer ces éléments ? Grâce à des métadonnées à ajouter dans le head de votre page :

<html prefix="og: http://ogp.me/ns#">
<head>
  <meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="When Great Minds Don’t Think Alike" />
  <meta property="og:description" content="How much does culture influence creative thinking?" />
  <meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
...
</head>
...
</html>

Ces métadonnées permettront de générer la carte suivante sur Facebook :

 

Comment utiliser ces balises dans notre projet ? Vous n'avez (presque) rien à faire ! Je les ai déjà ajoutées pour vous. Modifiez simplement les valeurs :

base.html

<head>
  ...
  <meta property="og:title" content="{{ page_title }}" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="{{ og_url }}" />
  <meta property="og:image" content="{{ og_image }}" />
  <meta property="og:description" content="{{ og_description }}" />
  <meta property="fb:app_id" content="{{ config['FB_APP_ID'] }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

Modifiez maintenant la vue :

views.py

@app.route('/')
@app.route('/index/')
def index():
  ...
  page_title = "Le test ultime"
  og_url = url_for('index', _external=True)
  og_image = url_for('static', filename='tmp/sample.jpg')
  og_description = "Découvre qui tu es vraiment en faisant le test ultime !"
  return render_template('index.html',
                          user_name='Julio',
                          user_image=url_for('static', filename='img/profile.png'),
                          description=description,
                          blur=True,
                          page_title=page_title,
                          og_url=og_url,
                          og_image=og_image,
                          og_description=og_description)

Bien ! Nous pouvons désormais modifier les métadonnées lues par Facebook lors du partage. Mais comment lui spécifier d'utiliser la photo de l'utilisateur ?

Configurer l'image utilisée pendant le partage

L'image partagée sera de la forme suivante :

Elle sera créée dans la vue result, avant l'affichage du template. Nous pouvons donc voir quatre étapes :

  • 1 : création de l'image dans result

  • 2 : ajout du lien de partage dans le template result.html. Il sera de la forme suivante : localhost:5000/index?img=<cheminverslimage>

  • 3 : récupération du lien vers l'image dans index

  • 4 : ajout du lien vers l'image dans le template index.html

Dans le chapitre suivant nous verrons comment générer l'image suivante automatiquement. Passons donc directement à la seconde étape. 

Ajout du lien de partage dans la vue "result"

Pour l'instant, utilisez l'image sample.jpg présente dans le dossier tmp.

Modifiez la vue result :

views.py

...
img = 'tmp/sample.jpg'
og_url = url_for('index', img=img, _external=True)
return render_template('result.html',
                        user_name=user_name,
                        user_image=profile_pic,
                        description=description,
                        og_url=og_url)

Pourquoi ajouter le paramètre _external=True à la méthode url_for()?

Par défaut cette méthode génère une URL relative de la forme suivante : /index?img=myfilename.jpg. Autrement dit elle n'inclut pas le nom de domaine et le protocole. Néanmoins, il faut indiquer à Facebook l'URL complète pour que le partage fonctionne !

Le paramètre _external=True génère une URL absolue de la forme suivante : http://www.nomdedomaine.tld/index?img=myfilename.jpg

Récupération du lien dans la vue "index"

Vous savez déjà comment récupérer des arguments car nous l'avons vu précédemment ! Utilisez l'objet request, tout simplement.

Néanmoins, ajoutons une petite subtilité : si img est présent dans la requête, utilisez cette image, sinon indiquez-en une par défaut :

views.py

def index():
    if 'img' in request.args:
        img = request.args['img']
        og_url = url_for('index', img=img, _external=True)
        og_image = url_for('static', filename=img, _external=True)
    else:
        og_url = url_for('index', _external=True)
        og_image = url_for('static', filename='tmp/sample.jpg', _external=True)
    ...

Prêts à tester que tout fonctionne ? :-)

Tester le partage

Facebook met à disposition un outil formidable pour tester que nous avons bien implémenté les métadonnées attendues : le programme de débogage du partage.

Vous ne pouvez déboguer votre site tout de suite car il n'est pas encore en ligne. Utilisez l'URL du site de démonstration pour tester l'outil : http://le-test-ultime.hello-birds.com/index/?img=tmp%2F1933433063608371.jpg

Vous avez vu dans ce chapitre comment ajouter des métadonnées pour Facebook. La méthode est très similaire pour les autres réseaux sociaux tels que Twitter. Pour en savoir plus, lisez le chapitre Ajouter les metatags du cours Découper et intégrer une maquette.

Code de ce chapitre

Le code de ce chapitre est disponible à cette adresse.

Exemple de certificat de réussite
Exemple de certificat de réussite