Molti proprietari di siti web desiderano aggiungere l'autoplay dei video incorporati da Instagram alle loro pagine per catturare immediatamente l'attenzione dei visitatori.
Purtroppo, incollando il codice nativo nel tuo sito e aspettandoti che il video venga riprodotto automaticamente, rimarrai deluso.
So esattamente quanto sia frustrante passare il tempo a modificare l'HTML solo per rendersi conto che l'iframe standard di Instagram blocca completamente la riproduzione automatica.
Sembra un grosso ostacolo quando vuoi solo che i tuoi contenuti social dinamici risaltino e mantengano gli utenti coinvolti.
La buona notizia è che puoi comunque ottenere i vantaggi di un video in movimento che attira l'attenzione senza gli svantaggi del metodo manuale ormai superato.
In questa guida spiegherò perché l'autoplay nativo non funziona e ti mostrerò una soluzione molto migliore per visualizzare i tuoi video in modo impeccabile.
- È possibile abilitare la riproduzione automatica su un video Instagram incorporato?
- Il modo migliore per visualizzare i video Instagram incorporati nel tuo sito web
- Come incorporare i video di Instagram nel tuo sito web [Metodo consigliato]
- Sei pronto a incorporare i video di Instagram nel modo giusto?
È possibile abilitare la riproduzione automatica su un video Instagram incorporato?
No, non è possibile abilitare la riproduzione automatica su un video standard incorporato in Instagram.
Se hai provato ad aggiungere la riproduzione automatica al tuo codice di incorporamento Instagram e non è successo nulla, non sei il solo.
Invece di incorporare effettivamente il video, il codice di incorporamento ufficiale di Instagram genera un iframe che mostra l'aspetto del video.
Quando un visitatore clicca sul video, viene semplicemente reindirizzato a Instagram. Questo significa che stai perdendo un visitatore del sito web, il che è un grosso problema.
Ecco un breve riassunto di ciò che devi sapere:
- The native Instagram embed uses an <iframe>, and browsers block autoplay on <iframe> content from third-party sources by default.
- Il sistema di incorporamento di Instagram non supporta l'attributo autoplay: aggiungerlo al codice non ha alcun effetto.
- Esiste una soluzione alternativa che consente di ottenere lo stesso risultato accattivante senza ricorrere alla riproduzione automatica non funzionante, e la tratteremo in questa guida.
L'autoplay nei contenuti incorporati su Instagram è davvero una buona idea?
La riproduzione automatica può attirare rapidamente l'attenzione, ma presenta alcuni svantaggi reali che vale la pena valutare prima di utilizzarla.
La risposta onesta è: dipende dai tuoi obiettivi, poiché ci sono dei compromessi reali da entrambe le parti.
Ecco una panoramica equilibrata dei pro e dei contro:
| Il caso a favore dell'autoplay | Il caso CONTRO l'autoplay |
|---|---|
| Cattura immediatamente l'attenzione dei visitatori | Rallenta la velocità di caricamento delle pagine: i video sono risorse di grandi dimensioni |
| Mantiene gli utenti coinvolti nella pagina | Non supportato dagli embed nativi di Instagram |
| Mostra contenuti dinamici senza richiedere alcun clic | I browser bloccano sempre più spesso la riproduzione automatica e l'audio |
| Può risultare invadente per i visitatori |
La buona notizia è che esiste un modo per ottenere i vantaggi dell'autoplay in termini di attenzione, senza compromettere la velocità della pagina.
Il modo migliore per visualizzare i video Instagram incorporati nel tuo sito web
Il metodo manuale di incorporamento di Instagram non funziona per la riproduzione automatica perché non è possibile controllare il comportamento del lettore di Instagram.
When you copy the official embed code from Instagram, it generates an <iframe> tag that loads Instagram’s external player directly onto your page.
Anche se Instagram supportasse la riproduzione automatica, i browser moderni probabilmente la bloccherebbero comunque.
"Come avrete notato, i browser web stanno adottando politiche di riproduzione automatica più rigorose al fine di migliorare l'esperienza degli utenti, ridurre al minimo gli incentivi all'installazione di ad blocker e diminuire il consumo di dati su reti costose e/o limitate."
– Chrome per sviluppatori
Il risultato finale è che la riproduzione automatica dei video incorporati di terze parti viene bloccata da due direzioni contemporaneamente: da Instagram e dal browser stesso.
Il modo migliore: ottieni un comportamento simile all'autoplay con Instagram Feed Pro
Instagram Feed Pro è un plugin WordPress che ti permette di ottenere i vantaggi dell'autoplay, che attira l'attenzione, senza gli svantaggi.
Invece di caricare un file video pesante al momento dell'apertura della pagina, Instagram Feed Pro mostra una miniatura leggera.
Quando un visitatore clicca su di esso, il video viene riprodotto direttamente sul tuo sito in una lightbox senza reindirizzarlo su Instagram.
Ciò significa che potrai goderti un'esperienza video dinamica e accattivante senza rallentare la velocità della pagina o rischiare di perdere visitatori a favore di Instagram.
Ecco una rapida panoramica delle funzionalità del plugin:
- Aggiornamenti automatici con i tuoi ultimi post su Instagram: non è necessario aggiornare manualmente la pagina.
- Personalizzatore visivo integrato per controllare l'aspetto del feed dei video di Instagram
- Temi e modelli predefiniti per scegliere rapidamente un design accattivante
- Supporta feed Instagram con hashtag, @menzioni, album fotografici e Storie.
- I video vengono riprodotti sul tuo sito (in una lightbox) in modo che i visitatori non debbano lasciare la tua pagina.
Poiché i video vengono caricati solo quando un visitatore clicca su "play", la velocità della tua pagina rimane elevata, anche quando visualizzi tantissimi video.
Oltre a offrire ai visitatori un'esperienza migliore, questo è ottimo anche per la SEO del tuo sito.
Sei pronto ad aggiungere video Instagram incorporati e sfruttare i vantaggi della riproduzione automatica?
Puoi registrarti a Instagram Feed Pro qui!
Come incorporare i video di Instagram nel tuo sito web [Metodo consigliato]
Ecco una guida dettagliata su come configurare Instagram Feed Pro sul tuo sito WordPress. L'intero processo richiede circa 5 minuti.
Passo 1: Installare e attivare il plugin Instagram Feed Pro
Per iniziare, dovrai acquistare e scaricare Instagram Feed Pro da qui.
Una volta ottenuto il file del plugin, installalo e attivalo sul tuo sito WordPress (consulta questa guida per principianti per assistenza su questo passaggio).
Passaggio 2: crea un feed video Instagram
Ora è il momento di creare il tuo primo feed video Instagram. Vai su Feed Instagram » Tutti i feed dalla tua dashboard WordPress.
Fai clic sul pulsante Aggiungi nuovo per avviare la procedura di configurazione.
Ti verrà quindi chiesto di scegliere un tipo di feed: puoi selezionare tra Cronologia utente, Hashtag pubblico o Post taggati.
Una volta effettuata la selezione, fare clic su Avanti per andare avanti.
Fase 3: Collegare l'account Instagram
Nella schermata successiva, dovrai collegare il tuo account Instagram in modo che il plugin possa importare i tuoi contenuti. Clicca sul pulsante Aggiungi fonte per iniziare.
Ti verrà chiesto di scegliere un tipo di connessione: Base o Avanzata.
Funzioni di base per un semplice feed Instagram che consente di visualizzare i propri post.
D'altra parte, una connessione avanzata ti consente di mostrare feed hashtag, storie Instagram e menzioni.
Seleziona quello che soddisfa le tue esigenze, quindi fai clic su Connetti.
Poiché stiamo utilizzando un feed di base, puoi cliccare sul pulsante Connetti con Instagram.
Una connessione avanzata significa che dovrai collegarti tramite Facebook, ma il processo è lo stesso.
Successivamente, puoi scegliere di concedere al plugin l'accesso in sola lettura al tuo account Instagram.
Nota: poiché si tratta di un accesso di sola lettura, il plugin può solo visualizzare le tue informazioni e non potrà apportare alcuna modifica. Scopri perché Smash Balloon è sicuro
Basta cliccare su Consenti per autorizzare il plugin ad accedere al tuo account.
Infine, seleziona il tuo account Instagram come fonte e clicca su Avanti.
Passaggio 4: personalizza i tuoi video Instagram incorporati
Qui puoi controllare esattamente l'aspetto dei tuoi video Instagram e quali contenuti vengono mostrati.
Nella schermata seguente, seleziona un tema feed tra le opzioni disponibili. Ogni tema modifica i colori, le icone, lo stile dei post e altro ancora.
Dopo aver selezionato un'opzione, clicca su Avanti.
Successivamente, procedi alla selezione di un modello che si adatti al tuo design. Ogni modello mostrerà i tuoi post con un layout diverso.
Come prima, puoi cliccare su Avanti per confermare la tua scelta.
Filtra il tuo feed per mostrare solo i video
Se lo desideri, puoi utilizzare questo feed per mostrare contemporaneamente i video e le foto incorporati da Instagram.
Per visualizzare solo i video, clicca prima su Impostazioni in alto e seleziona Filtri e moderazione.
Scorri verso il basso fino alla sezione Mostra tipi specifici di post.
Deseleziona l'opzione Foto in modo che il tuo feed mostri solo contenuti video.
Puoi quindi scegliere se mostrare i video del feed, i reel o entrambi.
Una volta soddisfatto della selezione, clicca su Salva modifiche.
Ora clicca sul pulsante Impostazioni per aprire nuovamente il personalizzatore visivo.
Questa volta, clicca sulla scheda Personalizza in alto.
Scegliere un layout di feed
A destra, hai un'anteprima live dei tuoi embed Instagram. A sinistra, hai un pannello con le opzioni di personalizzazione.
Per prima cosa, clicca su Layout feed per verificare i layout disponibili.
Successivamente, il pannello mostrerà 4 layout tra cui scegliere: Griglia, Carosello, Masonry o Evidenzia.
Una griglia è perfetta per mostrare tantissimi post Instagram contemporaneamente. D'altra parte, puoi utilizzare un layout masonry per mantenere le proporzioni originali dei tuoi video Instagram.
Puoi anche utilizzare un layout a carosello per rendere il tuo sito interattivo o mettere in risalto determinati video con un layout evidenziato.
Dopo aver scelto il layout, clicca su Salva.
Regolazione dello stile dei post
Per prima cosa, torniamo alle opzioni di personalizzazione principali. Basta cliccare sul pulsante Personalizza in alto a sinistra.
Sempre nel personalizzatore, clicca su Post per regolare la visualizzazione dei singoli post.
Da qui puoi personalizzare l'aspetto di ogni post Instagram, con opzioni quali:
- Stile della posta
- Immagini e video
- Didascalia
- Mi piace e commenti Riepilogo
- Stato al passaggio del mouse
Per ora, clicca sull'opzione Stile post qui.
In Stile post, puoi scegliere tra Boxed o Regular a seconda dell'aspetto che preferisci.
Come prima, clicca su Salva per memorizzare le modifiche prima di proseguire.
Un video in riquadro verrà mostrato separatamente dallo sfondo e potrai scegliere il colore dello sfondo, la dimensione del bordo e l'ombra.
Allo stesso modo, un normale video Instagram incorporato verrà posizionato sullo sfondo della pagina o della barra laterale senza separazione.
Passaggio 5: aggiungi i video Instagram incorporati al tuo sito
Una volta impostati e personalizzati i tuoi video Instagram, è il momento di aggiungerli al tuo sito.
Instagram Feed Pro ti offre due semplici modi per farlo: su una pagina, oppure in un'area widget nella barra laterale o nel piè di pagina.
Come mostrare i video Instagram incorporati in una pagina
Clicca sul pulsante "Incorpora " in alto per visualizzare le modalità di aggiunta dei contenuti Instagram al tuo sito.
Come puoi vedere, Instagram Feed Pro ti fornisce uno shortcode o ti consente di visualizzare i video su una pagina o un widget.
Nella finestra popup, puoi cliccare su Aggiungi a una pagina.
Questo mostra un elenco delle pagine che hai pubblicato sul tuo sito web.
Seleziona la pagina WordPress in cui desideri che appaia il feed, quindi clicca su Aggiungi.
Una volta nell'editor della pagina, clicca sull'icona più (+) per aggiungere un nuovo blocco.
Funziona proprio come qualsiasi altro blocco WordPress: non è necessario gestire codici di incorporamento.
Cerca " Instagram" e seleziona il blocco Feed Instagram dai risultati.
Quando sei soddisfatto dell'aspetto finale, clicca su Pubblica per rendere il feed visibile sulla tua pagina.
Come mostrare i video Instagram incorporati nella barra laterale o nel piè di pagina
Se preferisci, puoi anche aggiungere i tuoi video a un'area widget. Questo funziona solo se il tuo tema WordPress supporta i widget della barra laterale o del piè di pagina.
Per prima cosa, vai su Feed Instagram » Tutti i feed e clicca sul feed video Instagram che hai creato.
Come prima, clicca sull'opzione "Incorpora " per aprire il popup.
Vedrai le stesse opzioni di prima.
Questa volta, clicca sull'opzione Aggiungi a un widget nella finestra popup.
Dopo aver atteso un secondo, il plugin ti reindirizzerà alla pagina Widget del tuo sito web.
Da qui, seleziona il pannello Barra laterale o scegli il pannello Piè di pagina.
Il passaggio finale è lo stesso in entrambi i casi, quindi seleziona la posizione che desideri per i tuoi video.
Clicca sull'icona più (+) all'interno dell'area widget e seleziona il widget Feed Instagram per aggiungerlo.
Il tuo feed video apparirà ora nell'area widget scelta sul tuo sito.
Sei pronto a incorporare i video di Instagram nel modo giusto?
Se desideri che i tuoi video Instagram coinvolgano i visitatori senza rallentare il tuo sito o reindirizzare gli utenti su Instagram, Instagram Feed Pro è la soluzione più semplice che abbiamo testato.
Ottieni l'impatto visivo dell'autoplay, tempi di caricamento rapidissimi e il pieno controllo sul design dei tuoi video Instagram.
Sei pronto ad aggiungere video Instagram incorporati al tuo sito? Ottieni una copia di Instagram Feed Pro qui!
Mentre sei qui, puoi anche dare un'occhiata a questa guida su come aggiungere la chat di Instagram al tuo sito WordPress.
