AMP

Important: this documentation is not applicable to your currently selected format stories!

amp-addthis

Description

Afficher un élément intégré Outils Web AddThis.

 

Required Scripts

<script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>

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 compatibles fill, 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-id ID 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-id ID 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-type Attribut décrivant le type de widget.
  • Barre flottante : data-widget-type="floating"
  • Inline : data-widget-type="inline"
data-title Facultatif. 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-url Facultatif. 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-media Facultatif. 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-description Facultatif. 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.

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow
Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub