Twitter se ha convertido en una forma moderna de comunicar pensamientos y noticias y puede integrarse fácilmente en una página AMP HTM L mediante amp-twitter, que incorpora un tweet de Twitter .
Script requerido: Importación del componente amp-twitter en el encabezado.
HTML
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"> </script>
Atributo:
- data-tweetid: Igual que data-momentid o data-timeline-source-type. Esta es la identificación de un tweet de Twitter. Por ejemplo: 1009149991452135424.
- línea de tiempo de datos: mostrará la línea de tiempo de la cuenta de Twitter de AMP.
Ejemplo:
HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Google AMP amp-twitter</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Don't forget to import the
twitter component -->
<script async custom-element="amp-twitter"
src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-twitter/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-twitter width="375" height="472"
layout="responsive"
data-tweetid="1307176901916516354">
</amp-twitter>
<amp-twitter width="390" height="330"
layout="responsive"
data-tweetid="1307176901916516354"
data-cards="hidden">
</amp-twitter>
</body>
</html>
Producción:
salida del primer componente amp-twitter
salida del segundo componente amp-twitter
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA