8 componenti AMP per l'integrazione dei social media
Il più grande conflitto che lo standard web mobile di Google, Pagine mobili accelerate ha bisogno di risolvere è rendere i siti mobili più veloci, mentre mantenendoli funzionali e ricchi di contenuti. Oggigiorno contenuti ricchi e coinvolgenti difficilmente possono essere immaginati senza l'incorporazione da siti di social media popolari - tweet, video, audio, post, foto.
Componenti AMP estese - tra le altre grandi caratteristiche: fornire un ottimo modo per integrarsi AMP documenti con diversi tipi di contenuto sociale.
Come funzionano i componenti AMP estesi
Al centro della filosofia di AMP ci sono Google migliori pratiche di prestazione. Per migliorare i tempi di caricamento delle pagine, gli standard AMP sono limitati come puoi usare le tecnologie front-end. Ad esempio, non è possibile utilizzare JavaScript personalizzato, fogli di stile esterni e qualsiasi elemento HTML che carichi risorse esterne, come ad esempio
In cambio, ottieni un sacco di Componenti AMP puoi usare a mostra risorse esterne, come immagini, video, audio, pubblicità, ecc. sul tuo sito.
I componenti AMP sono tag HTML specifici che può essere utilizzato in modo simile ai tag HTML ordinari. Alcuni di loro sono costruito dentro al runtime AMP, mentre la maggioranza funziona come estensioni. Componenti che rendono possibile l'integrazione dei social media nelle pagine AMP sono tutti componenti estesi.
I componenti AMP estesi richiedono di farlo importa lo script di appartenenza nel sezione del documento HTML AMP. Poiché AMP è un progetto open source, il numero di componenti estesi potrebbe aumentare in futuro.
In questo post abbiamo raccolto una manciata di componenti AMP che possono aiutarti con l'integrazione dei social media. Tieni presente che le versioni degli script può cambiare nel tempo, quindi controlla sempre la documentazione prima di includerli sul tuo sito.
1. amp-facebook
Hai sempre bisogno di specificare le dimensioni del post incorporato, il che significa che devi aggiungere un larghezza e a altezza attributo con valori in pixel interi. Puoi trovare le dimensioni corrette facendo clic sul menu "Incorpora" nella parte superiore del post di Facebook.
Sei anche tenuto a aggiungi l'URL del post specificato nel Dati-href attributo. Puoi trovare l'URL facendo clic sul timestamp del post di Facebook e il browser inserirà l'URL univoco nella barra degli indirizzi.
Se lo desidera incorporare un video senza il post di Facebook di appartenenza, aggiungi l'opzionale Dati-embed-as = "video" attributo
Se lo desidera rendere il tuo embed reattivo utilizzare il disposizione attributo con il "Reattivo" valore. Puoi anche usare l'opzionale disposizione attributo su qualsiasi altro componente AMP per controllarne il layout.
Esempio di codice:
Anteprima del codice:
Script per includere:
2. amp-twitter
Puoi incorpora i tweet nelle pagine AMP usando il
Per fare ciò, è necessario specificare l'ID del tweet nel Dati-tweetid attributo. Puoi modificare il modo in cui viene visualizzato il tweet aggiungendo una qualsiasi delle opzioni di visualizzazione dell'APi Twitter come a dati-* Attributo HTML5.
Ad esempio, nell'esempio seguente ho usato le API di Twitter linkColor opzione di visualizzazione come data-link-color (suo dati-* formato) per cambiare il colore del collegamento predefinito con il colore che Hongkiat.com utilizza sul proprio account Twitter.
Esempio di codice:
Anteprima del codice:
Il Attualmente Twitter non fornisce un'API che restituisca gli incorporati di tweet con proporzioni fisse
.
Ciò significa che è necessario impostare manualmente il larghezza e altezza attributi, come il tempo di esecuzione AMP a volte non visualizza una parte (di solito la parte inferiore) del tweet.
È sempre una buona idea controllare come appaiono i tweet incorporati prima di pubblicare la pagina AMP.
Aggiungi un segnaposto
Sebbene non sia richiesto, la documentazione consiglia aggiungendo un segnaposto nel caso in cui il tweet non si carica in una sola volta.
Il segnaposto l'attributo può essere utilizzato su ciascun componente AMP. Il segnaposto è mostrato immediatamente se le risorse finali non sono disponibili. Quando viene caricato l'elemento AMP, nasconde il suo segnaposto.
Guarda come appare il codice di esempio sopra con un segnaposto. Su Twitter, ho semplicemente fatto clic sul pulsante Incorpora Tweet, incollato sulla copia il blocco incondizionato (senza lo script alla fine) e aggiunto segnaposto attributo al etichetta.
Esempio di codice con segnaposto:
Come convalidare le pagine mobili accelerate (#AMP) #Google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15 agosto 2016
Script per includere:
3. amp-instagram
Con
Sei tenuto a specificare le dimensioni di incorporare con il larghezza e altezza attributi, e devi anche aggiungi l'identificatore della foto o del video di Instagram utilizzando il Dati-shortcode attributo.
È possibile trovare l'identificatore alla fine dell'URL, ad esempio per la foto sotto l'URL https://www.instagram.com/p/-PFt7tF8Km/, quindi ho bisogno di usare -PFt7tF8Km come valore per il Dati-shortcode attributo.
Esempio di codice:
Anteprima del codice:
Per i layout reattivi, L'AMP calcola automaticamente anche lo spazio richiesto include il “Instagram chrome” (nome account, data, numero di Mi piace, ecc.).
Questo significa che puoi usare qualsiasi valore per larghezza e altezza, fino al due valori sono uguali (Le foto di Instagram sono in genere quadrate), in quanto il runtime AMP ridimensiona l'immagine in base allo spazio disponibile.
Se la foto non è un quadrato, devi specificarne l'effettivo larghezza e altezza valori.
Per layout fissi, devi includere lo spazio extra (superiore e inferiore: +48 px, sinistra e destra: + 8px) necessari per il chrome di Instagram quando si calcolano le dimensioni dell'immagine.
Script per includere:
4. amp-pinterest
Incorpora un widget Pin
Per incorporare un widget Pin, devi specificare le dimensioni, l'URL del pin usando il Dati-url attributo, e devi anche aggiungere il Dati-do = "embedPin" attributo.
Esempio di codice (dimensione predefinita):
Poiché il widget Pin predefinito è piuttosto piccolo, puoi anche optare per una versione più grande usando il Dati-width = "medium" attributo.
Esempio di codice (dimensioni medie):
Anteprima del codice (dimensioni medie):
Visualizza un bottone Pin It
Puoi anche aggiungere un pulsante Pin It alla tua pagina AMP con l'aiuto di larghezza e altezza dimensioni, tu sei richiesto di specificare quattro attributi per incorporare il pulsante Pin It:
Dati-do = "buttonPin"per consentire al runtime AMP di sapere che questo sarà un pulsante Pin ItDati-urlcon l'URL che vuoi condivideredati-mediacon l'URL assoluto dell'immagine che vuoi far bloccare agli utentidati-Descrizionecon la descrizione che si desidera visualizzare nel modulo di creazione Pin
Ci sono molte diverse dimensioni dei pulsanti, tra cui scegliere, controlla i documenti per tutte le taglie disponibili.
Esempio di codice:
In questo esempio, ho creato un pulsante Pin It che consentiva agli utenti di aggiungere un'immagine da questo ex post di Hongkiat.com. Ho usato la piccola dimensione rettangolare del pulsante.
Anteprima del codice:
Si noti che è necessario utilizzare CSS aggiuntivi per visualizzare il pulsante Pin It nella parte superiore dell'immagine.
Puoi anche creare un pulsante Segui Pinterest usando il pulsante Dati-do = "buttonFollow" attributo e specificando il nome che si desidera visualizzare all'interno del pulsante Segui in dati-label e l'URL del tuo account in Dati-href attributo.
Esempio di codice (pulsante Segui):
Script per includere:
5. amp-Soundcloud
SoundCloud è una piattaforma di distribuzione audio popolare in cui gli utenti possono condividere la propria musica. Con l'aiuto di
Questo componente può essere usato solo con -Altezza fissa disposizione il che significa che devi solo specificare il altezza, e la larghezza verrà calcolata dal runtime AMP. Di conseguenza, verrà incorporato il lettore audio SoundCloud incorporato riempire tutto lo spazio orizzontale disponibile.
Il dati-video attributo a entrambi vero o falso (l'impostazione predefinita è falso).
In entrambe le modalità, devi usare il Dati-TrackID attribuire a specificare l'identificatore dell'audio; puoi trovare l'ID audio facendo clic sul pulsante Condividi sotto il riproduttore audio su SoundCloud.com e cercando l'URL lungo nel codice di incorporamento.
Modalità classica
Il Modalità classica visualizza una piccola immagine di anteprima a sinistra e il lettore audio a destra. È possibile ottenere il valore corretto per il altezza attributo dal codice di incorporamento su SoundCloud.com.
Nella modalità classica, è possibile specificare il colore del lettore audio se si desidera utilizzare il Dati-color attributo (non puoi farlo in Visual Mode).
Esempio di codice (modalità classica):
Anteprima del codice (modalità classica):
Modalità visiva
Nel Modalità visiva, l'immagine in primo piano si trova dietro al lettore audio. Qui, puoi anche trovare il corretto altezza appartenente alla modalità visuale nel codice di incorporamento su SoundCloud.com.
Esempio di codice (modalità visiva):
Esempio di codice (modalità visiva):
Se lo desidera incorporare un audio privato, usa l'opzionale Dati-secret-token attributo.
Script per includere:
6. amp-vine
Vine è un sito di condivisione video di breve durata in cui puoi condividere video lunghi 6 secondi con i tuoi amici. Il
Questo componente AMP è abbastanza semplice, devi solo aggiungere le dimensioni e l'ID del video Vine in Dati-vineid attributo. Puoi ottenere l'ID dall'URL di ciascun Vine.
Dato che i Vines sono quadrati, se usi il layout reattivo, la stessa regola si applica agli incorporamenti di Instagram; puoi aggiungere qualsiasi valore al larghezza e altezza attributi, fino a quando non saranno uguali funzioneranno correttamente.
Esempio di codice:
Anteprima del codice:
Script per includere:
7. amp-youtube
Puoi incorporare video di YouTube sulle pagine AMP con l'aiuto di
Per fare ciò, è necessario aggiungere le dimensioni, oltre all'ID del video in Dati-VideoId attributo. Quando si specifica larghezza e altezza, è importante prestare attenzione alle proporzioni.
Puoi anche usa i parametri degli incorporamenti di YouTube nei documenti AMP, basta inserire il nome del parametro dopo il Dati-param- prefisso.
Esempio di codice:
In questo esempio, ho fatto uso del inizio Parametro YouTube nel Dati-param-start attributo per far iniziare il video a 43s.
Anteprima del codice:
Script per includere:
Altri servizi di condivisione di video
AMP ha anche componenti relative ad altri servizi di condivisione di video lavorare allo stesso modo di
8. amp-social-share
Oltre agli incorporamenti nei social media, puoi anche visualizza i pulsanti di condivisione social sulle tue pagine AMP usando il
La funzione di condivisione social è preconfigurato per alcuni provider, ma con le giuste impostazioni puoi usare il
Pulsanti di condivisione preconfigurati
Pulsanti di condivisione preconfigurati non richiedono troppe impostazioni; devi definire il larghezza (l'impostazione predefinita è 60px) e altezza (predefinito è 44px) attributi, e il nome del provider di social media nel genere attributo.
Con Facebook, devi specificare anche l'ID dell'app Facebook nel Dati-param-APP_ID attributo.
Esempio di codice:
Anteprima del codice:
La pre-configurazione fa ipotesi che l'URL che desideri condividere è l'URL canonico della pagina corrente e il testo che desideri includere nella condivisione è il titolo della pagina.
Se si desidera utilizzare un'altra configurazione, è possibile farlo con quanto segue tre attributi opzionali:
data-textper il testo che desideri includere nella condivisioneDati-urlper l'URL che desideri condividereDati-attribuzioneper il nome della persona o del fornitore a cui si desidera attribuire la condivisione
Pulsanti di condivisione non configurati
Per visualizzare i pulsanti di condivisione social di fornitori non configurati, come WhatsApp, è necessario specificare il protocollo personalizzato del provider nel Dati-share-endpoint attributo. Scopri nei documenti come puoi farlo.
Script per includere:
