Plugins sociaux

Plugin Group

Les plugins Group permettent de rejoindre votre groupe Facebook à partir d’un lien contenu dans une page web.

Plugin Group pour le web

Le plugin Group pour le web ajoute un bouton Accéder au groupe sur votre page web qui permet à toute personne qui clique dessus d’être redirigée vers votre groupe Facebook. Ce plugin utilise le SDK Facebook pour JavaScript pour afficher un bouton sur votre page web.

Avant de commencer

Pour intégrer le plugin Group sur une page web, vous avez besoin de :

Limites

  • Le plugin Group pour le web ne peut être utilisé que sur une page web.

Obtenir le code

Pour obtenir le code du bouton Accéder et l’intégrer à votre page web, vous devez utiliser le configurateur de code.

Étape 1. Remplacez l’URL par l’URL du groupe Facebook.

Étape 2. Mettez à jour la largeur du pixel du bouton Accéder au groupe.

Étape 3. Ajoutez des métadonnées si vous souhaitez inclure des informations supplémentaires dans le code du bouton.

Étape 4. Cliquez sur Obtenir le code.

Configurateur de code

URL du groupe
Largeur de pixel du module
Obtenir le code

Étape 5. Copiez et collez l’extrait de code HTML sur la page web où doit apparaître le bouton.

Attributs de plugin

Voici tous les paramètres disponibles concernant le plugin Group pour le web.

AttributDescription

data-href

URL du groupe Facebook

data-show-metadata

Affiche les métadonnées du groupe Facebook, par exemple la description

data-lazy

true ou false, la valeur par défaut. Lorsque l’attribut est défini sur true, le navigateur ne proposera aucun rendu du plugin si la possibilité que le plugin ne soit jamais vu existe. Cela est par exemple le cas si le plugin ne se trouve pas à proximité de la fenêtre d’affichage

data-width

Définit la largeur du plugin en pixels. 280 est la valeur par défaut. La largeur minimale est de 180 pixels et la largeur maximale, de 500 pixels

data-skin

Définit la couleur du thème du contenu du plugin. Les options suivantes sont prises en charge :

  • light : le plugin s’affiche avec du texte foncé (attribut par défaut)
  • dark : le plugin s’affiche avec du texte blanc

Exemple de code

Si vous ne voulez pas utiliser le configurateur de code, vous pouvez copier et coller le code suivant dans votre page web. Remplacez les valeurs suivantes pour les vôtres :

  • Dans l’URL js.src, remplacez LATEST-API-VERSION par la version de l’API Graph que votre application utilise.
  • Dans l’URL js.src, remplacez APP-ID par l’ID d’application Meta de votre application.
  • Pour data-href, remplacez GROUP-URL par l’URL de votre groupe Facebook. 
<html>

<head>
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>
        (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/en_US/sdk.js#xfbml=1&version=LATEST-API-VERSION&appId=APP-ID&autoLogAppEvents=1';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
</head>

<body>

    <!--Your Group Plugin for the Web code-->
    <div class="fb-group" 
         data-href="GROUP-URL" 
         data-width="280" 
         data-show-metadata="false">
    </div>

</body>

</html>

Voir aussi