amp-social-share
Description
Se está desarrollando la función para hacer un seguimiento del uso compartido de contenido en redes sociales.
Required Scripts
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Supported Layouts
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 |
|
| Dirección de correo electrónico | email |
|
facebook |
| |
linkedin |
| |
pinterest |
| |
| G+ | gplus |
|
| Tumblr | tumblr |
|
twitter |
| |
whatsapp |
| |
| LINE | line |
|
| SMS | sms |
|
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.
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.
¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.
Ir a Stack Overflow ¿Encontró un error o considera que falta una función?¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.
Ir a GitHub