Al agregar publicaciones en redes sociales, los comentarios son características atractivas en los sitios web que los desarrolladores tienden a agregar e Instagram, que es una de las redes sociales populares en 2020, la incorporación de publicaciones de Instagram es útil cuando se busca atraer audiencia. En AMP HTML podemos hacer exactamente esto usando amp-instagram.
Scripts requeridos: importar el encabezado amp-instagram al encabezado.
HTML
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"> </script>
Atributos:
- data-shortcode: se encuentra en todas las URL de las fotos de Instagram. Ejemplo de la parte subrayada en negrita en el siguiente enlace https://www.instagram.com/p/ CEZCQC-osEP /
- data-captioned: cambiará el tamaño a la altura original, incluido el título.
Ejemplo:
HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Google AMP amp-instagram</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-instagram/index.html">
<!-- Import the amp-instagram component
in the header -->
<script async custom-element="amp-instagram"
src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js">
</script>
<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-instagram data-shortcode="CEZCQC-osEP"
width="1" height="1" layout="responsive">
</amp-instagram>
<!-- You can include captions with the
`data-captioned` attribute -->
<amp-instagram data-shortcode="CEQ17teInqd"
data-captioned width="1" height="1"
layout="responsive">
</amp-instagram>
</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