AMP

amp-social-share

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Fonctionnalité de suivi des partages en cours de développement.

 

Required Scripts

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

Ce composant affiche un bouton de partage sur les réseaux sociaux.

Script requis
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"><script>
Mises en page compatibles container, fill, fixed, fixed-height, flex-item, nodisplay, responsive
Exemples Consultez l'exemple de composant amp-social-share sur AMP By Example.

Aperçu

Le composant amp-social-share affiche un bouton de partage sur les réseaux sociaux pour différents fournisseurs de plates-formes.

Exemples

Exemple : Bouton de partage de base sur les réseaux sociaux

Le bouton de partage identifie automatiquement certaines valeurs par défaut pour quelques fournisseurs préconfigurés. Il part du principe que l'URL canonique du document en cours correspond à l'URL que vous souhaitez partager et que le titre de la page correspond au texte à partager.

<amp-social-share type="twitter"></amp-social-share>

Exemple : Transmission de paramètres

Si vous souhaitez transmettre des paramètres au point de terminaison du partage, vous pouvez spécifier l'attribut data-param-<attribute> qui y sera ajouté.

<amp-social-share type="linkedin" width="60" height="44"
    data-param-text="Hello world"
    data-param-url="https://example.com/">
</amp-social-share>

LinkedIn fait partie des fournisseurs préconfigurés. Il n'est donc pas nécessaire de spécifier l'attribut data-share-endpoint.

Attributs

type (obligatoire) Permet de sélectionner un type de fournisseur. Cela est obligatoire pour les fournisseurs préconfigurés et non configurés.
data-target Indique la cible dans laquelle la cible doit être ouverte. La valeur par défaut est _blank, sauf pour les e-mails et les SMS sous iOS. Dans ce cas, la cible est définie sur _top. Notez qu'il est conseillé de n'utiliser cette exception que pour les e-mails.
data-share-endpoint Cet attribut est obligatoire pour les fournisseurs non configurés.
Certains fournisseurs populaires proposent des points de terminaison de partage préconfigurés. Pour plus d'informations à ce sujet, reportez-vous à la section Fournisseurs préconfigurés. Dans le cas des fournisseurs non configurés, vous devez spécifier le point de terminaison du partage.
data-param-* Tous les attributs précédés de data-param-* sont transformés en paramètres d'URL et transmis au point de terminaison du partage.

Fournisseurs préconfigurés

Le composant amp-social-share s'accompagne de quelques fournisseurs préconfigurés qui connaissent leurs points de terminaison de partage, ainsi que de certains paramètres par défaut.

Fournisseur Type Paramètres
API Web Share (ouvre la boîte de dialogue de partage du système d'exploitation) system
  • data-param-text : facultatif. Valeur par défaut : "Titre de la page active"
  • data-mode : facultatif. Si la valeur est définie sur replace, toutes les autres options de partage sont supprimées.
E-mail email
  • data-param-subject : facultatif. Valeur par défaut : Titre de la page active
  • data-param-body : facultatif. Valeur par défaut : URL rel=canonical
  • data-param-recipient : facultatif. Valeur par défaut : '' (chaîne vide)
Facebook facebook
  • data-param-app_id : obligatoire. Valeur par défaut : aucune. Ce paramètre correspond à l'app_id Facebook qui est requis pour la boîte de dialogue de partage Facebook.
  • data-param-href : facultatif. Valeur par défaut : URL rel=canonical
  • data-param-quote : facultatif. Peut être utilisé pour partager une citation ou un texte.
LinkedIn linkedin
  • data-param-url : facultatif. Valeur par défaut : URL rel=canonical
Pinterest pinterest
  • data-param-media : facultatif (mais il est vivement recommandé de le définir). Valeur par défaut : aucune. URL de l'élément multimédia à partager sur Pinterest. Si ce paramètre n'est pas défini, l'utilisateur final est invité à importer un élément multimédia via Pinterest.
  • data-param-url : facultatif. Valeur par défaut : URL rel=canonical
  • data-param-description : facultatif. Valeur par défaut : Titre de la page active
Google+ gplus
  • data-param-url : facultatif. Valeur par défaut : URL rel=canonical
Tumblr tumblr
  • data-param-url : facultatif. Valeur par défaut : URL rel=canonical
  • data-param-text : facultatif. Valeur par défaut : Titre de la page active
Twitter twitter
  • data-param-url : facultatif. Valeur par défaut : URL rel=canonical
  • data-param-text : facultatif. Valeur par défaut : Titre de la page active
WhatsApp whatsapp
  • data-param-text : facultatif. Valeur par défaut : "Titre de la page active - URL de la page active"
LINE line
  • data-param-url : facultatif. Valeur par défaut : URL rel=canonical
  • data-param-text : facultatif. Valeur par défaut : Titre de la page active
SMS sms
  • data-param-body : facultatif. Valeur par défaut : URL rel=title - rel=canonical

Fournisseurs non configurés

En plus des fournisseurs préconfigurés, vous pouvez utiliser des fournisseurs non configurés en spécifiant des attributs supplémentaires dans le composant amp-social-share.

Exemple : Création d'un bouton de partage pour un fournisseur non configuré

L'exemple suivant illustre la création d'un bouton de partage via Facebook Messenger en définissant l'attribut data-share-endpoint sur le point de terminaison approprié pour le protocole personnalisé de Facebook Messenger.

<amp-social-share type="facebookmessenger"
    data-share-endpoint="fb-messenger://share"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

Étant donné que ces fournisseurs ne sont pas préconfigurés, vous devez créer les styles et l'image de bouton appropriés.

Styles

Styles par défaut

Par défaut, le composant amp-social-share inclut quelques fournisseurs préconfigurés bien connus. La couleur et le logo officiels de ces fournisseurs sont utilisés pour les boutons. La largeur et la hauteur par défaut sont respectivement de 60 pixels et de 44 pixels.

Rendez-vous sur AMP Start pour obtenir des liens de partage prédéfinis à utiliser dans vos pages AMP.

Styles personnalisés

Sachez que vous avez la possibilité de fournir votre propre style. Dans ce cas, il vous suffit d'ignorer les styles fournis comme suit :

amp-social-share[type="twitter"] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

Substitution de variables

Vous pouvez utiliser la substitution de variables AMP globale dans l'élément <amp-social-share>. Dans l'exemple ci-dessous, TITLE est remplacé par le titre de la page et CANONICAL_URL est remplacé par l'URL canonique du document.

<amp-social-share type="whatsapp"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

Validation

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

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