AMP

amp-social-share

Muestra un botón para compartir contenido en redes sociales.

Secuencia de comandos obligatoria
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Diseños admitidos container, fill, fixed, fixed-height, flex-item, nodisplay y responsive
Ejemplos Consulta el ejemplo de amp-social-share de AMP By Example

Descripción general

El componente amp-social-share muestra un botón para compartir contenido en redes sociales de distintos proveedores.

Ejemplo

Ejemplo: Botón básico para compartir contenido en redes sociales

El botón para compartir contenido extrae algunos valores predeterminados de algunos proveedores preconfigurados. Asume que la URL canónica del documento actual es la URL que quieres compartir y que el título de la página es el texto que quieres compartir.

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

Ejemplo: Transferencia de parámetros

Si quieres transferir parámetros al punto de conexión para compartir, puedes especificar data-param-<attribute> para que se añada al punto de conexión.

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

LinkedIn es uno de los proveedores preconfigurados, por lo que no es necesario que incluyas el atributo data-share-endpoint.

Atributos

type (obligatorio) Selecciona un tipo de proveedor. Es obligatorio tanto para los proveedores preconfigurados como para los demás.
data-target Especifica el destino en el que se abrirá el elemento. El valor predeterminado es _blank en todos los casos que no sean correos electrónicos o SMS en iOS, donde se asigna el valor _top. Ten en cuenta que solo recomendamos usar esta anulación con correos electrónicos.
data-share-endpoint Este atributo es obligatorio para los proveedores no configurados.
Algunos proveedores conocidos tienen puntos de conexión para compartir preconfigurados. Para obtener más información, consulta la sección Proveedores preconfigurados. Con los proveedores no configurados, debes especificar el punto de conexión para compartir.
data-param- Todos los atributos data-param- predeterminados se convierten en parámetros de URL y se transfieren al punto de conexión para compartir.

Proveedores preconfigurados

El componente amp-social-share incluye algunos proveedores preconfigurados cuyos puntos de conexión para compartir y algunos parámetros predeterminados se conocen.

Proveedor Tipo Parámetros
API Web Share (activa el cuadro de diálogo para compartir del SO) system
  • data-param-text: es opcional y su valor predeterminado es "Título de la página actual".
  • data-mode: es opcional. Si se le asigna el valor replace, se eliminan las demás opciones para compartir.
Dirección de correo electrónico email
  • data-param-subject: es opcional y su valor predeterminado es "Título de la página actual".
  • data-param-body: es opcional y su valor predeterminado es la URL rel=canonical.
  • data-param-recipient: es opcional y su valor predeterminado es '' (cadena vacía).
Facebook facebook
  • data-param-app_id: es obligatorio y su valor predeterminado es none. Este parámetro es el atributo app_id de Facebook obligatorio en el cuadro de diálogo para compartir de Facebook.
  • data-param-href: es opcional y su valor predeterminado es la URL rel=canonical.
  • data-param-quote: es opcional. Se puede utilizar para compartir una cita o un texto.
LinkedIn linkedin
  • data-param-url: es opcional y su valor predeterminado es la URL rel=canonical.
Pinterest pinterest
  • data-param-media: es opcional (aunque se recomienda usarlo) y su valor predeterminado es none. Es la URL de las redes sociales que se comparte en Pinterest. Si no se le asigna ningún valor, el usuario final tendrá que subir un elemento multimedia de Pinterest.
  • data-param-url: es opcional y su valor predeterminado es la URL rel=canonical.
  • data-param-description: es opcional y su valor predeterminado es "Título de la página actual".
G+ gplus
  • data-param-url: es opcional y su valor predeterminado es la URL rel=canonical.
Tumblr tumblr
  • data-param-url: es opcional y su valor predeterminado es la URL rel=canonical.
  • data-param-text: es opcional y su valor predeterminado es "Título de la página actual".
Twitter twitter
  • data-param-url: es opcional y su valor predeterminado es la URL rel=canonical.
  • data-param-text: es opcional y su valor predeterminado es "Título de la página actual".
WhatsApp whatsapp
  • data-param-text: es opcional y su valor predeterminado es "Título de la página actual - URL de la página actual".
LINE line
  • data-param-url: es opcional y su valor predeterminado es la URL rel=canonical.
  • data-param-text: es opcional y su valor predeterminado es "Título de la página actual".
SMS sms
  • data-param-body: es opcional y su valor predeterminado es la URL rel=title - rel=canonical.

Proveedores no configurados

Además de los proveedores preconfigurados, puedes utilizar proveedores no configurados especificando atributos adicionales en el componente amp-social-share.

Ejemplo: Crear un botón para compartir contenido en un proveedor no configurado

En el siguiente ejemplo se crea un botón para compartir contenido a través de Facebook Messenger. Para ello, se asigna al atributo data-share-endpoint el punto de conexión del protocolo personalizado 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>

Como estos proveedores no están preconfigurados, deberás crear la imagen y los estilos de botón adecuados para cada proveedor.

Estilos

Estilos predeterminados

De forma predeterminada, amp-social-share incluye algunos proveedores preconfigurados conocidos. Los botones de estos proveedores incluyen el color y el logotipo oficiales del proveedor. El ancho predeterminado es de 60 píxeles y el alto predeterminado es de 44 píxeles.

En AMP Start encontrarás menús de navegación prediseñados que podrás adaptar para tus páginas AMP.

Estilos personalizados

Si quieres aplicar un estilo propio, simplemente anula los estilos proporcionados, como el siguiente:

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

Sustitución de variables

Puedes usar la sustitución global de variables AMP en el elemento <amp-social-share>. En el siguiente ejemplo, TITLE se sustituye por el título de la página, y CANONICAL_URL se sustituye por la URL canónica del documento.

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

Validación

Consulta las reglas de amp-social-share en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

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