Introducción: Algunas veces, como desarrollador web, queremos compartir nuestros enlaces de redes sociales y para eso, tenemos que mostrar los botones de redes sociales y amp-addthis está hecho únicamente para este propósito. El componente amp-addthis integra la barra flotante de AddThis y los botones de compartir en línea.
Configuración: debe importar el componente amp-addthis en su encabezado para usar esta etiqueta.
html
<script async custom-element="amp-addthis" src= "https://cdn.ampproject.org/v0/amp-addthis-0.1.js"> </script>
Vaya a este sitio web https://www.addthis.com/register y luego cree su widget personalizado que es absolutamente gratuito. Después de completar los detalles y crear su widget personalizado, se lo dirigirá a una página que contiene el código. Cópielo y péguelo en el código de su programa.
Atributos:
- data-pub-id: es el ID del editor del editor del widget que se está utilizando.
- data-widget-id: es el ID del widget que se está utilizando.
- data-widget-type: este atributo describe el tipo de widget entre flotante y en línea.
- data-title: Es un atributo opcional y establece el título de la herramienta. Si no está presente, se tomará el presente en la documentación.
- data-url: Es un atributo opcional y se usa para establecer la URL que se compartirá. Si no está presente, se tomará el presente en la documentación.
- data-media: Es un atributo opcional que se utiliza para definir la URL de los medios a compartir. Si no está presente, se deja sin definir.
- data-description: Es un atributo opcional y se utiliza para establecer la descripción de la página. Si no está presente, se deja sin definir.
Ejemplo:
html
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8" />
<script async
src="https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element="amp-accordion"
src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-addthis/index.html"/>
<meta name="viewport" content="width=device-width,
minimum-scale=1, initial-scale=1" />
<title>GeeksForGeeks | amp-addthis</title>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style>
</noscript>
<!-- Import the `amp-addthis` component.
It is mandatory script -->
<script async custom-element="amp-addthis"
src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js">
</script>
<style amp-custom>
h1 {
color: forestgreen;
}
h3 {
color: crimson;
}
</style>
</head>
<body>
<center>
<h1>Geeks For Geeks</h1>
<h3>Inline Format</h3>
</center>
<!-- Integrate share buttons into your
content for a seamless sharing
experience. The code below should
be replaced with your code -->
<amp-addthis width="320" height="92"
data-pub-id="ra-5c191331410932ff"
data-widget-id="mv93"
data-widget-type="inline">
</amp-addthis>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA