Important: this documentation is not applicable to your currently selected format ads!
amp-social-share
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>
Supported Layouts
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 |
|
email |
| |
facebook |
| |
linkedin |
| |
pinterest |
| |
| Google+ | gplus |
|
| Tumblr | tumblr |
|
twitter |
| |
whatsapp |
| |
| LINE | line |
|
| SMS | sms |
|
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.
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