AMP

amp-addthis

Ce composant affiche un élément intégré Outils Web AddThis.

Script requis<script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
Mises en page compatiblesfill, fixed, fixed-height, flex-item, nodisplay, responsive

Pourquoi utiliser AddThis ?

Le composant amp-addthis propose des boutons de partage particulièrement élégants et faciles à utiliser. Faites en sorte que les visiteurs de votre site Web puissent partager facilement du contenu sur plus de 200 réseaux sociaux, dont Messenger, WhatsApp, Facebook, Twitter, Pinterest et bien d'autres.

AddThis est utilisé par plus de 15 millions de sites Web qui enregistrent plus de deux milliards d'utilisateurs uniques et partagent du contenu dans le monde entier dans plus de soixante langues.

Boutons "Partager"

Barre flottante

La barre flottante s'affiche sur les côtés, en bas ou en haut de la page. Elle suit le lecteur lorsque l'utilisateur fait défiler la page. Il s'agit là d'un excellent moyen de promouvoir le partage sans gêner la lecture.

Exemple :

<!--
  This example uses a placeholder pubId.
  Please replace the pubId value with your own after
  creating an account on https://www.addthis.com/dashboard.
-->
<amp-addthis
width="320"
height="92"
layout="responsive"
data-pub-id="ra-5c191331410932ff"
data-widget-id="957l"
data-widget-type="floating">
</amp-addthis>

Inline

Intégrez des boutons "Partager" dans votre propre contenu pour offrir une expérience de partage fluide.

Exemple :

<!--
  This example uses a placeholder pubId.
  Please replace the pubId value with your own after
  creating an account on https://www.addthis.com/dashboard.
-->
<amp-addthis
width="320"
height="92"
data-pub-id="ra-5c191331410932ff"
data-widget-id="mv93"
data-widget-type="inline">
</amp-addthis>

Attributs

data-pub-idID d'éditeur AddThis renseigné dans l'URL du tableau de bord AddThis une fois la connexion établie. Par exemple, dans l'URL https://www.addthis.com/dashboard#gallery/pub/ra-5c191331410932ff, ra-5c191331410932ff  est l'ID d'éditeur.
data-widget-idID de widget AddThis de l'outil à afficher, également disponible dans le tableau de bord AddThis. Vous pouvez également afficher l'ID de widget d'un outil spécifique en ouvrant cet outil dans le tableau de bord AddThis, puis en copiant la dernière partie de l'URL. Par exemple, dans l'URL  https://www.addthis.com/dashboard#tool-config/pub/ra-5c191331410932ff/widgetId/957l, 957l est l'ID de widget.
data-widget-typeAttribut décrivant le type de widget.
  • Barre flottante : data-widget-type="floating"
  • Inline : data-widget-type="inline"
data-titleFacultatif. Si cet attribut est défini, il s'agit du titre que l'outil AddThis essaie de partager. Dans le cas contraire, le titre du document contenant la balise amp-addthis est utilisé.
data-urlFacultatif. Si cet attribut est défini, il s'agit de l'URL que l'outil AddThis essaie de partager. Dans le cas contraire, la propriété location.href du document contenant la balise amp-addthis est utilisée.
data-mediaFacultatif. Si cet attribut est défini, il s'agit de l'URL d'un élément multimédia (une image ou une vidéo, par exemple) que l'outil AddThis essaie de partager. Dans le cas contraire, cet attribut reste dans l'état "non défini".
data-descriptionFacultatif. Si cet attribut est défini, il s'agit de la description de la page que l'outil AddThis essaie de partager. Dans le cas contraire, cet attribut reste dans l'état "non défini".

Documentation de mise en œuvre

  1. Si vous ne l'avez pas encore fait, vous devez créer un compte AddThis à l'adresse https://www.addthis.com/register. Cette procédure est entièrement gratuite. Un compte AddThis vous permet d'accéder à notre suite complète d'outils Web, ainsi qu'à nos rapports d'analyse détaillés pour mieux comprendre le trafic issu des réseaux sociaux sur votre site Web.
  2. Accédez à votre tableau de bord et personnalisez vos boutons "Partager" (pour le moment, AMP accepte uniquement les boutons de partage de type "Barre flottante" et "Inline").
  3. Personnalisez vos boutons de partage et appuyez ensuite sur "activate tool" (activer l'outil). Vous êtes alors redirigé vers la page "Get The Code" (Obtenir le code).
  4. Pour terminer, copiez et collez le code intégré dans la section "body" de la page où doivent figurer les boutons de partage. Dans le cas d'un bouton de partage de type "Barre flottante", vous pouvez placer ce code n'importe où dans la section "body". En effet, il sera affiché sur le côté gauche ou droit de votre écran en fonction de l'endroit où vous l'avez défini dans les paramètres de l'outil.

Voilà, c'est fait ! Les boutons de partage doivent à présent être affichés sur votre page.

Visionnez cette vidéo YouTube pour obtenir des instructions détaillées :

Validation

Consultez les règles relatives à amp-addthis dans les spécifications du validateur AMP.

Vie privée

http://www.addthis.com/privacy/privacy-policy/

Les outils AddThis et la barre d'outils AddThis recueillent des informations à partir de l'appareil employé par l'utilisateur final pour interagir avec les sites de l'éditeur ou par l'utilisateur de la barre d'outils pour interagir avec la barre d'outils AddThis ("Données AddThis").

Les données AddThis peuvent se composer des éléments suivants :

  • Adresse IP (Internet Protocol), identifiant publicitaire pour mobile (MAID) (un identifiant qui permet aux développeurs d'applications mobiles d'identifier les utilisateurs de leurs applications), identifiant d'application mobile, type de navigateur, langue du navigateur, type de système d'exploitation, et date et heure auxquelles l'utilisateur final a visité le site d'un éditeur ou une barre d'outils.
  • Internaute qui a utilisé la barre d'outils.
  • Comportement sur le site d'un éditeur : durée de la visite sur le site d'un éditeur, manière dont l'utilisateur final a partagé le contenu sur le site et comportement de défilement adopté par l'utilisateur.
  • URL de provenance et type de recherche sur le Web que l'utilisateur final a employée pour rechercher le site d'un éditeur et y accéder.
  • Mots clés saisis dans la fonctionnalité de recherche de la barre d'outils AddThis, et informations relatives au téléchargement, à l'installation ou à la désinstallation de la barre d'outils AddThis.
  • Informations sur la fréquence à laquelle un utilisateur final se sert des outils AddThis et sur la fréquence à laquelle un utilisateur de la barre d'outils utilise la barre d'outils AddThis.
  • Données de géolocalisation déduites de l'adresse IP d'un utilisateur final et d'un utilisateur de la barre d'outils.

Les données AddThis seront traitées comme des informations à caractère personnel dans la mesure requise par la loi applicable. Conformément aux conditions d'utilisation d'AddThis, les éditeurs sont tenus d'obtenir toutes les autorisations et tous les consentements nécessaires de la part des utilisateurs finaux, et de fournir toutes les notifications requises pour transmettre à Oracle les données AddThis collectées auprès des utilisateurs finaux.

Assistance

Si vous avez des questions ou avez besoin d'aide pour mettre en œuvre AddThis sur AMP, contactez notre extraordinaire équipe de support en envoyant une demande d'assistance ici ou en envoyant un e-mail à l'adresse help@addthis.com.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub