La condivisione dei contenuti è una pratica abbastanza comune. Tuttavia, la presenza di contenuti di un altro autore sul vostro sito ha potenziali conseguenze legali, mentre ospitare contenuti di grandi dimensioni come i file video può danneggiare le prestazioni del vostro sito. Fortunatamente, iFrame fornisce una semplice soluzione a questi problemi.
In questo articolo, vi spiegheremo cosa sono gli iFrame e come usarli con il vostro sito WordPress.
Pronti a iniziare? Cominciamo subito!
Cosa Sono gli iFrame (e Perché Sono Utili)?
Un iFrame è un modo per incorporare una pagina web nel contenuto di un’altra pagina. Questo viene fatto utilizzando i tag HTML, l’URL della pagina esterna e le specifiche su come la finestra dovrebbe apparire sul vostro sito.
Ci sono due situazioni in cui gli iFrame sono generalmente utili.
Il primo è quando desiderate condividere contenuti che non vi appartengono. Nella maggior parte dei casi, l’incorporazione di contenuti attraverso un iFrame è non è considerata una violazione del diritto d’autore (a questo proposito vedete anche la sentenza UE). Pertanto, è generalmente un metodo di condivisione legale e più etico rispetto alla maggior parte delle altre opzioni. Inoltre, il codice all’interno di un iFrame non è direttamente accessibile. Questo significa che un visitatore del vostro sito non può copiare il contenuto incorporato e condividerlo altrove.
Il secondo motivo per cui potreste voler incorporare iFrame è per condividere file di grandi dimensioni, come video, audio o anche immagini. YouTube è l’esempio perfetto.
Con un iFrame, è possibile visualizzare il contenuto di un file senza doverlo ospitare nella libreria media del vostro sito WordPress. Ciò è importante perché questi tipi di file multimediali occupano spesso una quantità significativa di spazio di archiviazione, e potrebbero anche rallentare il vostro sito.
Ospitando i vostri video su una piattaforma come YouTube e poi incorporandoli sul vostro sito WordPress con iFrame, potete evitare gli svantaggi di caricarli direttamente sul vostro sito. Con questa tecnica agirete più eticamente come membri della comunità online e manterrete il vostro sito veloce e facile da usare.
Come Utilizzare iFrame con WordPress (3 Metodi)
Così come esistono vari scenari in cui si potrebbe voler utilizzare un iFrame, ci sono anche diversi metodi per implementarlo. Di seguito, esploreremo tre dei modi più comuni per aggiungere iFrame al vostro sito WordPress.
1. Aggiungere Manualmente gli iFrame in WordPress
Il codice di base per aggiungere un iFrame a una pagina è abbastanza semplice. Tutto ciò di cui avate bisogno sono i tag HTML di apertura e chiusura e l’URL della pagina web che desiderate incorporare:
<iframe src="example.com"></iframe>Ci sono un paio di limitazioni da notare per quanto riguarda l’URL di origine. In primo luogo, iFrame può visualizzare solo il contenuto di siti che utilizzano lo stesso protocollo di trasferimento ipertestuale (Hypertext Transfer Protocol) del vostro. In altre parole, se il vostro sito utilizza HTTPS, potete incorporare solo il contenuto di altri siti HTTPS. Allo stesso modo, se usate HTTP, potete incorporare solo URL che usano anche HTTP.
Inoltre, alcuni siti web popolari, come ad esempio Facebook e YouTube, disabilitano l’integrazione manuale degli iFrame. Quando si prova a visualizzare una pagina di un sito che non consente l’incorporazione di iFrame, verrà visualizzato un errore nella finestra:
Se siete in grado di utilizzare questo metodo, è importante sapere che potete anche personalizzare il vostro iFrame per soddisfare le esigenze del vostro sito. È qui che entrano in gioco i parametri iFrame. Alcuni dei più comuni includono:
- Width: Questo parametro consente di impostare una larghezza specifica per l’iFrame in pixel.
- Height: Come per il parametro larghezza, l’altezza determina la dimensione in pixel della finestra iFrame sulla pagina web.
- Allow: Con questo parametro è possibile impostare alcuni comportamenti o funzioni predefinite per il vostro iFrame, come la visualizzazione a schermo intero o l’elaborazione dei pagamenti.
- Importance: È possibile utilizzare questo parametro per specificare quando un iFrame deve essere caricato.
Per esempio, ecco come sarebbe il codice per un iFrame con una finestra di 900 pixel per 700 pixel, con visualizzazione a schermo intero abilitata, impostato per essere scaricato dopo il resto della pagina web:
<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>Sul frontend, ecco come appare lo stesso ‘iFrame:
Ci sono anche altri parametri che potreste considerare di utilizzare. Tuttavia, quelli elencati sopra dovrebbero permettervi di creare iFrame di base per condividere video di YouTube o altri contenuti sul vostro sito.
2. Usare i Codici di Embed per Creare iFrame
Alcuni siti includono delle restrizioni sulla possibilità di incorporare manualmente il loro contenuto negli iFrame. Questo può rendere difficile l’inserimento di alcuni tipi di contenuti, come ad esempio i messaggi di Facebook o i video di YouTube. Tuttavia, questo non significa che non sia possibile visualizzare il contenuto di queste fonti in iFrame.
Per farlo, è sufficiente accedere ai codici di embed. Per esempio, vediamo come funziona in YouTube. Andate sul video che desiderate incorporare, che sia vostro o creato da un’altra persona. Sotto il lettore video, dovrete vedere il pulsanteShare:
Fate clic su questo pulsante e si aprirà una finestra che mostra le varie opzioni di condivisione disponibili. Uno di loro è Embed:
Quando selezionate l’opzioneEmbed, YouTube visualizzerà un frammento HTML che è possibile utilizzare per aggiungere il video a un iFrame. Include alcuni parametri iFrame, che è possibile copiare e utilizzare se lo desiderate. In caso contrario, si può anche scegliere di copiare semplicemente l’URL di origine:
Quando utilizzate il codice embed, il video verrà visualizzato nel vostro iFrame al posto del messaggio di errore che si vedrebbe se tentaste di utilizzare l’URL standard.
Per aggiungerlo a una pagina o messaggio nell’editor a blocchi, potete utilizzare un blocco HTML personalizzato:
Nell’editor classico, è necessario passare all’editor di testo e aggiungere il codice nel punto pertinente:
Il risultato dovrebbe essere un iFrame funzionante:
Potete seguire un processo simile per incorporare un post di Facebook sul vostro sito. Andate al messaggio che desiderate condividere e fate clic sull’icona a tre punti nell’angolo in alto a destra del messaggio:
Quindi, selezionate l’opzione Embed:
Vedrete uno snippet HTML molto simile a quello del video di YouTube che abbiamo visto prima. Ancora una volta, l’URL sorgente è la parte più importante di questo codice, anche se è possibile utilizzare anche i parametri predeterminati:
Aggiungete questo codice alla vostra pagina web e il messaggio dovrebbe essere visualizzato senza problemi:
Molti popolari siti di social media, tra cui LinkedIn, Instagram e Twitter, offrono anche codici incorporati per i loro messaggi. Di solito questa opzione si trova nelle impostazioni di ogni singolo post.
3. Aggiungere iFrame a WordPress Attraverso un Plugin
Naturalmente, le persone che sviluppano WordPress lavorano sempre per semplificare compiti come l’integrazione di iFrame attraverso l’uso di plugin. Ci sono due opzioni che potreste voler considerare se l’integrazione di contenuti esterni sul vostro sito è una funzione che pensate di usare frequentemente. La soluzione più popolare è il plugin iFrame:
Questo plugin consente di aggiungere iFrame al vostro sito WordPress utilizzando degli shortcode. È possibile specificare gli stessi parametri come fareste se doveste aggiungere manualmente un iFrame via HTML. Tuttavia, non dovete preoccuparvi di gestire direttamente il codice delle vostre pagine.
In alternativa, potete anche provare il plugin Advanced iFrame:
Anche questo plugin permette di aggiungere iFrame al vostro sito utilizzando gli shortcode. Tuttavia, include anche diverse funzioni aggiuntive, come i codici di sicurezza per impedire ad altri utenti di incorporare iFrame senza il vostro permesso, opzioni di stile personalizzato e altro ancora.
Per 20 dollari, è possibile passare a una licenza semestrale di Advanced iFrame Pro. Questa versione genera iFrame responsive e abilita caratteristiche come la funzionalità di zoom e il Lazy Loading. A seconda della frequenza con cui intendete utilizzare iFrame sul vostro sito, queste opzioni potrebbero valere il prezzo più alto.
Riepilogo
Mantenere il vostro sito performante e far sì che rispetti la legge è vitale. iFrame non solo vi aiuterà a condividere i contenuti altrui in modo etico, ma vi permetterà anche di visualizzare file video e audio senza doverli ospitare sul vostro sito. In questo articolo, abbiamo esaminato tre metodi per utilizzare iFrame con WordPress:
- Incorporare siti WordPress e iFrame manualmente.
- Usare i codici embed per creare iFrame.
- Aggiungere iFrame utilizzando un plugin WordPress, come iFrame o Advanced iFrame.
Avete domande su iFrame o su come usarli sul vostro sito WordPress? Fatecelo sapere nella sezione commenti qui sotto!
Redattore Capo presso Kinsta e Content Marketing Consultant per sviluppatori di plugin WordPress. Entra in contatto con Matteo su Twitter.
Ciao, io ho fatto tutto come descritto da te, nella versione admin mentre faccio anteprima del codice html vedo correttamente il risultato, ma quando faccio anteprima o pubblica della pagina dove ho inserito questo html non si vede nulla, proprio niente, ho provato sia con un video, sia con un banner amazon pubblicitario, con un post; non capisco perchè, forse perchè il mio dominio è ancora (esempio: miosito.wordpress.com?) grazie mille non riesco a cavare il ragno dal buco :O
Ciao Niko, probabilmente si tratta di un problema di privilegi che wordpress.com non concede. Consiglierei di analizzare il problema insieme al supporto di wordpress.com.
ciao, mi allaccio a questo commento perchè ho lo stesso problema, hai risolto in qualche modo?