8 componenti AMP per l'integrazione dei social media
Il più grande conflitto che lo standard web mobile di Google, le Pagine per dispositivi mobili accelerate devono risolvere, è rendere i siti mobili più veloci, mantenendoli funzionali e ricchi di contenuti . Oggigiorno contenuti ricchi e coinvolgenti possono difficilmente essere immaginati senza l'incorporazione da siti di social media popolari - tweet, video, audio, post, foto.
I componenti AMP estesi, tra le altre grandi caratteristiche, rappresentano un ottimo modo per integrare i documenti AMP con diversi tipi di contenuto sociale.
Come funzionano i componenti AMP estesi
Al centro della filosofia di AMP ci sono le migliori pratiche di performance di Google. Per migliorare i tempi di caricamento delle pagine, gli standard AMP limitano il modo in cui è possibile utilizzare 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 etichetta.
In cambio, ottieni una serie di componenti AMP che puoi utilizzare per visualizzare sul tuo sito risorse esterne, come immagini, video, audio, pubblicità, ecc.
I componenti AMP sono tag HTML specifici che possono essere utilizzati in modo simile ai normali tag HTML. Alcuni di essi sono incorporati nel runtime AMP, mentre la maggior parte funziona come estensione . I componenti che rendono possibile l'integrazione dei social media nelle pagine AMP sono tutti componenti estesi .
I componenti AMP estesi richiedono l' importazione dello script di appartenenza nel file
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 nell'integrazione dei social media . Tieni presente che le versioni degli script possono cambiare nel tempo, quindi controlla sempre la documentazione prima di includerli sul tuo sito.
1. amp-facebook
rende possibile incorporare un post o video di Facebook in una pagina AMP.
Devi sempre specificare le dimensioni del post incorporato, il che significa che devi aggiungere un attributo width e height con valori in pixel interi. Puoi trovare le dimensioni corrette facendo clic sul menu "Incorpora" nella parte superiore del post di Facebook.
È inoltre necessario aggiungere l'URL del post specificato nell'attributo data-href . Puoi trovare l'URL facendo clic sul timestamp del post di Facebook e il browser inserirà l'URL univoco nella barra degli indirizzi.
Se vuoi incorporare un video senza il post di Facebook di appartenenza, aggiungi l'attributo facoltativo data-embed-as="video"
Se vuoi rendere reattivo il tuo embed usa l'attributo layout con il valore "responsive" . Puoi anche utilizzare l'attributo di layout opzionale su qualsiasi altro componente AMP per controllarne il layout.
Esempio di codice:
Anteprima del codice:
Script per includere:
2. amp-twitter
Puoi incorporare i tweet nelle pagine AMP usando il componente.
Per fare ciò, è necessario specificare l'ID del tweet nell'attributo data-tweetid . Puoi modificare il modo in cui viene visualizzato il tweet aggiungendo una qualsiasi delle opzioni di visualizzazione dell'APi Twitter come attributo data-* HTML5.
Ad esempio, nell'esempio seguente ho utilizzato l'opzione di visualizzazione linkColor dell'API di linkColor come data-link-color (il suo formato data-* ) per cambiare il colore del collegamento predefinito con il colore che Hongkiat.com utilizza sul suo account Twitter.
Esempio di codice:
Anteprima del codice:
Il il componente non è ancora perfetto, i documenti di Github affermano che Twitter attualmente non fornisce un'API che restituisca gli aspect ratio fissi di Tweet .
Ciò significa che è necessario impostare manualmente gli attributi width e height, poiché a volte il runtime AMP 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 necessario, la documentazione consiglia di aggiungere un segnaposto nel caso in cui il tweet non venga caricato contemporaneamente.
L'attributo placeholder può essere utilizzato su ciascun componente AMP. Il segnaposto viene visualizzato immediatamente se le risorse finali non sono disponibili. Quando viene caricato l'elemento AMP, nasconde il 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 l'attributo placeholder al
etichetta.
Esempio di codice con segnaposto:
Come convalidare pagine mobili accelerate ( )
- Hongkiat (@hongkiat)
Script per includere:
3. amp-instagram
Con , puoi incorporare foto e video di Instagram nelle tue pagine AMP.
Devi specificare le dimensioni dell'embed con gli attributi width e height e devi anche aggiungere l'identificativo della foto o del video Instagram usando l'attributo data-shortcode .
Puoi trovare l'identificatore alla fine dell'URL, per esempio per la foto sotto l'URL è https://www.instagram.com/p/-PFt7tF8Km/, quindi ho bisogno di usare -PFt7tF8Km come valore per i data-shortcode attributo.
Esempio di codice:
Anteprima del codice:
Per i layout reattivi, AMP calcola automaticamente lo spazio richiesto che include anche "Instagram chrome" (nome account, data, numero di Mi piace, ecc.).
Ciò significa che puoi utilizzare qualsiasi valore per width e height, finché i due valori non 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 specificare i suoi valori di width e height effettivi.
Per i layout fissi, è necessario 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
ti consente di incorporare un widget Pin o un pulsante Pin It in un documento HTML AMP.
Incorpora un widget Pin
Per incorporare un widget Pin, devi specificare le dimensioni, l'URL del pin utilizzando l'attributo data-url e devi anche aggiungere l'attributo data-do="embedPin" .
Esempio di codice (dimensione predefinita):
Poiché il widget Pin predefinito è piuttosto piccolo, puoi anche optare per una versione più grande utilizzando l'attributo data-width="medium" .
Esempio di codice (dimensioni medie):
Anteprima del codice (dimensioni medie):
Mostra un bottone Pin It
Puoi anche aggiungere un pulsante Pin It alla tua pagina AMP con l'aiuto di componente. Oltre alle dimensioni di width e height, è necessario specificare quattro attributi per incorporare il pulsante Pin It:
data-do="buttonPin" per consentire al runtime AMP di sapere che questo sarà un pulsante Pin It
data-url con l'URL che vuoi condividere
data-media con l'URL assoluto dell'immagine che vuoi far pin agli utenti
data-description con 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 di Pinterest utilizzando l'attributo data-do="buttonFollow" e specificando il nome che desideri visualizzare all'interno del pulsante Segui data-label e l'URL del tuo account nell'attributo data-href .
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 componente è possibile riprodurre tracce SoundCloud direttamente dalla pagina HTML AMP.
Questo componente può essere utilizzato solo con layout ad fixed-height che significa che è necessario specificare solo l' height e la larghezza verrà calcolata dal runtime AMP. Di conseguenza, il lettore audio SoundCloud incorporato riempie tutto lo spazio orizzontale disponibile .
Il il componente può essere visualizzato in modalità classica o visiva . È possibile scegliere tra le due modalità impostando il valore dell'attributo data-visual su true o false (il valore predefinito è false ).
In entrambe le modalità, devi usare l'attributo data-trackid per specificare l'identificatore dell'audio; è possibile trovare l'ID audio facendo clic sul pulsante Condividi sotto il lettore audio su SoundCloud.com e cercando l'URL di forma estesa all'interno del codice di incorporamento.
Modalità classica
La Classic Mode visualizza una piccola miniatura sulla sinistra e il lettore audio sulla destra. Puoi ottenere il valore corretto per l'attributo height dal codice Embed su SoundCloud.com.
Nella modalità classica, è possibile specificare il colore del lettore audio se si desidera utilizzare l'attributo data-color (non è possibile farlo in modalità visiva).
Esempio di codice (modalità classica):
Anteprima del codice (modalità classica):
Modalità visiva
In Visual Mode, l'immagine in primo piano si estende dietro il lettore audio. Qui, puoi anche trovare l' height appropriata che appartiene alla modalità visiva nel codice Incorpora su SoundCloud.com.
Esempio di codice (modalità visiva):
Esempio di codice (modalità visiva):
Se si desidera incorporare un audio privato, utilizzare l'attributo opzionale data-secret-token .
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 componente rende possibile incorporare facilmente video Vine nelle pagine HTML AMP.
Questo componente AMP è abbastanza semplice, è sufficiente aggiungere le dimensioni e l'ID del video Vine nell'attributo data-vineid . Puoi ottenere l'ID dall'URL di ogni vite.
Dato che i Vines sono quadrati, se usi il layout reattivo, la stessa regola si applica agli incorporamenti di Instagram; puoi aggiungere qualsiasi valore agli attributi width e height, finché non sono uguali per cui funzioneranno correttamente.
Esempio di codice:
Anteprima del codice:
Script per includere:
7. amp-youtube
Puoi incorporare video di YouTube su pagine AMP con l'aiuto di componente.
Per fare ciò, è necessario aggiungere le dimensioni, oltre all'ID del video nell'attributo data-videoid . Quando si specifica width e height, è importante prestare attenzione alle proporzioni .
Puoi anche utilizzare i parametri di incorporamenti di YouTube nei documenti AMP, basta inserire il nome del parametro dopo il prefisso data-param- .
Esempio di codice:
In questo esempio, ho utilizzato il parametro start YouTube nell'attributo data-param-start per fare in modo che il video inizi a 43s.
Anteprima del codice:
Script per includere:
Altri servizi di condivisione di video
AMP ha anche componenti correlati ad altri servizi di condivisione di video, che funzionano in modo simile a . Puoi utilizzare i seguenti componenti AMP estesi per gli incorporamenti video di provider diversi da YouTube:
per Vimeo incorpora
per incorporamenti di Dailymotion
per incorporamenti Brightcove
8. amp-social-share
Oltre agli incorporamenti nei social media, puoi anche visualizzare i pulsanti di condivisione social sulle tue pagine AMP utilizzando il pulsante componente.
La funzione di condivisione social è preconfigurata per alcuni provider, ma con le giuste impostazioni è possibile utilizzare il componente per qualsiasi altro pulsante di condivisione social.
Pulsanti di condivisione preconfigurati
I pulsanti di condivisione preconfigurati non richiedono troppe impostazioni; devi definire gli attributi width (default è 60px) e height (default è 44px) e il nome del social media provider nell'attributo type .
Con Facebook, devi anche specificare l'ID dell'app Facebook nell'attributo data-param-app_id .
Esempio di codice:
Anteprima del codice:
La pre-configurazione fa presupporre che l'URL che si desidera condividere sia l'URL canonico della pagina corrente e che il testo che si desidera includere nella condivisione sia il titolo della pagina.
Se si desidera utilizzare un'altra configurazione, è possibile farlo con i seguenti tre attributi facoltativi :
data-text per il testo che vuoi includere nella condivisione
data-url per l'URL che desideri condividere
data-attribution per il nome della persona o del fornitore a cui si desidera attribuire la propria condivisione
Pulsanti di condivisione non configurati
Per visualizzare i pulsanti di condivisione social dei provider non configurati, ad esempio WhatsApp, è necessario specificare il protocollo personalizzato del provider nell'attributo data-share-endpoint . Dai un'occhiata ai documenti su come puoi farlo.
Alla fine dell'anno scorso, Facebook ha testato una funzionalità interessante chiamata " Trova Wi-Fi " nell'app iOS di Facebook. Dopo quasi sei mesi di test, la funzionalità è ora disponibile per il pubblico, con l'app per Android di Facebook che fa parte del rollout.Se la funzione è stata pubblicata in diretta sulla tua app di Facebook, sarai in grado di vedere la selezione Trova Wi-Fi nel menu "Altro" dell'app. Do
L'intera scena fai-da-te (fai-da-te), open source maker electronics, che ha guadagnato molta popolarità negli ultimi anni, ha portato alla creazione di molti dispositivi e kit davvero interessanti sul mercato. Il bello, naturalmente, è che non si limita solo agli appassionati di informatica e robotica: anche i musicisti hanno beneficiato di questo movimento DIY open source.A
it.hideout-lastation.com
Script per includere:
Il Per i layout reattivi, AMP calcola automaticamente lo spazio richiesto che include anche "Instagram chrome" (nome account, data, numero di Mi piace, ecc.).
Mostra un bottone Pin It
Puoi anche creare un pulsante Segui di Pinterest utilizzando l'attributo
Modalità visiva
Se si desidera incorporare un audio privato, utilizzare l'attributo opzionale
Script per includere:
Script per includere:
La pre-configurazione fa presupporre che l'URL che si desidera condividere sia l'URL canonico della pagina corrente e che il testo che si desidera includere nella condivisione sia il titolo della pagina.
Per i layout reattivi, AMP calcola automaticamente lo spazio richiesto che include anche "Instagram chrome" (nome account, data, numero di Mi piace, ecc.).
Mostra un bottone Pin It 
Puoi anche creare un pulsante Segui di Pinterest utilizzando l'attributo 
Modalità visiva 
Se si desidera incorporare un audio privato, utilizzare l'attributo opzionale 
Script per includere:
Script per includere:
La pre-configurazione fa presupporre che l'URL che si desidera condividere sia l'URL canonico della pagina corrente e che il testo che si desidera includere nella condivisione sia il titolo della pagina.
