AMP

amp-social-share

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.

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