Includere contenuti di terze parti
Scopri come includere componenti di terze parti nelle tue pagine.
Incorporare un tweet
Incorpora un tweet di Twitter nella pagina utilizzando l'elemento amp-twitter.
Per includere un tweet nella pagina, inserisci innanzitutto lo script seguente nella sezione <head>:
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Attualmente i tweet vengono ridimensionati automaticamente e proporzionalmente in base alle dimensioni specificate, ma questo comportamento potrebbe portare a un aspetto non ottimale. Regola manualmente la larghezza e l'altezza fornite oppure utilizza l'attributo media per selezionare le proporzioni in base alla larghezza dello schermo.
<amp-twitter width="500" height="583" layout="responsive" data-tweetid="638793490521001985"> </amp-twitter>
Incorporare una foto di Instagram
Incorpora una foto di Instagram nella pagina utilizzando l'elemento amp-instagram.
Per includere una foto di Instagram, inserisci innanzitutto lo script seguente nella sezione <head>:
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
Includi l'elemento data-shortcode di Instagram indicato nell'URL della foto del servizio. Ad esempio, nell'URL https://instagram.com/p/fBwFP l'elemento data-shortcode è fBwFP.
Inoltre, Instagram utilizza proporzioni fisse per i layout reattivi, quindi il valore di larghezza e altezza dovrebbe essere universale.
<amp-instagram data-shortcode="fBwFP" width="320" height="392" layout="responsive"> </amp-instagram>
Mostrare post o video di Facebook
Mostra un post o un video di Facebook nella pagina utilizzando l'elemento amp-facebook.
Devi includere lo script seguente nella sezione <head>:
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Esempio: Incorporamento di un post
Source:
<amp-facebook width="486" height="657" layout="responsive" data-href="https://www.facebook.com/zuck/posts/10102593740125791"> </amp-facebook>
Preview:
Esempio: Incorporamento di un video
Source:
<amp-facebook width="476" height="316" layout="responsive" data-embed-as="video" data-href="https://www.facebook.com/nasaearth/videos/10155187938052139"> </amp-facebook>
Preview:
Includere un video di YouTube
Includi un video di YouTube nella pagina utilizzando l'elemento amp-youtube.
Devi includere lo script seguente nella sezione <head>:
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Puoi trovare l'elemento data-videoid di YouTube nell'URL di ogni pagina video di YouTube.
Ad esempio, nell'URL https://www.youtube.com/watch?v=Z1q71gFeRqM, l'ID video è Z1q71gFeRqM.
Utilizza layout="responsive" per ottenere i layout corretti per video con proporzioni 16:9:
<amp-youtube data-videoid="lBTCB7yLs8Y" layout="responsive" width="560" height="315"> </amp-youtube>
Mostrare un annuncio
Mostra un annuncio nella pagina utilizzando l'elemento amp-ad.
Sono supportati soltanto gli annunci pubblicati tramite HTTPS.
All'interno del documento AMP non è possibile eseguire codice JavaScript fornito da reti pubblicitarie. Il runtime AMP carica un iframe da un'origine diversa (tramite la sandbox iframe) ed esegue il codice JavaScript della rete pubblicitaria all'interno della sandbox iframe.
Devi specificare la larghezza e l'altezza dell'annuncio, oltre al tipo di rete pubblicitaria.
L'attributo type identifica il modello della rete pubblicitaria.
Tipi di annunci diversi richiedono attributi data-* differenti.
<amp-ad width="300" height="250" type="a9" data-amzn_assoc_ad_mode="auto" data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5" data-recomtype="async" data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"> </amp-ad>
Includi un attributo placeholder (se supportato dalla rete pubblicitaria) da mostrare se non ci sono annunci disponibili:
<amp-ad width="300" height="250" type="a9" data-amzn_assoc_ad_mode="auto" data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5" data-recomtype="async" data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"> <div placeholder>Have a great day!</div> </amp-ad>
AMP supporta una vasta gamma di reti pubblicitarie. Consulta un elenco completo.