Introducción: Una característica muy popular en las páginas web es el botón Me gusta de las plataformas de redes sociales. El amp-facebook-like se usa para incrustar un botón Me gusta de Facebook en una página HTML de AMP. Aquí, cuando se incrusta un botón Me gusta de Facebook, puede gustar la publicación sin ir a Facebook.
Script requerido: agregue el siguiente script que contiene la fuente para importar el componente similar a amp-facebook .
HTML
<script async custom-element="amp-facebook-like" src= "https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"> </script>
Atributos:
- data-href: URL de la página a la que le gustará.
- data-action: string que se mostrará en el botón. El valor predeterminado es «Me gusta».
- data-colorscheme: esquema de color que debe usarse fuera del botón. Por defecto, es claro y también se puede mantener oscuro.
- data-size: Se utiliza para cambiar el tamaño del botón. De forma predeterminada, es pequeño y también se puede establecer en grande.
- data-layout : Se utiliza para cambiar el diseño del botón. Hay cuatro diseños disponibles y estos son:
- estándar (predeterminado)
- botón
- recuento de botón
- box_count
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>amp-facebook-like</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import the `amp-facebook-like`
component to add a like button-->
<script async custom-element=
"amp-facebook-like" src=
"https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-facebook-like/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<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>
</head>
<body>
<amp-facebook-like width="100" height="30"
layout="fixed" data-layout="button_count"
data-href=
"https://www.facebook.com/testesmegadivertidos/">
</amp-facebook-like>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA