amp-social-share

1.0 0.1

<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.

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

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.

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.

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.