Plugin Citation

Le plugin Citation permet aux gens de sélectionner du texte depuis votre page et de l’ajouter à leur partage afin qu’ils puissent raconter une histoire plus expressive. Sachez que vous n’avez pas besoin de mettre en œuvre Facebook Login ni de demander d’autres autorisations par l’intermédiaire de la certification d’app pour utiliser ce plugin.

Partager une citation sur le web mobile

Si vous êtes en train de développer un site web pour le web mobile ou que le bouton fourni ne fonctionne pas avec la conception de votre site web, la boîte de dialogue Partager pour le web prend également en charge l’ajout d’une citation au partage d’un lien.

Partager une citation sur iOS et Android

Si votre app est au format natif iOS ou Android, nous vous recommandons d’utiliser les outils natifs Boîte de dialogue Partager sous iOS et Boîte de dialogue Partager sous Android à la place.

Test du pluginExemple de codeParamètres

Test du plugin

Sélectionnez une partie de cette phrase pour voir le plugin en action.

Exemple de code

Remplacez la valeur data-href par l’URL de votre site web. Assurez-vous que vos balises méta Open Graph sont à jour et que le data-href pour le plugin est conforme à la propriété og:url.

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Comment #2: SDK -->
  <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=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>
Essayez vous-même !

Commentaires sur le code

  1. OG Tags : Vous pouvez utiliser des balises Open Graph pour personnaliser l’aperçu de vos liens.
  2. SDK : Chargez le SDK Facebook pour JavaScript.
  3. Content : Le contenu de votre page.
  4. Plugin Code : Le code de votre plugin Citation obtenu grâce au configurateur. Vous pouvez le placer n’importe où dans le document et il n’apparaîtra que lorsque vous surlignerez le texte dans ce conteneur. Dans cet exemple, il n’apparaît que lorsque vous surlignez du texte dans le corps.

Paramètres

Vous pouvez modifier les paramètres suivants :

Paramètre Attribut HTML5 Description Valeur par défaut

href

data-href

L’URL absolue de la page qui sera citée.

URL actuelle

layout

data-layout

  • quote : Lorsque du texte est sélectionné, un bouton avec une icône bleue Facebook et le texte « Partager la citation » apparaît en superposition. Si une personne clique dessus, une boîte de dialogue Partager s’ouvre avec le texte surligné transformé en citation.
  • button : Agit comme l’option « Citation », mais avec seulement une icône bleue Facebook sur le bouton.

quote

Zones pouvant être citées

Certaines zones de votre page web peuvent ne pas profiter du fait de pouvoir être citées, comme les menus, barres latérales, pieds de page. Vous pouvez définir les zones de votre page pouvant être citées en utilisant :

  • des éléments <article> HTML ou
  • tout élément ayant pour nom de classe fb-quotable

Vous pouvez mélanger autant d’éléments de ces deux types que vous le souhaiter et définir des zones pouvant être citées.

Si votre page ne contient ni <article> ni class="fb-quotable", la page complète peut être citée.

Modification de la langue

Vous pouvez modifier la langue du plugin Quote en chargeant une version localisée du SDK Facebook pour JavaScript. Lorsque vous chargez le SDK, modifiez la valeur de js.src pour utiliser votre paramètre régional. Remplacez en_US par votre paramètre régional, par exemple fr_FR pour le français (France) :

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

Les paramètres régionaux pris en charge sont répertoriés dans le fichier XML de paramètres régionaux de Facebook. Vous devrez peut-être modifier la largeur d’un Social Plugin si vous voulez afficher plusieurs langues. Vous trouverez plus d’informations sur notre page Localisation et traduction.