Agregar videos y comentarios de Facebook a los sitios web ahora es una característica popular y atractiva en amp. Lo hacemos fácilmente usando el componente amp-facebook,
Scripts requeridos: use el siguiente script para importar el componente amp-facebook
HTML
<script async custom-element="amp-facebook" src= "https://cdn.ampproject.org/v0/amp-facebook-0.1.js"> </script>
Atributos:
- data-href: la URL del video de Facebook es para obtener la URL, haga clic en la opción superior derecha en el video, haga clic en la configuración avanzada y copie la URL.
- data-embed-as: un video se puede incrustar como:
- publicar (predeterminado)
- video
- data-include-comment-parent: este atributo se puede establecer como verdadero o falso, el valor predeterminado es falso si se establece como verdadero, entonces también se puede ver el comentario principal de una respuesta de comentario.
- data-allowfullscreen: Establece el video en pantalla completa. El valor predeterminado no es pantalla completa.
- data-locale: Por defecto, la configuración regional se establece en el idioma del sistema del usuario; puede cambiar eso especificando una configuración regional.
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP embed facebook post</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import the `amp-facebook` component -->
<script async custom-element="amp-facebook"
src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-facebook/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>
<!--embedding fb video as video-->
<amp-facebook width="552" height="310"
layout="responsive" data-embed-as="video"
data-href=
"https://www.facebook.com/geeksforgeeks.org/videos/549199759161152/">
</amp-facebook>
</body>
</html>
Producción
Si el video estuviera incrustado como salida posterior sería:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA