AMP

Inclusione di contenuti di terzi

Scopri come includere componenti di terze parti nelle tue pagine.

Incorporare un tweet

Per includere un tweet di Twitter nella pagina utilizzando l'elemento amp-twitter.

Per includere un tweet nella pagina, inserire 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 una visualizzazione non ottimale. Regolare manualmente la larghezza e l'altezza fornite oppure utilizzare 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>
Apri questo frammento in playground

SUGGERIMENTO -Altri esempi di amp-twitter sono disponibili su AMP By Example.

Incorporare un oggetto Instagram

Per includere un oggetto Instagram nella pagina, è possibile utilizzare l'elemento amp-instagram.

Per incorporare un Instagram, includi prima il seguente script in <head> :

<script async custom-element="amp-instagram"
  src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

Includere il codice breve dei dati Instagram trovato nell'URL della foto di Instagram. Ad esempio, in https://instagram.com/p/fBwFP , fBwFP è il codice breve dei dati. Inoltre, Instagram utilizza proporzioni fisse per layout reattivi, quindi il valore per larghezza e altezza dovrebbe essere universale.

<amp-instagram data-shortcode="fBwFP"
  width="320"
  height="392"
  layout="responsive">
</amp-instagram>
Apri questo frammento in playground

SUGGERIMENTO: Vedi altri esempi di amp-instagram su AMP By Example.

Visualizzare post o video di Facebook

Per visualizzare post o video di Facebook nella pagina, utilizzare l'elemento amp-facebook.

È necessario includere il seguente script nella sezione <head>:

<script async custom-element="amp-facebook"
  src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Esempio: Inclusione di un post

Sorgente:

<amp-facebook width="486" height="657"
    layout="responsive"
    data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

Anteprima: {amp-facebook0} {/amp-facebook0}

Esempio: Inclusione di un video

Sorgente:

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>

Anteprima: {amp-facebook0} {/amp-facebook0}

SUGGERIMENTO: Altri esempi di amp-facebook sono disponibili su AMP By Example.

Includere un video di YouTube

Per includere un video di YouTube nella pagina, utilizzare l'elemento amp-youtube.

È necessario includere il seguente script nella sezione <head>:

<script async custom-element="amp-youtube"
  src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

L'elemento data-videoid di YouTube si trova in ogni URL delle pagine dei video di YouTube. Ad esempio, in https://www.youtube.com/watch?v=Z1q71gFeRqM, Z1q71gFeRqM è l'id video.

Utilizzare l'attributo layout="responsive" per produrre layout corretti per video con proporzioni 16:9:

<amp-youtube data-videoid="lBTCB7yLs8Y"
  layout="responsive"
  width="560"
  height="315">
</amp-youtube>
Apri questo frammento in playground

SUGGERIMENTO: altri esempi di amp-youtube disponibili su AMP By Example.

Visualizzazione di annunci

Per visualizzare un annuncio nella pagina, utilizzare l'elemento amp-ad. Sono supportati solo gli annunci pubblicati tramite HTTPS.

Nessun codice JavaScript fornito dalla rete di annunci può essere eseguito all'interno del documento AMP. Invece, il sistema di runtime AMP carica un iframe da un'origine diversa (tramite iframe sandbox) ed esegue il codice JS della rete di annunci all'interno di tale iframe sandbox.

È necessario specificare la larghezza e l'altezza dell'annuncio e il tipo di rete pubblicitaria. Il type identifica il modello della rete di annunci. Tipi di annunci diversi richiedono attributi data-* diversi.

<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>
Apri questo frammento in playground

Se la rete di annunci lo supporta, includere un placeholder da visualizzare se non è disponibile alcun annuncio:

Have a great day!
<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>
Apri questo frammento in playground

AMP supporta un'ampia gamma di reti per annunci. Consultare l'elemento amp-ad per l'elenco completo.

CONTINUA A LEGGERE: Ulteriori informazioni sugli annunci sono disponibili nella guida Fornitura di annunci su AMP.